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

Mode: light

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`	`#eef4fb`	`#eef4fb`
`background.canvas`	`#e3edf8`	`#e3edf8`
`background.muted`	`#d4e2f2`	`#d4e2f2`
`background.surface`	`#f3f8fd`	`#f3f8fd`
`foreground.primary`	`#1f2937`	`#1f2937`
`foreground.secondary`	`#4b5563`	`#4b5563`
`foreground.muted`	`#6b7280`	`#6b7280`
`foreground.inverse`	`#eef4fb`	`#eef4fb`
`border.default`	`#b8c7d9`	`#b8c7d9`
`border.subtle`	`#cdd9e8`	`#cdd9e8`
`border.strong`	`#7f92aa`	`#7f92aa`
`accent.brand`	`{color.primary500}`	`#2563eb`
`accent.brandHover`	`{color.primary600}`	`#1d4ed8`
`accent.danger`	`{color.danger500}`	`#dc2626`
`accent.success`	`{color.success500}`	`#16a34a`
`accent.warning`	`{color.warning500}`	`#f59e0b`
`focus.ring`	`{color.primary500}`	`#2563eb`

Export snippets

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

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

:root {
  --tng-semantic-background-base: #eef4fb;
  --tng-semantic-background-surface: #f3f8fd;
  --tng-semantic-foreground-primary: #1f2937;
  --tng-semantic-border-default: #b8c7d9;
  --tng-semantic-accent-brand: #2563eb;
  --tng-semantic-focus-ring: #2563eb;
}