Colors & Surfaces
Design tokens that power the Maya UI experience. Never use hardcoded hex values — always consume these variables.
Background Tiers
Use these in order of z-axis depth. Root = deepest, Raised = floating.
--maya-bg-rootBody, canvas, page base--maya-bg-surfacePanels, toolbars, sidebars--maya-bg-raisedCards, dropdowns, modalsStriped Texture
Premium noise pattern. Stack on top of any background token.
var(--maya-pattern-stripes), var(--maya-bg-root)Typography Scale
Three levels of text emphasis.
Primary — Headings, Labels
--maya-text-primary Secondary — Body, descriptions
--maya-text-secondary Muted — Placeholders, section titles
--maya-text-mutedBorders
Three border weights for different contexts.
--maya-borderDefault dividers--maya-border-strongInputs, buttons--maya-border-hoverFocus, hovermaya-dash-allDashed separatorsDepth & Elevation
Layered shadow system to express z-axis position.
--maya-shadow-smInline elements--maya-shadow-mdCards, panels--maya-shadow-insetInputs, wellsSemantic Colors
Use sparingly to trigger emotion and communicate state. Each color has 5 variants: solid, hover, muted bg, border, text.
SuccessTrust, growth, done
--maya-successWarningCaution, action needed
--maya-warningDangerError, destructive, urgent
--maya-dangerInfoNeutral, informational
--maya-infoAccentBrand, interactive, CTA
--maya-accent