The site’s globals in one place: type scale, the color palette, link and chip states, and the primitive form controls. Flip the theme (the masthead toggle, or / then a theme) to see each one in light, dark, and the two phosphor tubes.

Type

One size site-wide (--text-base); hierarchy comes from weight and space, never size. Body copy rests on --leading-relaxed. The masthead font toggle swaps the whole body between the monospace and serif stacks — code always stays mono.

Heading one

Heading two

Heading three

Body text with a default link, a muted link, and an inline code chip. Hierarchy reads from bold weight and the space around a block, not from any second type size.

A blockquote — the rare aside, held a step in from the measure.

• An unordered list item
• A second item, with a link inside it
• A third

a fenced code block — a flat surface slab, no syntax color,
with a copy button in its corner

Color

The full spectrum, three steps per hue (--X, --X-light, --X-deep), shared by both themes; the intent accents alias into it. The neutral ramp steps toward the page background. Under a terminal tube everything collapses to one phosphor family.

The intent accents, each its own resting + invert: the default violet link, a violet section head, the fuchsia name, a #steel tag, and an orange year.

Form controls

Primitives wear the chip + invert grammar: a surface-tinted, bordered chip that fills with the link-intent accent on hover and focus. Under a terminal tube the shapes become characters and lines — [x] checkboxes, (•) radios, < OK > buttons — colored phosphor.