Guidelines
Specimen cards for colour, type, spacing and the brand, and the rules for application surfaces. Each follows the site theme.
Colors
Brand hues
Racing green · oxblood · cognac · brass · Polo navy
Neutrals — parchment to ink
Warm, leather-toned greyscale; the page ground
Status tints
Success · warning · danger · info — foreground on tint
Workflow states
Lifecycle and decision tints — ordered by claim on attention
Type
Display — Cormorant Garamond
Upright headings that name their content, light numerals, product-page drop cap
Labels
Sentence-case captions; uppercase only for table headers and the seal
The interface register
IBM Plex Sans for application chrome — when sans, when mono
Mono — IBM Plex Mono
The technical workhorse: body, labels, code, UI
Pairing in context
Serif display over mono body — the core tension
Spacing
Corner radii
Nearly square — precision over friendliness
Spacing scale
4px base grid — 1 through 24
Brand
Dark theme
Semantic aliases flip under [data-theme=dark] — same components
Elevation & edges
Hairline + low warm shadow; brass keyline; the gilt edge
Rules & edges
Plain hairline, brass hairline, the gilt edge on ink — no ornaments
Plate & seal
Typographic heraldry — engraved plate, the inscribed seal (the adopted mark), colophon
Voice — say / not
Precise & dry vs. hyped; headings that name, not aphorise
Wordmark
Typographic mark (no logo exists) — suite & tool lockups
Application
Density
One spacing scale, two rhythms — the app lives on the grid's lower half
Responsive
Three breakpoints, and what the rail, board, and tables do at each
State honesty
Five feedback states — and why a failed read is never an empty one
What dark mode won't reach
Three surfaces that need explicit theming, not semantic tokens
Nothing important off-screen
Lane and column layouts must escape the reading measure