Space & size

One geometric space scale that doubles every two steps and lands on round pixel values, plus a small set of size ceilings and minimum targets. Nineteen tokens in total, and every length in base.css comes from one of them.

The space scale

Ten steps, --space-0 through --space-9. The scale is geometric: each step is double the one two places below it, so --space-1 is 4px, --space-3 is 8px, --space-5 is 16px, --space-7 is 32px and --space-9 is 64px. The even steps do the same thing offset by one, giving 6px, 12px, 24px and 48px. Every value is a whole number of pixels at a 16px root.

--space-0 is 0, unitless and deliberate. It exists so that “no space here” is still written as a token rather than a bare zero, which keeps the no-raw-values rule greppable.

Using it

Padding inside a box

One token on all four sides, or two for a block and inline split. Controls use the split, because an input needs more room at the sides than above and below.

.card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

Gap in a row

gap is the only spacing mechanism that never collapses and never needs a last-child exception, so prefer it over margins on the children wherever the parent is a flex or grid container.

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

That row wraps rather than shrinking. A Mongolian label runs 15–25% longer than its English equivalent, so a fixed-width action bar overflows on the first translation pass. More on that constraint →

Rhythm between blocks

Vertical rhythm is margin-block in a single direction. base.css puts margin-block-end on paragraphs and lists and margin-block-start on headings, so the two never fight over the same gap.

section + section {
  margin-block-start: var(--space-8);
}

Which step for what

Guidance, not law. These are the steps base.css actually reaches for, written down so a new component starts from the same instincts rather than from scratch. Deviate when the design needs it. Just deviate to another step, not to a raw value.

Column minimums

Two floors for auto-reflowing grids, added after the components were built. The scale jumped straight from --size-control to --size-container-sm with nothing usable between, so .field-row and .card-grid were both deriving a column floor by halving a container. A form column and a card column are not the same width, so they get one token each.

Size tokens

Nine tokens. These are not a scale and they are not interchangeable — each one answers a specific question. Six are ceilings (how wide may this get), two are floors (how small may this target be) and one is a starting height.

The reading measure

--size-measure is 66ch, and base.css applies it as max-inline-size on p and nowhere else. Headings, list items and table cells each get their own wrap treatment, because a heading that wraps at the paragraph measure looks broken.

The unit matters more than the number. ch is the advance width of the 0 glyph in the element's own font at its own size, so the measure re-resolves per element instead of being frozen at whatever the root font happened to be. That is exactly what a bilingual system needs. Mongolian Cyrillic sets wider than Latin at the same nominal size, and a rem-based measure would quietly hand Cyrillic a longer line than Latin at identical markup. A ch-based one tracks the font it is actually measuring.

Container ceilings

Five ceilings, applied as max-inline-size with margin-inline: auto. They are round rem values rather than a geometric progression, because a layout ceiling is a judgement about content, not a step on a scale.

Each bar is min() of 100% and its own container token — for instance inline-size: min(100%, var(--size-container-lg)) on the third one. The real token, capped at the width of this column so the page never scrolls sideways. The cap is doing visible work: the larger ceilings are wider than this content column, so on a narrow window the last bars read identically. Widen the window and they separate.

Touch and control minimums

These two set min-block-size only. Never block-size, never inline-size, never max-inline-size. The control stays free to grow in both directions, and it does.

button {
  padding-block: var(--space-3);
  padding-inline: var(--space-5);
  /* A floor, not a height. */
  min-block-size: var(--size-touch);
}

input:not([type="checkbox"], [type="radio"] /* … */) {
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  min-block-size: var(--size-control);
}

The textarea height

A free-text field must not be the height of a single-line input. If it looks like one line it invites one line, and the field that collects an address or a complaint comes back with a fragment. --size-textarea is — a real box that reads as “write something here”, with room for a Cyrillic string that runs a quarter longer than the English draft the layout was designed against.

textarea:not([rows]) {
  min-block-size: var(--size-textarea);
}

The :not([rows]) guard is the whole point of that selector. An author who writes <textarea rows="2"> has made a decision, and the system does not overrule it — the token supplies a default only for the case where nobody decided. The rule is restated in base.css rather than left in reset.css because the shared control rule lives in a later layer and would otherwise shrink every textarea back down to --size-control.