Theming & tokens

TailTheme stores theme decisions in semantic CSS variables. Components use roles such as primary, background, foreground, border, and muted instead of depending on a particular brand color. Applying a preset updates those variables at runtime without rebuilding the app.

• Curated presets — start from a finished palette instead of inventing one from scratch
• Live preview — change the appearance and see the current screen update immediately
• Light and dark — both modes are first-class; presets define values for each
• Safe defaults — tokens are named for roles (primary, muted, border) not one-off hex dumps

Use a preset as the starting point, then adjust radius, font, density, motion, or shell layout. For permanent brand changes, edit the source tokens rather than relying only on browser-stored preferences.

Tokens are the contract between design and code. Components read semantic variables (background, foreground, primary, border, muted, …) so a theme swap does not require hunting through JSX.

• Color — brand, surfaces, text hierarchy, borders, semantic states (success, warning, danger)
• Typography — font families and scale used by display vs body UI
• Spacing & radius — density and corner treatment that stay consistent across screens
• Shadows — elevation steps that match light and dark surfaces

Keep existing semantic token names stable when rebranding. Add a new token only when the interface introduces a genuinely new role. Avoid hard-coded hex values in feature components because they bypass presets and usually break dark mode.

src/styles/globals.css