Documentation
Foundations
Spacing and size
One spacing scale for every gap and padding, density tokens that size the controls, and three corner radii. Everything is snapped to a 2 px grid.
The spacing scale
13 steps from 0 to 64 px, as --dsgn-space-<px>. Use them for every margin, gap and padding in your own CSS too: npx dsgn lint flags hard-coded pixel values. The steps are multiples of a quarter rem, rounded to 2 px, so they grow with the reader's font size and never land on half pixels.
--dsgn-space-00 px--dsgn-space-22 px--dsgn-space-44 px--dsgn-space-66 px--dsgn-space-88 px--dsgn-space-1212 px--dsgn-space-1616 px--dsgn-space-2020 px--dsgn-space-2424 px--dsgn-space-3232 px--dsgn-space-4040 px--dsgn-space-4848 px--dsgn-space-6464 px
Density
Density sizes the controls and the space inside containers. Set data-density="s", "m" (default) or "l" on the page or on any section. Touch screens without a density set get L.
| Token | S | M | L |
|---|---|---|---|
--dsgn-control-font-size | 14 | 14 | 16 |
--dsgn-control-line-height | 20 | 20 | 24 |
--dsgn-control-pad-y | 4 | 8 | 10 |
--dsgn-control-pad-x | 12 | 16 | 20 |
--dsgn-control-gap | 4 | 8 | 8 |
--dsgn-control-indicator | 16 | 16 | 20 |
--dsgn-row-pad-y | 8 | 12 | 14 |
--dsgn-inset | 12 | 16 | 24 |
--dsgn-stack | 8 | 12 | 16 |
Sizes come from type
No control has a fixed height. A button, an input or a select is its line height plus twice the vertical padding, so controls in a row always line up, and text never gets clipped when it grows.
| Density | Line height | + 2 × padding | = Control height |
|---|---|---|---|
| S | 20 | 2 × 4 | 28 px |
| M | 20 | 2 × 8 | 36 px |
| L | 24 | 2 × 10 | 44 px |
<div class="dsgn-stack" data-gap="m">
<div class="dsgn-cluster" data-density="s"><input class="dsgn-input" aria-label="Search, density S" placeholder="Density S"><button class="dsgn-button" type="button">Search</button></div>
<div class="dsgn-cluster" data-density="m"><input class="dsgn-input" aria-label="Search, density M" placeholder="Density M"><button class="dsgn-button" type="button">Search</button></div>
<div class="dsgn-cluster" data-density="l"><input class="dsgn-input" aria-label="Search, density L" placeholder="Density L"><button class="dsgn-button" type="button">Search</button></div>
</div>Corner radius
Three radii: --dsgn-radius-s for small parts (chips, checkboxes), -m for controls and -l for containers (cards, dialogs). data-radius switches all three at once.
| Token | Sharp | Default | Rounded | Pill |
|---|---|---|---|---|
--dsgn-radius-s | 0 | 2 | 4 | 6 |
--dsgn-radius-m | 0 | 4 | 8 | full |
--dsgn-radius-l | 0 | 8 | 16 | 24 |
Sharp
Default
Rounded
Pill
<div class="dsgn-grid" data-cols="1" data-cols-tablet="2" data-cols-desktop="4">
<div class="dsgn-card" data-radius="sharp"><p class="dsgn-card-title">Sharp</p><button class="dsgn-button" type="button">Save</button></div>
<div class="dsgn-card" data-radius="default"><p class="dsgn-card-title">Default</p><button class="dsgn-button" type="button">Save</button></div>
<div class="dsgn-card" data-radius="rounded"><p class="dsgn-card-title">Rounded</p><button class="dsgn-button" type="button">Save</button></div>
<div class="dsgn-card" data-radius="pill"><p class="dsgn-card-title">Pill</p><button class="dsgn-button" type="button">Save</button></div>
</div>