Tokens
Semantic tokens
Shared CSS variables that adapt to the theme.
One shared source
Interface tokens live in packages/ui/src/styles/globals.css. The web app overrides the brand palette in apps/web/src/globals.css. Use the theme control to inspect both modes.
Semantic color tokens
Name colors by their purpose so components adapt together. Copy any variable to use it in CSS.
--background--foreground--card--card-foreground--popover--popover-foreground--primary--primary-foreground--secondary--secondary-foreground--muted--muted-foreground--accent--accent-foreground--border--input--ring--destructive--success--sidebar--sidebar-foregroundView code
/* Tailwind */
<div className="bg-card text-card-foreground border-border" />
/* CSS */
background: var(--card);
color: var(--card-foreground);
border-color: var(--border);