Stylebook

Typefaces

Display carries hierarchy, the serif carries reading, and mono marks anything that is a label, a figure, or a designator.

Display (Archivo)

The quick brown fox jumps over the lazy dog.

"Archivo Variable", Archivo, ui-sans-serif, system-ui, sans-serif

Body (Newsreader)

The quick brown fox jumps over the lazy dog.

"Newsreader Variable", Newsreader, Georgia, serif

Mono (JetBrains Mono)

The quick brown fox jumps over the lazy dog.

"JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace

Type scale

From the smallest label up to the hero. The two largest steps are fluid, interpolating against the viewport with clamp() instead of jumping at breakpoints. Each size is checked against its Tailwind token; a mismatch is flagged as drift.

mono-smLabel small0.6875rem

labelLabel0.75rem

body-smBody small0.875rem

bodyBody1.0625rem

body-lgBody large1.125rem

display-smHeading small (H3)1.25rem

display-mdHeading (H2)1.5rem

display-lgPage title (H1)clamp(1.85rem, 3.5vw, 2.5rem)

display-xlHero nameplateclamp(2.75rem, 6vw, 4.25rem)

Palette

An instrument palette: anodised paper, ink, an inverted panel ground, field green for accents on paper, and signal amber reserved for the panel and for status. Every value is declared in theme.json and again as a Tailwind token; each swatch shows both — theme.json above, the token the site paints with below — and is flagged if they disagree. Viewed in the dark scheme, the lower half shows the dark value the site switches to.

Paper (ground)

paper · #E8E9E4

bg-vsg-paper

Ink (text, rules)

ink · #1A1D1A

bg-vsg-ink

Panel (inverted)

panel · #232823

bg-vsg-panel

Signal (amber accent)

signal · #CD871D

bg-vsg-signal

Field (meta, tags)

field · #4A6B5A

bg-vsg-field

Rule (hairlines)

rule · #C3C5BC

bg-vsg-rule

Paper dim

paper-dim · #60635B

bg-vsg-paper-dim

Panel dim

panel-dim · #A8ABA3

bg-vsg-panel-dim

Fail (semantic)

fail · #EF4444

bg-vsg-fail

Pass (semantic)

pass · #10B981

bg-vsg-pass

Contrast pairings

The combinations the blocks are written against, scored from the hex values on every render. Text needs 4.5:1. The status lamp is decorative — the status is always written out beside it — so its ratio is recorded but not scored. The last row stays on the page to show why that pairing is ruled out.

ink / paperBody copy, headings, buttons13.94:1 · needs 4.5Pass

paper-dim / paperMono labels, metadata5.01:1 · needs 4.5Pass

field / paperAccent labels and link hover on paper4.86:1 · needs 4.5Pass

paper / panelHeadings and figures on the inverted ground12.30:1 · needs 4.5Pass

panel-dim / panelBody copy on the inverted ground6.45:1 · needs 4.5Pass

signal / panelAccent labels on the inverted ground5.06:1 · needs 4.5Pass

signal / paperStatus lamp only, never text on paper — decorative: the status is always written beside it2.43:1Decorative

field / panelNot used: the paper accent does not carry onto the panel2.53:1 · needs 4.5Not used

Spacing

Seven fixed steps, a quarter rem to six. Layout uses these, not arbitrary values.

Step 0.5 · 100.25rem

Step 1 · 200.5rem

Step 2 · 301rem

Step 3 · 401.5rem

Step 4 · 502.5rem

Step 5 · 603.5rem

Step 6 · 706rem

Components

The real blocks, rendered with sample content. They are the same files the pages use, so what you see here is what ships.

Buttons · buttonClasses()

Solid, large Outline, large Solid, small Outline, smallInverse, on panel

Section rule · vsg/section-rule

Section labelOptional link

Pull quote · vsg/caliper-quote

A quoted observation, bracketed by caliper marks rather than a solid rule.

Source line

Inverted panel · vsg/panel

Panel label

A statement that sits apart from the page, on the inverted ground.

Callout · vsg/callout

Closing call to action · vsg/cta

Closing heading.

One or two sentences of terms. The button goes to the application.

Apply to work together