ds
Foundations
Spacing and shape

Spacing and shape

Space scale, radii, borders and the two shadows.

Space

A 4px base in rem. Components use these steps; page sections use clamp() so vertical rhythm opens up on large screens.

--space-10.25rem · 4px

--space-20.5rem · 8px

--space-30.75rem · 12px

--space-41rem · 16px

--space-51.25rem · 20px

--space-61.5rem · 24px

--space-82rem · 32px

--space-102.5rem · 40px

--space-123rem · 48px

--space-164rem · 64px

Radius

--radius-xs0.1875rem

--radius-sm0.25rem

--radius0.375rem

--radius-lg0.5rem

--radius-xl0.625rem

--radius-2xl0.75rem

--radius-full999px

Radius	Used by
`--radius-sm`	chips, badges, kbd	4px
`--radius`	buttons, inputs, menu items	6px
`--radius-lg`	code blocks, segmented track, metrics	8px
`--radius-xl`	figures, cards, islands, panels	10px
`--radius-2xl`	dialogs, the main toolbar	12px
`--radius-full`	switches, pills, dots

Borders

Structure is a 1px line. --rule between things, --rule-strong on controls. A 1px --ink rule on top marks the start of a data block, like the stat tiles.

--rule, between rows

--rule-strong, on a control

--ink, the top of a data block

Code

<div style="border-top:1px solid var(--rule);padding-top:.75rem">--rule, between rows</div>
<div style="border:1px solid var(--rule-strong);border-radius:var(--radius);padding:.5rem .75rem">--rule-strong, on a control</div>
<div style="border-top:1px solid var(--ink);padding-top:.75rem">--ink, the top of a data block</div>

Elevation

Two shadows. --shadow lifts topo's islands and panels off the canvas. --shadow-lg is for dialogs and the command palette. fin1te.com pages use neither: they sit flat and use rules.

--shadow

--shadow-lg

Code

<div class="card" style="box-shadow:var(--shadow)">--shadow</div>
<div class="card" style="box-shadow:var(--shadow-lg)">--shadow-lg</div>