Design tokens
Every colour, size, shadow and duration in Merid is a CSS custom property. Components never contain a raw value that is not also a token, so changing a token changes every place it is used.
Naming
All tokens share the --mrd- prefix and fall into three tiers.
| Tier | Example | Purpose |
|---|---|---|
| Primitive | --mrd-space-4 | A raw step on a scale. Has no meaning on its own. |
| Semantic | --mrd-accent, --mrd-tray | Named for its role. Changes between light and dark. |
| Component | --mrd-control-md | Sizes shared by a family of components. |
Prefer semantic tokens in your own code. var(--mrd-tray) follows dark mode; a hex value does not.
Categories
- Color — accent, surfaces, lines, text tones and status.
- Typography — font stacks, nine sizes with line height and tracking, three weights.
- Spacing — a 4 and 8 pixel scale plus layout widths.
- Radius — nine corner sizes that step down as surfaces nest.
- Elevation — ink-tinted shadows and the focus halo.
- Motion — durations and the single easing curve.
- Breakpoints and layers — the two breakpoints and the z-index scale.
Consuming tokens
Import the tokens without the component rules when you only need the variables:
import "@merid/react/tokens.css";Then use them anywhere CSS accepts a value:
.panel {
padding: var(--mrd-space-7);
border-radius: var(--mrd-radius-card);
background: var(--mrd-tray);
color: var(--mrd-body);
}Overriding tokens
Set a token on :root to change it globally, or on any element to scope the change to that subtree. Tokens live in the merid.tokens layer, so a plain unlayered declaration always wins. See Styling and CSS layers.