Colors
Eight brand palettes, semantic roles, and the component tokens that wire them to the UI.
Brand palettes
Every color in Dino comes from one of these eight palettes. Each runs ten steps from lightest to darkest: use the light end for backgrounds and tints, the dark end for text and pressed states. The ringed step is the default.
Foundation
Reach for these when you need a transparent black or white. They cover overlays, disabled states, and light text on dark surfaces.
--white-[opacity] --black-[opacity] Semantic roles
This layer maps what a color means to which palette it comes from. Swap a palette here and every component that uses that role updates automatically. Always reference semantic tokens in your components, never brand tokens directly.
--primary-[step] --error-[step] --success-[step] --warning-[step] --info-[step] --neutral-[step] Component tokens
These are the tokens your components actually use, named by surface, role, and state so the intent is always clear. If you're building a component, this is the only color layer you should touch.
Text
--text-headings Page and section headings --text-body-default Body copy, descriptions --text-placeholder Empty states, muted labels --text-action-light Text on dark/colored buttons --text-action-dark Text on light buttons --text-error-dark Inline error messages --text-success Positive feedback Surface
--surface-page App background --surface-elevate Cards, panels, topbar --surface-button-primary-default Primary button resting --surface-button-primary-hover Primary button hover --surface-button-disabled Any disabled button --surface-button-error-default Danger button resting --surface-button-premium-default Premium gradient button Border
--border-default Default dividers and outlines --border-action-default Selected / focused state --border-error Error state outline --border-success Success state outline --border-disabled Disabled state outline