This page shows how this site's design system works: a Markdown spec for each component, the component built from it, and the checks that keep the two in sync. For a developer, it shows what to build from: every value is a token, and the build fails if a component uses a raw one. For a designer, it shows the reasoning behind the choices, such as why each text role has one size and every space is a multiple of 8px.
Spec
design-system/components/button.md
# Button
## Props
| Prop | Values |
| --- | --- |
| `href` | string |
| `type` | `submit`, `button` |
| `variant` | `primary` (default), `secondary`, `ghost` |
| `external` | boolean |
| `download` | boolean |
| `size` | `default`, `large` |
## Tokens
`--cmp-button-*` (height, padding-x, radius, font-weight, primary and secondary colors), `--sys-motion-*`.Component
Check
Theme: darklightTokens used: 21 of 21Hardcoded values: 0Body text on page: 15.9:117.5:1
Computed from the Button's CSS on every build. The build fails if it is not 0.
The primitives behind the tokens: neutral for the dark theme, paper for the light theme, and the violet accent.
Token specdesign-system/tokens.md
Contrast is measured against the page background.
Every role is a set of tokens: family, size, line height, weight and tracking. Display and section titles are fluid: they scale between two sizes with the viewport. Everything else is fixed, so body text follows the reader's browser font size.
--sys-type-display-size--sys-type-display-leading--sys-type-display-weight--sys-type-display-tracking--sys-font-sans--sys-type-title-size--sys-type-title-leading--sys-type-title-weight--sys-type-title-tracking--sys-font-sans--sys-type-heading-size--sys-type-heading-leading--sys-type-heading-weight--sys-type-heading-tracking--sys-font-sans--sys-type-lede-size--sys-type-lede-leading--sys-type-body-weight--sys-font-sans--sys-type-body-size--sys-type-body-leading--sys-type-body-weight--sys-font-sans--sys-type-small-size--sys-type-small-leading--sys-type-body-weight--sys-font-sans--sys-type-caption-size--sys-type-caption-leading--sys-type-body-weight--sys-font-sans--sys-type-stat-size--sys-type-stat-leading--sys-type-label-weight--sys-font-monoOne step is 8px, written in rem. A half step (4px) is reserved for tight pairs such as an icon and its label. Components never use a step directly: they use the semantic names in the last column.
| Step | rem | px | Scale | Used as |
|---|---|---|---|---|
space.half | 0.25rem | 4px | space.hairline-gap | |
space.1 | 0.5rem | 8px | space.stack-xs | |
space.2 | 1rem | 16px | space.gutterspace.stack-sm | |
space.3 | 1.5rem | 24px | space.stack-mdsize.swatch | |
space.4 | 2rem | 32px | space.gutterspace.stack-lg | |
space.5 | 2.5rem | 40px | size.control-heightsize.mark-height | |
space.6 | 3rem | 48px | space.sectionspace.stack-xlsize.logo-heightsize.chip-heightsize.control-height-large | |
space.7 | 3.5rem | 56px | space.section | |
space.8 | 4rem | 64px | size.header-height | |
space.10 | 5rem | 80px | Not referenced by a semantic token | |
space.12 | 6rem | 96px | size.scroll-offset | |
space.16 | 8rem | 128px | Not referenced by a semantic token |