Elevation and intents
Colour in a design system answers two different questions, and Tostada keeps them apart:
- Elevation — where does this surface sit? The page, a card on it, a menu above the card.
- Intent — what does this mean? The brand's main action, something destructive, a success, a warning, information.
The elevation scale
Five levels, the same in every library:
| Level | Used for |
|---|---|
| Sunken | Wells and inset areas, below the page |
| 01 | The page itself |
| 02 | Cards and panels on the page |
| 03 | Popovers and menus above them |
| 04 | The highest layer, for what must sit above everything else |
Each level sets a surface's background, text, muted text, links, borders and the fill of any input on it. Every text pair is measured against WCAG AA in all four starter palettes, light and dark. See Foundations → Elevation → Levels.
Levels 01–03 are today's page, card and popover colours, so a library you have already customised keeps its look.
Intents
Five intents — Primary, Destructive, Success, Warning and Info — each in two emphases:
- Bold — a solid fill, for buttons and badges.
- Subtle — a tint, for panels and alerts.
On a component
A component's page in Designer mode has Level and Intent controls. A surface such as a card can move to another level; a component that expresses a meaning, such as a button, takes an intent. The change shows in the live preview.
In your exported design/ bundle, tokens.css carries the scale, the intent
tokens (for example --primary-bold-bg) and one class per level —
class="surface-03" puts an element at that level. design-system.json and
AGENTS.md record which level or intent each component wears.