Space · radius · borders · GRIDD Design System

Spacing

--gd-space-00

--gd-space-12pxthe gap inside a segmented track

--gd-space-24pxicon-to-icon in an approval stack

--gd-space-36pxlabel to its control

--gd-space-48pxchip padding, tight stacks

--gd-space-510pxrow gaps

--gd-space-612pxTHE default gap between siblings

--gd-space-714pxcard padding, grid gutters in a panel

--gd-space-816pxcard padding on a comfortable surface

--gd-space-918pxsection padding

--gd-space-1020pxpanel padding

--gd-space-1124pxTHE grid gutter, and the gap between cards

--gd-space-1226pxgenerous panel padding

--gd-space-1332pxbetween subsections

--gd-space-1440pxbetween sections in a document

--gd-space-1548px

--gd-space-1656pxbetween top-level sections on a long page

--gd-space-1772pxlanding-page section rhythm

--gd-space-px1pxa hairline gap between stacked rows

Radius

The radius steps with the size of the thing: a checkbox is 4, a button is 10, a card is 14, a dialog is 16. A 16px radius on an 18px checkbox reads as a circle.

--gd-radius-xs4pxa checkbox, a swatch

--gd-radius-sm6pxa skeleton bar, a mono tag

--gd-radius-md8pxan icon tile, a small chip

--gd-radius-lg10pxbuttons, inputs, selects

--gd-radius-xl12pxlist rows and cards

--gd-radius-2xl14pxpanels and grouped cards

--gd-radius-3xl16pxdialogs and sheets

--gd-radius-pill999pxchips, badges, switches, avatars

Borders & selection

A selected card WIDENS its border rather than changing its fill, so selection survives on any surface — a selected card on the sunken grey and one on white read identically, which a tinted fill cannot manage.

Rest

Selected

The padding shrinks by the same pixel the border grows, so the content does not move when a card is selected. Without that compensation every selection nudges the layout.

--gd-border-width1pxevery default boundary

--gd-border-width-selected2pxa selected card — widen, never re-fill

--gd-border-focus-width2pxthe focus ring

--gd-border-focus-offset2pxthe gap between the control and its ring

--gd-border-focus-ring0 0 0 2px var(--gd-accent)the ring for a control that owns its own — identical to base.css's outline, but follows the radius

--gd-border-focus-ring-invalid0 0 0 2px var(--gd-danger)the same ring on a control that is already in error — the hue changes, the geometry never does

--gd-border-rule-width3pxa callout's left rule, a tab's underline

Rules & dividers

GdDivider is the border above promoted to a component — hairline between rows, strong between sections.

Draft

Edited 2 minutes ago

Decorative by default, and therefore role=presentation: a screen reader announcing "separator" between every pair of rows in a settings panel is noise. Pass semantic when the rule genuinely divides two sections a user needs told apart.

The labelled rule

A label is the "or" between a form's primary path and its alternative. It is always announced — a rule with something to say is worth hearing — so semantic is moot once a label is present, and there is no vertical form.