Roma / Foundations

Layout

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

Grid

Twelve columns with 24px gutters and 48px outer margins; four columns with 16px gutters and margins below 860px wide. Reading content takes eight columns, leaving three on the right for navigation like “On this page”. Grids inside content split those eight columns into halves or quarters, so every edge lands on a column line.

--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

Panels, cards, fields and checkboxes are square, matching the brand guide. Buttons take --radius-sm (4px), just enough to read as pressable. Full rounding is reserved for circles: badges, avatars, radio buttons and toggle knobs. The medium and large radii exist for rare exceptions.

--radius-none

--radius-sm

--radius-md

--radius-lg

--radius-full

Control heights

44 is the default because it meets Apple’s 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 rules, fields and cards. --border-width-2 for emphasis, outline buttons, selection controls and focus rings.