TailNG - Signal first Angular UI components

Theme builder

Use this page to inspect a preset the way a product team usually does while authoring: pick a preset, switch modes, preview real UI tokens, then copy the provider or CSS variable output.

Builder controls

PresetMode

Balanced spacing and expressive accents for general product interfaces.

Live preview

Theme

tailng-default-dark

Mode: dark

Primary Surface

Background, border, and foreground update from the active preset.

Focus

Tab through actions to check keyboard affordance contrast.

Semantic token inspector

Token	Expression	Resolved value
`background.base`	`#172033`	`#172033`
`background.canvas`	`#0b1020`	`#0b1020`
`background.muted`	`#26344d`	`#26344d`
`background.surface`	`#1f2a3d`	`#1f2a3d`
`foreground.primary`	`{color.white}`	`#ffffff`
`foreground.secondary`	`#cbd5e1`	`#cbd5e1`
`foreground.muted`	`#94a3b8`	`#94a3b8`
`foreground.inverse`	`{color.neutral900}`	`#0f172a`
`border.default`	`#3d4c63`	`#3d4c63`
`border.subtle`	`#2a364a`	`#2a364a`
`border.strong`	`#64748b`	`#64748b`
`accent.brand`	`#60a5fa`	`#60a5fa`
`accent.brandHover`	`#3b82f6`	`#3b82f6`
`accent.danger`	`#f87171`	`#f87171`
`accent.success`	`#4ade80`	`#4ade80`
`accent.warning`	`#f59e0b`	`#f59e0b`
`focus.ring`	`#60a5fa`	`#60a5fa`

Export snippets

import type { ApplicationConfig } from '@angular/core';
import { provideTailngTheme, defaultDarkThemePreset } from '@tailng-ui/theme';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTailngTheme({ theme: defaultDarkThemePreset }),
  ],
};

:root {
  --tng-semantic-background-base: #172033;
  --tng-semantic-background-surface: #1f2a3d;
  --tng-semantic-foreground-primary: #ffffff;
  --tng-semantic-border-default: #3d4c63;
  --tng-semantic-accent-brand: #60a5fa;
  --tng-semantic-focus-ring: #60a5fa;
}