Foundations
Foundations
The default theme’s tokens, from reference values to the roles components read, with every value generated by @oddkin/tokens.
Topics
Token architecture
Tokens come in tiers: reference values, foundation scales, semantic roles, and component roles.
Color
Generated ramps supply the raw colours.
Typography
Text styles combine a family, size, weight, line height, and letter spacing from the foundation scales.
Spacing
One explicit scale from 0 to 6rem.
Borders and radii
Two border widths, a focus ring with its own width and offset, and a corner scale from square to fully rounded that controls and cards read through their own roles.
Elevation
Five two-layer shadows, stronger in dark mode so they stay visible: sm for controls, md for cards, lg for popovers and menus, and xl for dialogs.
Motion
Durations and easings come from motion tokens.
Themes
One configuration generates a theme.
Responsive behavior
Layout recipes change arrangement with named conditions and profiles.
Where the values come from
The tables, swatches, and specimens read the default theme’s inspection, @oddkin/tokens/inspect/default.json, and its contrast report when the site is built. Change the theme and rebuild, and the pages follow.