Introduction
Raw primitive values: palette, spacing, radius, typography, sizes and metrics.
Draft
The values and key names shown in this section are conceptual and may change.
Tokens are the raw values of the design system. They carry no meaning on their own: a token says “16”, not “screen margin” or “danger”.
The Tokens contract groups them into six sets:
export type Tokens = {
palette: Palette;
spacing: Spacing;
radius: Radius;
typography: Typography;
sizes: Sizes;
metrics: Metrics;
};The defaults follow mobile metrics, especially iOS. They are a starting point: the file is copied into your project, so change them to match your product.
Palette
Every raw color, in scales from 50 to 950.
Spacing
Padding, margins and gaps on a 4 grid.
Radius
Corner rounding of surfaces and controls.
Typography
The type scale, from 34 down to 12.
Sizes
Standard sizes for icons, avatars and controls.
Metrics
Touch target, screen margin and hairline.
Tokens are the same in light and dark
Tokens don’t change between color schemes. Both themes use the same tokens object; only the semantic colors change how they map onto the palette.
export const light = {
tokens,
colors: lightColors,
components: components(lightColors),
} satisfies Theme;
export const dark = {
tokens,
colors: darkColors,
components: components(darkColors),
} satisfies Theme;See Colors.