Design tokens
Reva's platform-agnostic design tokens — OKLCH foundation palettes, numeric scales, and a semantic colour theme with light and dark modes.
Design tokens are the single source of truth for Reva's visual language. They live in @reva/design-tokens as platform-agnostic W3C DTCG JSON, and feed every surface: web CSS variables and Tailwind v4 utilities for @reva/ui, a flat table for the React Native client, and a Figma variables manifest.
Every value on these pages is read straight from the token source at build time, so the documentation can never drift from what ships.
Two layers
Tokens are organised into two layers.
- Foundation — raw primitives with zero design intent: OKLCH colour palettes plus numeric scales (spacing, sizing, radii, typography, shadows, and more). Mode- and role-agnostic.
- Semantic — intent roles (
bg/canvas,primary/solid,fg/muted,border/focus, …) that reference foundation tokens. Colour is the only mode-keyed concern: alightand adarkfile share an identical key tree and differ only in which foundation stops they point at.
Colour format
Colours are authored in OKLCH (oklch(L% C H)), a perceptually-uniform space that keeps lightness and chroma predictable across a ramp. The web build keeps oklch(…) values; the TypeScript and Figma outputs collapse to hex / rgba.
How tokens reach your UI
| Surface | Output |
|---|---|
@reva/ui (web) | Tailwind v4 @theme variables → utilities (bg-canvas, text-fg-muted, bg-primary-solid; intent finishes: translucent bg-primary-subtle, opaque bg-primary-subtle-solid) |
| Non-Tailwind web | Plain :root / .dark custom properties |
| React Native client | Flat TypeScript token table |
| Figma | Variables manifest synced via the design-tokens plugin |
Explore
Colors
The nine OKLCH foundation palettes, each a 19-stop ramp with an alpha sub-ramp.
Semantic colors
The Reva theme — intent roles mapped across light and dark modes.
Spacing
The 4px-based spacing scale.
Typography
Font families, sizes, weights, line-heights, and tracking.
Radii
Corner-radius scale from hairline to full pill.
Shadows
The elevation shadow ramp.