Structure colors carry the layout. Accent colors signal meaning. Click any swatch to copy the hex.
Ink
All text-black, every near-black, all borders, and all hard offset shadows.
White
Primary background, and all text on dark or color fills.
Navy
Bold fields, active states, eyebrows, and primary accent work.
Panel
Light fill only: soft cards, section breaks, mockup stages.
Blue
Accent: bars, borders, and progress. Never text or a shadow.
Green
The one green: fills, bars, and pills, always with white text.
Orange
Fill only: CTAs, the slab, one featured element. Never text.
Amber
Status only: in review.
Red
Errors only.
the usage law
Ink, white, navy, and panel carry the layout. Navy, blue, and green can go big, as full-color blocks and buttons, not only thin accents. Orange stays the one you ration: save it for primary CTAs and the single most important element in a view. There is exactly one value per color: ink #0b0e14 for every near-black, border, and shadow, navy #003282, panel #f2f4f7, blue #2094e0, green #29d296, orange #ff4f01, amber #ffd84d for in-review status, and red #c2333a for errors. Text is only ever ink, navy, or white, never grey. Blue and orange are fills, never text fills. One green, one blue, one navy, one black.
Auto-generated builds drift toward these near-miss values. They pass at a glance but break the one-shade system, so search and replace every one.
These keep sneaking in
| What sneaks in | Use instead |
|---|---|
| pure black | ink #0b0e14 |
| slate or beige greys | ink or navy, never grey |
| near-panel greys | panel #f2f4f7 |
| near-amber yellows | amber #ffd84d |
| dark or off-green shades | green #29d296 |
| Montserrat or other display fonts | Archivo Black |
| any monospace font | Poppins or Archivo Black |
| rounded corners | radius 0 |
| one ink shadow on everything | role-colored shadows: green proof, blue product, navy structure, orange urgency |
| a slab with no shadow | every slab gets a shadow, in a color that is not its fill |