02 — Type

Typography

A three-family system: Saans carries headlines and body, Abstract Serif adds editorial contrast, and Antarctican Mono handles eyebrows, tags and code.

Typeface families

Primary

Saans

AaBbCcDdGg 0123

Headlines & body. The workhorse of the system.

Secondary

Abstract Serif

AaBbCcDdGg 0123

Editorial & special use. Mixed into headlines for emphasis.

Monospace

Antarctican Mono

AaBbCcDdGg 0123

Eyebrows, tags, superscript & code.

Note This preview renders the real brand type: Saans and Abstract Serif ship locally via @font-face, and Antarctican Mono loads from Adobe Fonts. Every spec below is mapped to the correct family through the --font-* tokens.

Hierarchy scale

Five roles, each with exact type specifications.

Section introduction

Eyebrow

Font
Antarctican Mono
Weight
Medium
Tracking
-2%
Case
Uppercase
Usage
Section intros, labels

Helping product teams drive
measurable outcomes

Headline · H1 / H2

Font
Saans + Abstract Serif
Weight
Regular
Tracking
-5%
Line height
100%
Serif
One key line only
Usage
Hero & section headlines

We embed with your product teams to turn AI ambition into shipped, measurable outcomes — pairing rigor with hands-on delivery so the work compounds long after we leave.

Body text

Font
Saans
Weight
Regular
Tracking
0%
Line height
135%
Usage
Paragraphs & long-form

Product-focused thinking — not generalist consulting.

Body emphasis

Font
Saans
Weight
Medium
Tracking
0%
Line height
135%
Usage
Lead-ins & emphasis

[ AI Strategy ]  [ Delivery ]  Est.2024

Tags / Superscript

Font
Antarctican Mono
Weight
Medium
Tracking
0%
Usage
Metadata, tags, superscript
Serif — do
  • Use Abstract Serif for the single key concept that carries vision, transformation, or a memorable outcome.
  • Limit serif to one line of a headline — either the first or the second, never both.
  • Set every other line in Saans.
Serif — never
  • Set two serif lines in the same headline.
  • Drop serif onto a single mid-sentence word for emphasis.
  • Use serif in body copy, navigation, CTAs, or UI elements.

Typesetting in context

The full hierarchy assembled as it appears in production.

AI Transformation

Your path to an
AI operating model

Product Partners embeds senior practitioners alongside your teams to move from AI ambition to shipped outcomes. We bring the rigor and best-in-class practices of the world's strongest product organizations — and we build, not just advise.

Trusted by Nestlé · Disney · Freddie Mac · Cox · BT

Buttons

A fully-rounded pill across four roles. The primary is solid Burgundy; the white and outline variants are built for dark and photographic backgrounds; the tertiary is a quiet text link.

Primary
Solid Burgundy #370100 pill, white label. One per view.
Primary · white
White pill, Burgundy label — for dark or photographic backgrounds.
Secondary · outline
1px border in the current text color, transparent fill.
Tertiary · link
Text + arrow over a 1px rule. Lowest emphasis; no fill.

03 — Color

Colors

A restrained, near-monochrome palette. Black, white and grays carry ~95% of every layout; red and orange appear only for calls to action and key moments. Click any value to copy.

A · Primitive palette

Base colors defined by tone and intensity, with no assigned use. Each family steps from its base (500) to its lightest tint (50). Click any swatch to copy its HEX.

Core values — Neutrals · HEX / RGB / CMYK

Core values — Accents · HEX / RGB / CMYK

B · Semantic palette

Primitive values mapped to functional roles.

Status messages — light backgrounds · fill at 12% opacity

For inline section messages on light surfaces, each status color drops to a 12% tint over white — the lightest step tested that still reads as the status while keeping neutral body text well above AA (~10:1). The full-strength color carries only the icon and a hairline border, so contrast never depends on the colored fill.

Deployment completeYour changes are live across all environments.
Approaching usage limitYou've used 80% of this month's quota.
Upload failedThe file exceeds the 10 MB limit. Try a smaller file.
Scheduled maintenanceService may be briefly unavailable Sunday at 02:00 UTC.

C · Theme exploration

Preview

Live preview — toggle Light / Dark with the control above. In dark mode, Orange becomes the primary accent to hold a 4.5:1 contrast ratio.

Case Study

Built, not just advised.

We embedded with the team and shipped a production AI workflow in nine weeks — rigor, hands-on.

Body text in context

Dominant neutrals carry the layout while a single accent draws the eye to the action. Secondary text recedes, primary text leads.

Secondary / supporting copy.

An inline text link →

D · Color usage guidelines

Ratio & dominance
  • Neutral-led (~72%) — black, grays and off-white carry the bulk of every layout; the system reads near-monochrome.
  • Burgundy is the brand block (~18%) — large supporting surfaces, primary buttons and dark-mode panels.
  • Orange & red are accents (~10%) — reserved for CTAs, links and key interactions only.

Neutrals 72% Burgundy 18% Orange 6% Red 4%

Accessible pairings
  • Black text on white / off-white  ✓
  • White text on black / dark red  ✓
  • Red buttons take white or very light text  ✓
  • Dark mode: Orange accent holds 4.5:1 on black  ✓

Interactive states: Red for primary actions, Orange for secondary. Never rely on color alone to signal state.