05 · Color

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.

05.1

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.

05.2

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.

05.3

Accent palette

Teal

primary · brand 800
The lead brand color. The Syntheus mark sits in this family. Deep stops carry brand grounds and marketing chrome; mid stops carry primary callouts and 'do' affirmations.
brand · 800Aa
50950

Purple

ground · brand 800
Intelligence and depth. A deep, saturated rich ground for full panels and dark sections where the brand needs gravity and focus.
brand · 800Aa
50950

Blue

ground · brand 800
The structural cool: deep navy grounds, charts, and dual-color compositions. The bright stop reads as sky for data and signal.
brand · 800Aa
50950

Orange

accent · brand 500
Signal: the primary bright accent. CTAs, the period, the single hot point on a page. Lead with orange; use it confidently and sparingly.
brand · 500Aa
50950

Amber

accent · brand 500
Energy and attention. Editorial punctuation: italic highlights, warm marks. Reads soft against cream, so reserve it for moments that earn the warmth.
brand · 500Aa
50950

Red

accent · brand 500
Emphasis and the human note: a sharp rose-raspberry accent for highlights and chart series. Deep stops go to wine for richer grounds.
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; 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.
05.5

Semantic tokens

How raw colors map to roles. Components reference these tokens, never raw hex.

TokenReferenceHexUse
surface.paperDefault page background.
ink.900Primary text, the inverse surface, the pill button.
ink.700Body text, secondary headings.
ink.500Mono labels, eyebrows, captions.
teal.800Lead brand color. Brand grounds, callouts, 'do' moments.
purple.800Intelligence ground: deep panels and dark sections.
blue.800Structural ground: charts, dual-color compositions.
orange.500Signal accent: CTAs, the period, one hot hit.
amber.500Energy accent: editorial punctuation, highlights.
red.500Emphasis accent: highlights, chart series.
rgba(ink.900, 0.14)Hairline rules between sections.
05.6

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.

  • Aa
    ink-900 on paper15.8 : 1

    Body, headings, all type sizes.

  • Aa
    ink-700 on paper11.0 : 1

    Body, secondary headings.

  • Aa
    ink-500 on paper5.0 : 1

    Mono labels and 13px+ body. Avoid below 13px.

  • Aa
    paper on ink-90015.8 : 1

    Reverse chrome, the pill button, dark-section type.

  • Aa
    paper on teal (800)10.2 : 1

    Type on teal-deep ground. Brand-forward section heroes.

  • Aa
    paper on purple (800)13.5 : 1

    Type on purple ground. Deep panels and dark sections.

  • Aa
    ink-900 on orange (500)5.9 : 1

    Ink on orange signal. Pair with ink only, never paper.

Syntheus
— Get in touch

For new engagements and partnership inquiries.