Standard::Design

The norm of proportion and color. Nothing on a Standard page is an
eyeballed value: every size, space, and color derives from a small set of
constants. This is what makes beauty a default instead of a decision.

The living specimen of this book is the
landing page of this site — every specification it prints is measured
from the running stylesheet.

2.1 Proportion

• Golden ratio (1.618) governs layout blocks.
• Silver ratio (1.414) governs the typographic scale and line heights.
• One base size; the whole scale follows (--scale-d5 … --scale-8).

2.2 Color — the OKLCH engine

You choose an ink, a paper, and one accent. The engine derives
everything else at equal perceived lightness: surfaces and borders from your
paper, semantic states by rotating your ink’s hue (+25° error, +85° warning,
+145° success). Configure a dark theme and the light theme is its
deterministic inversion — background ↔ foreground, accent preserved.

2.3 Type roles

Three roles, not three fonts you pick per page:

2.4 Layout width

Two width tokens, not three — .prose has no width of its own; it reads
the page shell’s directly.

.prose is a CSS grid with named, mirrored tracks (hero / feature /
editorial / content). .feature and tables/.editorial break out from
the reading column by a fixed rhythm increment (--space-2 /
--space-4 each side) — they never reference either width token directly.
.hero/.full are the one genuinely unbounded tier (minmax(0, 1fr)
tracks) — --body-max-width is what stops them from growing past the
page shell.

body centers itself with margin-inline: auto; .prose inherits that
centering by sitting inside it. text-align plays no part in any of
this — it centers words inside a box, never the box itself.

To pin content to the left edge of the browser (say, a 300px column,
flush left): add .left to .prose — it zeroes margin-inline and drops
the grid’s mirrored gutters so the content track starts at the box’s own
edge — then set --body-max-width and --line-width to the widths you
want. .left isn’t a frontmatter token yet; today it needs a class in
markup or garden-wide CSS on the profile note.

The override ladder

Framework defaults → theme (tokens.yaml) → per-note frontmatter tokens.
Later always wins; nothing else may set a design value. (The frontmatter
mechanism is specified in Standard::Vault §1.2.)