Foundations
Colors
Use semantic roles, never a remembered hex value or raw Tailwind palette class. These roles switch together so hierarchy survives both themes.
Surfaces
A restrained lift ladder modelled after xAI Console. Most pages should need only canvas, subtle, and filled.
Canvas
--backgroundThe page floor
Subtle
--surface-subtleQuiet bands and input fills
Filled
--surfaceHighlighted cards and grouped sections
Hover
--surface-hoverHover feedback on a resting surface
Active
--surface-activeSelected tabs and pressed controls
Raised
--surface-raisedCards above filled regions
Overlay
--surface-overlayMenus, popovers, and dialogs
Borders
Subtle separates nearby fills; default defines controls and cards; strong is reserved for hover and deliberate emphasis.
Subtle
--border-subtleDefault
--borderStrong
--border-strongSemantic color
Color communicates product identity, state, or categorization. Primary actions remain monochrome.
Brand
--brandSuccess
--successWarning
--warningDestructive
--destructiveInfo
--infoViolet
--violetPink
--pink