Rules for applying background, surface, text, and status colors. Each token group has a defined role in the visual hierarchy — follow these rules to maintain consistency across light and dark themes.
Background tokens define the depth of every layer in the interface. Each token maps to a specific depth level — never skip levels or mix tokens from different depths on the same z-axis position.
A fixed tone (AlwaysLight, AlwaysDark, AlwaysGraphite) that stays the same in both themes. Use them as the fill of areas that should not invert when the theme changes — screen backgrounds, plate / squircle / button fills, and similar.
Overlay tokens add the next layer on top of a surface without a new solid colour. The element takes its base colour and shifts by a fixed alpha — staying in palette and adapting to the theme on its own.
An overlay at the Background level — a translucent layer that dims the whole screen behind a modal. Backdrop only.
Pastel and Accent are not two separate palettes — they are one two-axis system. Tone can carry a status meaning (info, warning, error, success, brand), or it can give a whole section its own character — entertainment, food, transport. Intensity carries priority: you stay in one tone and turn the dial — the softer the step, the more an element recedes; the brighter, the more it asserts.
Build a single component by climbing the intensity scale with nesting depth, staying in one tone. The container takes the softest step (Pastel/Blue 1); the button on it steps up (Pastel/Blue 2); the accent detail — the icon — sits at the top (Accent/Blue 1).
Intensity also sets priority between elements. Fill an entire surface with Accent and it reads instantly as the one thing that matters — a limited-time or promo story. Here the sheet is Accent/Blue 1; the primary action steps up again to Accent/Blue 2; the secondary action sits on Surface/WhiteOverlay — a fixed white alpha that lifts it one level while keeping the sheet's hue.