The Colors
Red, white and blue with gold accents. Four jobs, four colours: navy builds, red insists, white and parchment carry the words, gold finishes the edge.
The palette
Every value below is a custom property in standard.css. The build refuses to publish this page if a swatch here names a value that file no longer contains — a colour chart that has drifted from the code is worse than no chart.
Gold is an edge, not a voice
Gold at its brand value is beautiful on a card, where it is foil catching light, and unreadable on a screen, where it is a flat fill. Measured against white it reaches roughly 3:1 — enough for a border or a large heading, short of the 4.5:1 WCAG asks for body text.
So the standard splits it. --gold draws hairlines, stars, rules, the foil in a mark. --gold-ink is the darker variant, and it is the only gold allowed to carry a sentence. The table below is computed in your browser from the same values the stylesheet ships, so it cannot flatter itself.
Measured against white
Do
Section label in gold-ink
Gold carries the small caps label and the hairline under it. The paragraph itself stays in ink, where it is legible at any size.
Don't
A paragraph set in brand gold on white.
It looks expensive on a mockup and disappears on a phone in daylight — and it fails the contrast floor that the rest of the portfolio is held to. If a passage needs to feel gold, set it in --gold-ink or put the gold in the rule beside it.
Where each colour is allowed
| Colour | Job | Allowed | Never |
|---|---|---|---|
| Navy --navy |
Structure | Headers, footers, full-bleed bands, primary buttons, links | As a page background behind long-form reading |
| Red --red |
Emphasis and alarm | One accent per view, destructive actions, the flag bar, error state | A page background; two competing reds in one view; decorative use that dilutes a real warning |
| White / parchment --white --parchment |
The page | Backgrounds, cards, anything a person reads at length | Pure white text on brand gold |
| Gold --gold |
The finish | Hairlines, rules, stars, marks, focus rings, seams on cards | Body text, small labels on white, large flat fills |
| Gold-ink --gold-ink |
Gold you can read | Eyebrows, small caps labels, links inside gold callouts | Long paragraphs — it passes AA, it is still not a body colour |
| Green / amber --ok --warn |
Status only | Up/down/blocked pills, form validation | Branding of any kind. Status colours must not be brand colours, or a brand accent starts to read as a system state |
Take the file
Every token above ships in one stylesheet. Link it, don't copy it.