05 · Color

The palette and how to use it.

A warm cream paper system, ink, and five accent ramps. Sage leads as the brand color. Indigo structures. Mustard, terracotta, and plum punctuate. Each accent ships an 11-stop ramp for UI states.

05.1

Overview

Hierarchy

Not every color is equal. Cream and ink carry the brand. Sage leads — it's the color in the mark. Indigo structures. Mustard, terracotta, and plum support — never lead.

05.2

Neutrals

Surface

Warm cream paper family. Background system; less yellow than the original, no green tint.

Ink

Warm near-black with slight umber cast. Foreground text and chrome.

05.3

Accent palette

Sage

primary · brand 500

Sage-teal — the brand color. The Syntheus mark sits in this family. Used for primary brand callouts, brand surfaces, and 'do' affirmations.

brand · 500Aa

50950

Indigo

primary · brand 700

Mid-century deep blue, named for the plant-derived dye. The structural cool counterweight to sage and the warm accents. Anchors charts, deep grounds, and dual-color compositions.

brand · 700Aa

50950

Mustard

accent · brand 500

Warm yellow. Editorial punctuation — italic highlights and the period. Use sparingly; mustard reads soft against the cream paper, so reserve it for moments that earn the warmth.

brand · 500Aa

50950

Terracotta

accent · brand 500

Earthy red-orange. Brings warmth at scale; favored for full-bleed section grounds and 'don't' callouts.

brand · 500Aa

50950

Plum

supporting · brand 500

Muted plum/burgundy. The depth note — adds gravitas without going to ink. Used for secondary surfaces.

brand · 500Aa

50950

05.4

Compositions

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; sage signals brand.

Paper / Ivory70%Surfaces and rest space.
Ink22%Body, headings, chrome.
Sage6%Brand mark, brand callouts, primary affirmation.
Mustard / others2%Editorial punctuation — italic highlights, the period.

Brand-forward — section ground

For section heroes, project covers, and surfaces where a single accent carries the brand at scale.

Accent ground75%Full-bleed accent surface — deep stops only.
Paper / type-on-dark22%Type, chrome, hairline rules.
Mustard3%Editorial punctuation 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.
Sage4%Brand callouts, blockquote rules, italic emphasis.

05.5

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.
	sage.mid (500)		Brand color. Brand callouts, primary affirmation, 'do' moments.
	indigo.mid (700)		Structural cool — section grounds, charts, dual-color compositions.
	mustard.mid (500)		Editorial punctuation — italic highlights, the period.
	terracotta.mid (500)		Supporting accent. 'Don't' callouts. Warm section grounds.
	plum.mid (500)		Supporting accent. Depth note.
	rgba(ink.900, 0.14)		Hairline rules between sections.

05.6

Accessibility

Use these reference pairings as starting points. WCAG AA threshold for body text is 4.5:1; for large text and UI, 3:1. Validate any new pairing before shipping.

Aa
ink-900 on paper13.4 : 1
Body, headings, all type sizes.
Aa
ink-700 on paper9.8 : 1
Body, secondary headings.
Aa
ink-500 on paper4.9 : 1
Mono labels and 13px+ body. Avoid below 13px.
Aa
paper on ink-90013.4 : 1
Reverse chrome, the pill button, dark-section type.
Aa
paper on indigo (700)10.1 : 1
Type on indigo ground.
Aa
paper on sage (700)7.2 : 1
Type on sage-deep ground. Brand-forward section heroes.
Aa
ink-900 on mustard (500)8.4 : 1
Type on mustard ground. Pair with ink only — never paper.