Internal

The column count is derived from the page rule, never a hardcoded band.The cell is a constant 24px and .page lays repeat(auto-fill, var(--cell)) capped at --page-max (55 cells / 1320px) and centred above it. The script recomputes cols the same way — min(cap, floor(pageWidth / cell)) — so the readout tracks the real grid at every width. There are no 40/30/20 bands left to keep in sync.

Grid Overlay

Visible construction grid — column lines at --cell intervals, stretching full page height. Debug and demonstration tool.

Foundations

Behaviour

Used by BaseLayout

Rolepresentation

KeyboardGlobal 'g' key shortcut toggles visibility (see src/scripts/main.ts)

WhenDebug grid visibility.

Not whenProduction display unless the design calls for visible construction.

aria-hiddenPurely decorative — no semantic content.

Icon Specimen

Displays an icon at its actual size with metadata (source, dimensions, usage).

Arrow Left Phosphor Light · 14×14 Nav back links

Foundations

Typography body-mono

Colour ink ink-secondary surface

Spacing space-within space-blocks space-inset

Behaviour

Used by Iconography

Rolefigure

WhenSystem page iconography section only.

Not whenNever used outside /system.

Live Demo

Container for rendering a live component instance on the system page.

Sample live demo container

Example action

Foundations

Typography body-mono

Colour ink-secondary surface

Spacing space-related space-200

Behaviour

Used by Colour System Section

Rolefigure

WhenSystem page only — wraps interactive demos with a label.

Not whenNever used outside /system.

Spacing Specimen

Visualizes a spacing token as a proportional bar with cell-multiple label. Role tokens pass alias — the step they alias — so the readout shows role, step, and live px.

SPACE-100 ·

Foundations

Typography body-mono

Colour accent ink-secondary ink

Spacing space-012 space-within space-blocks

Behaviour

Used by Layout

Rolefigure

WhenSystem page layout section only. Scale steps pass token alone; role tokens also pass alias (the step they alias).

Not whenNever used outside /system.

token prop is interpolated unvalidated into inline stylestyle={`width: var(--${token}); height: var(--${token})`} injects the raw prop string directly — any non-token value would break or leak into the style attribute

The cell multiple is measured, never mappedIt was a hardcoded token → label map, which is a second statement of a value the stylesheet already owns. It drifted: --space-blocks was captioned "1 cell" while measuring 48px. The readout now divides the measured px by the measured cell, so the caption cannot disagree with the bar above it

System Next Card

Continuity card ending every system route: "Next", then the section it hands off to, in reading order and wrapping back to the overview. It is a SummaryCard in the index variant with a label above it — the same card the overview and the section grids are built from, rather than a second copy of that card's type, spacing and hover rules, which is what it carried while the retired OverviewCard existed to be copied. It carries Astro's viewport prefetch so the next route is loaded before it is clicked.

Foundations

Typography body-mono

Colour ink-secondary

Spacing space-heading-after

Behaviour

Contains SummaryCard

Used by System System Section Schema

Rolecomplementary

KeyboardEnter follows the link

WhenRendered by the system pages via nextSystemSection() — never place by hand with an ad-hoc target.

Not whenNever used outside /system.

PreferSummaryCard in the index variant for table-of-contents grids — this component is that card plus the "Next" label and nothing else

Every system route ends with exactly one, in reading orderThe per-route split must not fragment the browsing experience — each page hands off to the next section, and the chain wraps back to the overview

The chain is every section, internal included; only genuinely off-chain routes (schema) jump back to the overviewThis replaces a rule that excluded internal, whose reason was that internal is hidden behind the internals toggle everywhere else so the main reading flow must not advertise it. That stopped being true when internal was ungated across /system — it is a normal section in both navs and on the overview, and a section that is visible everywhere but unreachable by the one control whose whole job is "what comes next" is a gap with no reason behind it. The toggle now gates entry rendering on the internal route itself and nothing else

The mark is an arrow, where every other index card carries an ideaThe card names a direction rather than a subject — there is no glyph for "the next one". It replaces a literal "→" appended to the section name, which was this card drawing an arrow in text in the position the unified card gives to a mark, and which made the name read as though the arrow were part of it

System Sidebar Nav

Left sidebar navigation for the /system routes on wide viewports. One item per section route, auto-derived from getNavSections(); the current route's entry list is expanded, entries elsewhere navigate cross-route.

Foundations

Typography body-mono

Colour ink ink-secondary accent border surface ground

Spacing space-within space-related space-blocks space-subsections cell

Behaviour

Contains Icon

Used by SystemLayout

Rolenavigation

KeyboardStandard link navigation; search input is a combobox (role=combobox, aria-expanded, aria-controls, aria-activedescendant) with Arrow/Enter/Escape handling — see src/scripts/system-search.ts

WhenSystem page sidebar.

Not whenNever used outside /system.

Desktop onlyReplaced by SystemTopNavBar on narrow viewports.

Horizontal top navigation bar for the /system routes on narrow viewports. Mirrors the sidebar's section list in a compact horizontal layout; the sub-row lists the current route's entries.

Foundations

Typography body-mono

Colour ink ink-secondary accent border surface ground

Spacing space-within space-related space-blocks

Behaviour

Contains Icon

Used by SystemLayout

Rolenavigation

KeyboardStandard link navigation; search input is a combobox (role=combobox, aria-expanded, aria-controls, aria-activedescendant) with Arrow/Enter/Escape handling — see src/scripts/system-search.ts

WhenSystem page top nav on narrow screens.

Not whenNever used outside /system.

Mobile/tablet onlyReplaced by SystemSidebarNav on wide viewports.