Make it feel like you.

Semantic tokens keep components coherent while leaving room for a different personality.

One vocabulary, many personalities.

background, foreground, muted, border, primary, primary-foreground, accent, and danger describe purpose rather than a specific colour. Apply a .dark ancestor to switch component themes.

:root {
  --primary: #405746;
  --primary-foreground: #ffffff;
  --accent: #d7e0c4;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-interface: 'Geist', sans-serif;
}

Keep the relationships

Check text contrast after changing tokens, including disabled states, focus rings, and chart labels. Each template intentionally supplies its own default identity.