Stylebook

The type, colour, and spacing system this site is built on, read back from the theme’s own tokens.

Typefaces

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

Display (Archivo)

Aa

The quick brown fox jumps over the lazy dog.

“Archivo Variable”, Archivo, ui-sans-serif, system-ui, sans-serif

Body (Newsreader)

Aa

The quick brown fox jumps over the lazy dog.

“Newsreader Variable”, Newsreader, Georgia, serif

Mono (JetBrains Mono)

Aa

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-sm Label small 0.6875rem
label Label 0.75rem
body-sm Body small 0.875rem
body Body 1.0625rem
body-lg Body large 1.125rem
display-sm Heading small (H3) 1.25rem
display-md Heading (H2) 1.5rem
display-lg Page title (H1) clamp(1.85rem, 3.5vw, 2.5rem)
display-xl Hero nameplate clamp(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 / paper Body copy, headings, buttons 13.94:1 · needs 4.5 Pass
paper-dim / paper Mono labels, metadata 5.01:1 · needs 4.5 Pass
field / paper Accent labels and link hover on paper 4.86:1 · needs 4.5 Pass
paper / panel Headings and figures on the inverted ground 12.30:1 · needs 4.5 Pass
panel-dim / panel Body copy on the inverted ground 6.45:1 · needs 4.5 Pass
signal / panel Accent labels on the inverted ground 5.06:1 · needs 4.5 Pass
signal / paper Status lamp only, never text on paper — decorative: the status is always written beside it 2.43:1 Decorative
field / panel Not used: the paper accent does not carry onto the panel 2.53:1 · needs 4.5 Not used

Spacing

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

Step 0.5 · 10 0.25rem
Step 1 · 20 0.5rem
Step 2 · 30 1rem
Step 3 · 40 1.5rem
Step 4 · 50 2.5rem
Step 5 · 60 3.5rem
Step 6 · 70 6rem

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 · vsg_button_classes()

Solid, large Outline, large Solid, small Outline, small Inverse, on panel

Section rule · vsg/section-rule

Section label

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