Every component on one page.
One stylesheet, one script, no framework. Change a token here and the whole site follows.
Colour
--ultra #2A31D8
Primary action, links, field keys.
--ink #14151A
Body text, dark buttons.
--zinc #E9EAEE
Page background.
--void #0E0F13
Dark bands, footer.
Ultramarine is the only saturated colour on the site. Green, amber and red appear solely as status, never as decoration.
Card designs
Six compositions, not six colourways. Each is a different arrangement and hierarchy of the same four fields, driven by data-layout on one piece of markup. Type scales in container units, so every layout holds inside the trim at any size and at the field length limits.
Asymmetric, name upper-left, company on the baseline. The default, and the one that looks like a card people already know.
Centred and optically balanced, with a hairline above the company line. Formal — the engraved-plate reading.
A solid accent block down the left with the company set vertically inside it. The one that reads as branded at arm’s length.
A specification sheet: mono keys left, values right, hairline rows. The closest to what the verification page actually shows.
Initials as a credential disc. Useful where the card is worn or clipped and read at a glance.
The name at poster scale over a mono baseline of role and company. For people whose name is the product.
Card stocks
Object colours, not interface colours. A printed card does not change with the reader’s theme, so these five sit outside the token system and stay fixed in dark mode. Each carries its own type and accent colour; the smallest type on the card clears 5.3:1 on every one.
bone
Dark type, ultramarine accent.
ink
Light type, periwinkle accent.
graphite
White type, halo accent.
forest
Light type, mint accent.
oxblood
Light type, coral accent.
Six layouts, five stocks, seven engravings and three laminates. All one price — the designer never gates a choice behind an upgrade.
Engravings
A blind deboss: no ink, just the stock pressed. Each is drawn from the stock’s own colour at low alpha and masked to radiate from the chip, so the engraving fades before it reaches the type and never costs the name any contrast. Ripple is the default because the rings mark the tap point — the pattern is doing a job.
Concentric rings from the chip. Radial gradient, 7 px pitch, origin follows the mark per layout.
Interlaced rosette, the engraving on banknotes and passports. Five hypotrochoids, generated by tools-make-patterns.py.
Two hairline rulings 0.7° apart. The interference is the point, and it drifts a few pixels on hover.
A 7 px dot screen. Dots cover less area than rules, so this one is pressed harder.
Offset topographic rings from beyond the corner, like a survey sheet.
An 11 px graph rule. Plus Plain, for people who want none of this.
The designer on the home page cycles these six combinations every five seconds. The cycle is driven by the animationiteration event on its own progress bar rather than a timer, so the two cannot drift; it never starts under prefers-reduced-motion; and the first click or keystroke in the designer ends it for good, because auto-play that fights the person driving is worse than no auto-play.
Type scale
Display / Archivo 112% width
Section heading
Subsection heading
Card heading
Lede — Instrument Sans, used once per section at most.
Body copy sits at 17px with a 64-character measure. Long-form legal pages use the same size at a 70-character measure.
Label — Martian Mono, uppercase, 0.1em trackingButtons
One primary action per view. Loading state is a class on the button, so no layout shift.
Forms and validation
Status
Accordion
data-acc-single to the wrapper for one-at-a-time behaviour.Accessibility floor
Keyboard
Tabs use arrow keys, the drawer and modal trap focus and restore it on close, Escape closes both.
Motion
prefers-reduced-motion disables every transition and reveal, and the tilt handler never binds.
Contrast
Body ink is 15.2:1 on the page background and 18.2:1 on white cards. Ultramarine links are 8.3:1 on card white and 6.9:1 on the page background — comfortably AA, just under AAA on the darker of the two.