Semantic color tokens from a single brand color
Brand
Theme
Auto (prefers-color-scheme)
Force Light
Force Dark
Copy full CSS
Tip: click any variable name below to copy it.
Tokens
Component previews
Primary button
Secondary button
Card on
--surface-raised
Border:
--border-subtle
Accent link
Brand block – on-brand text
Generated CSS (read-only preview)