Tokens
Defined once in TypeScript. The JSON and the CSS custom properties are generated.
The neutral scale
Ink to paper. There is no accent.
Type scale
| Style | Size | Weight | Tracking |
|---|---|---|---|
| displayXl | 52px | 600 | -0.035em |
| display | 38px | 600 | -0.03em |
| title | 22px | 600 | -0.02em |
| subhead | 17px | 500 | -0.01em |
| body | 15px | 500 | -0.01em |
| label | 13px | 600 | -0.01em |
The grid
204px modules: a 184px column and a 20px gutter, drawn faintly across every page. Content boxes span whole modules; edges step from grid line to grid line on resize.
Programmatic access
import { rasterTokens } from "@raster/core";
rasterTokens.color.light.paper; // "#FAF8F2"
rasterTokens.grid.module; // 204
// or over the wire
// GET /r/index.json (the component registry)
// npx raster tokens (the token set as JSON)