Layout & spacing

Margins, padding, and gap values in Field Guide read from one consolidated scale. To maintain consistency and relative scaling, space tokens are declared in rem values.

Root Font-Size Preview

Browser zoom functions scale everything uniformly. Rem spacing allows for context-appropriate scaling that adjusts proportionally to individual, persistent user settings. You can change the displayed Root font-size here to view spacing tokens modified for different font-size settings. Preview-only: not saved, resets to 16px default on reload.

Root font-size: Every rem value on this page — including the px column below — recalculates live as you change this.

Spacing Scale

The Field Guide scaling system is based on a linear progression of 4px/0.25rem, widening at the higher steps to better suit large-scale spacing.

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-7

--space-8

--space-9

--space-10

Border Widths

Border widths are set in fixed pixel values, not rem, so lines stay crisp at any font-size — a rem-based border could compute to a fractional pixel and render blurred.

--border-width-hairline

--border-width-active

--border-width-accent

Token Usage Reference

Scale and border tokens are meant to be versatile; the following is a (non-exhaustive) list of examples where each token appears in active use in the Field Guide UI.

--space-1 nav tab underline offset · swatch label stack gap (colors.html) · tag-confidence padding component

--space-2 theme-toggle icon/label gap · swatch icon-to-label gap (colors.html) · section-intro paragraph offset against its overline

--space-3 masthead vertical padding · theme-toggle horizontal padding · sandbox-note margin-top (default heading-to-paragraph gap)

--space-4 masthead divider margin · swatch-grid gap (colors.html) · Card-datapoint row gap (results.html, colors.html)

--space-5 type-row padding (design-system.html) · section-label margin-bottom (every page) · card padding component (accessibility-note, Card-datapoint header/group)

--space-6 page shell horizontal padding (every page) · nav gap · card padding component (accessibility-note)

--space-7 nav-to-content margin-bottom · data-card-demo gap (design-system.html)

--space-8 page top padding (shell) · header-to-content margin-bottom

--space-9 section-to-section margin-bottom — every .scale-section, every page

--space-10 page bottom padding (body) — scroll runway under the last section

--border-width-hairline hairline dividers (sandbox-header, type-row, Card-datapoint row/header borders) · card/swatch outline borders · theme-toggle & tag-confidence outline

--border-width-active nav active-tab underline — every page

--border-width-accent not currently applied by any real component — defined for a future accent-stripe treatment