Pencil Box / FoundationsGraphic Standards Manual

Layout

Spacing on a 4-point base, a 12-column vertical grid, square corners, and controls sized for fingers as well as cursors.

Edit this page

Grid

Twelve columns with 24px gutters and 48px outer margins; four columns with 16px gutters and margins below 860px wide. No horizontal grid. Reading content takes eight columns, leaving three on the right for navigation like “On this page”. See the Grid system.

--grid-cols: 12;      /* 4 on phones */
--grid-gutter: 24px;  /* 16px on phones */
--grid-margin: 48px;  /* 16px on phones */

Spacing

Use for padding, gaps and margins. 2 is for hairline adjustments only.

--space-22px

--space-44px

--space-88px

--space-1212px

--space-1616px

--space-2424px

--space-3232px

--space-4848px

--space-6464px

--space-9696px

Corners

Everything is square: panels, cards, fields, buttons, checkboxes, toggles. Full rounding is kept for true circles only: radio buttons, badges, and the seal.

Control heights

44 is the default because it meets the minimum touch target. 56 is for prominent actions. 32 is for dense desktop tools only, and never for Primary buttons.

--control-height-sm32px

--control-height-md44px

--control-height-lg56px

Borders

--border-width-1 for hairline rules, fields, outline buttons and cards: the manual is drawn almost entirely in 1px lines. --border-width-2 for focus rings and errors.