The palette and how to use it.
A warm cream paper system, ink, three deep grounds, and three bright accents. Teal leads as the brand color. Purple and blue ground. Orange signals; amber and red punctuate. Each color ships an 11-stop ramp for UI states.
Overview
Hierarchy
Not every color is equal. Cream and ink carry the brand. Teal leads; it's the color in the mark. Purple and blue carry the deep grounds. Orange signals, with amber and red as punctuation. Never lead.
Neutrals
Surface
Warm cream paper family. The resting background system: warm, tactile, never stark white.
Ink
Warm near-black with slight umber cast. Foreground text and chrome.
Accent palette
Teal
primary · brand 800Purple
ground · brand 800Blue
ground · brand 800Orange
accent · brand 500Amber
accent · brand 500Red
accent · brand 500Compositions
Three reference distributions for how the palette balances at different scales of work.
Default: marketing
The standard composition for most marketing surfaces. Cream dominates; ink carries text; teal signals brand.
- Paper / Ivory70%Surfaces and rest space.
- Ink22%Body, headings, chrome.
- Teal6%Brand mark, brand callouts, primary affirmation.
- Orange / others2%Signal: CTAs, the period, one hot accent.
Brand-forward: section ground
For section heroes, project covers, and surfaces where a single deep ground carries the brand at scale.
- Deep ground75%Full-bleed teal / purple / blue ground: deep stops only.
- Paper / type-on-dark22%Type, chrome, hairline rules.
- Orange3%Signal accent against the deep ground.
Editorial: long-form
For long-form writing (case studies, essays). Higher contrast, narrower color range to keep the reader inside the prose.
- Paper80%Page surface.
- Ink16%Body, headings.
- Teal4%Brand callouts, blockquote rules, emphasis.
Semantic tokens
How raw colors map to roles. Components reference these tokens, never raw hex.
| Token | Reference | Hex | Use |
|---|---|---|---|
| surface.paper | Default page background. | ||
| ink.900 | Primary text, the inverse surface, the pill button. | ||
| ink.700 | Body text, secondary headings. | ||
| ink.500 | Mono labels, eyebrows, captions. | ||
| teal.800 | Lead brand color. Brand grounds, callouts, 'do' moments. | ||
| purple.800 | Intelligence ground: deep panels and dark sections. | ||
| blue.800 | Structural ground: charts, dual-color compositions. | ||
| orange.500 | Signal accent: CTAs, the period, one hot hit. | ||
| amber.500 | Energy accent: editorial punctuation, highlights. | ||
| red.500 | Emphasis accent: highlights, chart series. | ||
| rgba(ink.900, 0.14) | Hairline rules between sections. |
Accessibility
Contrast ratios are computed live from the token hexes, so they never drift from the palette. WCAG AA threshold for body text is 4.5:1; for large text and UI, 3:1. Validate any new pairing before shipping.
- Aaink-900 on paper15.8 : 1
Body, headings, all type sizes.
- Aaink-700 on paper11.0 : 1
Body, secondary headings.
- Aaink-500 on paper5.0 : 1
Mono labels and 13px+ body. Avoid below 13px.
- Aapaper on ink-90015.8 : 1
Reverse chrome, the pill button, dark-section type.
- Aapaper on teal (800)10.2 : 1
Type on teal-deep ground. Brand-forward section heroes.
- Aapaper on purple (800)13.5 : 1
Type on purple ground. Deep panels and dark sections.
- Aaink-900 on orange (500)5.9 : 1
Ink on orange signal. Pair with ink only, never paper.