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 "@noordvc/raster";
rasterTokens.color.light.paper; // "#FAF8F2"
rasterTokens.grid.module; // 204
// or over the wire
// GET https://raster.noord.dev/r/index.json
// npx @noordvc/raster-cli tokens