Product.ai — Typography Guidelines

The Two Voices

Product.ai has exactly two typographic voices — no more. DM Sans is the Human Voice: warm, approachable, narrative-driven. DM Mono is the Machine Voice: precise, technical, traceable. Sans speaks narrative. Mono speaks evidence. Crossing voices is a violation.

The Voice Boundary

DM Sans — The Human Voice

Marketing headlines, body copy, UI labels, navigation, explanations, the Product.ai wordmark ("Product"). Never use for data tables, verification IDs, timestamps, or code.

DM Mono — The Machine Voice

Verification data, timestamps, IDs, code snippets, system status, proof outputs, the Product.ai wordmark suffix (".ai"). Never use for long-form narrative, marketing copy, or UI explanations.

Human Voice

DM Sans

400 Regular 500 Medium 600 Semibold

Headlines, body copy, UI labels, marketing copy, explanations

Warm, approachable, narrative-driven

Machine Voice

DM Mono

400 Regular 500 Medium

Technical data, code snippets, timestamps, verification IDs, proof outputs, system messages

Precise, technical, traceable

DM Sans

DM Mono

Alphabet

Aa Bb Cc Gg Rr

Numbers

0123456789

Sample

Product.ai

Hierarchy & Scale

A carefully considered type scale that creates clear visual hierarchy while maintaining readability across all contexts.

Display

64px (4rem)

LH: 72px / LS: -0.04em

Stop Searching.

Title

48px (2.986rem)

LH: 56px / LS: -0.02em

Infrastructure, Not Hallucination

Subtitle

40px (2.488rem)

LH: 48px / LS: -0.02em

The ARC Protocol

Heading

33px (2.074rem)

LH: 40px / LS: -0.01em

Verified Savings Report

Subheading

28px (1.728rem)

LH: 32px / LS: 0

Technical Specifications

Body Large

19px (1.2rem)

LH: 28px / LS: 0

The web is drowning in AI slop. We built something different.

Body

16px (1rem)

LH: 24px / LS: 0

Standard body copy for editorial reading — blog articles, research, and long-form content.

Body UI

16px (1rem)

LH: 20px / LS: 0

Buttons, inputs, data tables, navigation — all UI elements use this tighter line-height.

Small

13px (0.833rem)

LH: 16px / LS: 0

Secondary information, captions, and supporting details.

Label

11px (0.694rem)

LH: 16px / LS: 0.125em

VERIFIED • EXPIRES DEC 2025

Mono Data

13px (0.833rem)

LH: 16px / LS: 0.125em

STATUS: VERIFIED | CONFIDENCE: 0.92

Marketing Context

Landing pages · Feature showcases · Vision

Default reading size

Body Large — 19px / 28px

Scale pattern

Display / Title for headlines → Body Large for reading copy → Body for secondary text

Tone

Aspirational, narrative, evocative. Headlines make a statement. "Stop Searching."

Gradient headline

Hero headlines ONLY. Direction: 180deg. Start: white. End: zinc-400 (#9CA3AF). Applied via background-clip: text. Never used in Editorial or UI context.

Editorial Context

Blog · Research · Case studies · Documentation

Default reading size

Body — 16px / 24px

Scale pattern

Title / Heading for headlines → Body as the default → Small for captions and supporting details

Tone

Informative, evidence-supported. Paragraphs carry weight. Headlines describe — they don't sell.

Key constraints

No gradient headlines. DM Mono only for inline code, data snippets, or scan IDs — never for running prose or article headers.

UI Context

Buttons · Tables · Verdict cards · Nav · Scores

Default text size

Body UI — 16px / 20px

Scale pattern

Body UI for general text → Small / Label for density → Mono Data for machine values only

Tone

Functional, data-driven, scannable. Claims must be verifiable. Numbers and data are first-class content.

Voice split within UI

DM Mono: data values, scores, IDs, timestamps, system status.
DM Sans: section labels, button text, navigation, UI header copy — even inside a UI element.
No gradient text. Headlines use solid white or zinc-300 only.

Context Decision Framework

Choosing the right context is mandatory — it determines scale, tone, voice distribution, and whether gradient headlines apply. When in doubt, ask: is this carrying data, or carrying meaning?

What Qualifies as UI Context

Apply UI context to any component that meets at least one of the following criteria.

01

Simulates a UI surface

Chat interfaces, terminal windows, dashboard panels, browser chrome mockups — anything that looks like actual product UI.

02

Primary content is a discrete measured value

Metrics, scores, counts, percentages, statuses, or any value that can be falsified. If you can put a unit on it, it's UI context.

03

Displays the product's output

Verdict cards, comparison results, truth graph data, scan summaries — anything showing what the product computed or verified.

04

Contains a data table

All tables use UI context regardless of the surrounding page context. Even a table on a marketing page uses Body UI, Small, and DM Mono for values.

05

Is an interactive widget

Search bars, form inputs, toggles, navigation menus, dropdowns, tooltips — any element the user acts on. Interaction implies UI context.

Marketing Card vs. UI Card

When a component could plausibly live in either context, run it through these four questions in order. The first "yes" determines the context.

Q1

Is it simulating a UI surface?

Yes → UI context

Q2

Is the primary content a discrete, measured value?

Yes → UI context

Q3

Is this the product's output — or is it framing the product?

Output → UI · Framing → Marketing

Q4

Does it need to be read, or can it be scanned?

Scan → UI · Read → Marketing

The Rule

UI cards carry information. Marketing cards carry meaning. A card showing a 94/100 Deal Score is UI context even if it lives on a marketing page — the score is the product's output and must be treated as data, not decoration.

When to Use Each Voice

The two voices work in harmony, each with a clear purpose. Sans tells the story; Mono shows the evidence.

Use DM Sans For

Marketing headlines and taglines
Product descriptions
User-facing explanations
Navigation and UI labels
Educational content

"The story we tell"

Use DM Mono For

Verification data and proof outputs
Timestamps and IDs
Code examples and technical logs
Data tables and structured info
System status messages

"The evidence we show"

Verified Savings Report

Clear verdicts, with proof you can audit.

STORE Adidas

SCAN_ID SCN-2025-12-23-0802-PST

STATUS VERIFIED

BEST_CODE WINTER25

SAVINGS $24.80

Do's and Don'ts

Typography should clarify, not complicate. These guidelines help maintain the precision that defines Product.ai.

✓ Do — DM Sans + DM Mono Pairing

Revenue

$2.4M

↑ 12% from last quarter

DM Mono for data values · DM Sans for supporting narrative

✗ Don't — DM Mono for Narrative

Product.ai helps teams make decisions with real evidence — not gut instinct. Every insight we surface is traceable, every verdict is explainable.

Monospace for narrative breaks readability — use DM Sans for prose

✓ Do — Gradient in Marketing Hero

Intelligence
you can trust.

Gradient headlines: white → zinc-400, 180°, Marketing context only

✗ Don't — Gradient in UI Context

Confidence Score

97.4

Gradient in UI context undermines data clarity — use solid zinc-white

✓ Do — Regular Weight (400)

Clarity at every scale

Regular weight maintains measured precision across all brand contexts.

400 weight for all DM Sans brand expression — composure over force

✗ Don't — Bold Weight (700)

Clarity at every scale

Bold weight makes text compete for attention — off-brand for Product.ai.

700 weight is too heavy for the brand voice — violates scale lock

✓ Do

✓

Apply the correct context register — Marketing for aspiration, Editorial for long-form reading, UI for data and functional elements

✓

Use proper hierarchy with clear size jumps between levels — only the 11 defined scale steps are permitted

✓

Pair DM Sans for narrative + DM Mono for data in the same layout. Within UI context, DM Sans still handles section labels, button text, and navigation — DM Mono handles data values, scores, IDs, and timestamps only

✓

Treat scale levels as locked units — weight, line-height, and letter-spacing are defined per level and are not independently adjustable

✓

Use gradient text only in Marketing hero headlines: 180deg, white → zinc-400, applied via background-clip: text

✓

Always apply feature settings: DM Sans uses "ss02" 1, "liga" 0, "clig" 0; DM Mono uses "ss03" 1, "ss05" 1 — applied to all elements, no exceptions

✗ Don't

✗

Use DM Mono for narrative text, marketing copy, UI explanations, or section labels — and never use DM Sans for data tables, verification IDs, timestamps, or code. Crossing voices breaks the system

✗

Adjust weight, line-height, or letter-spacing independently from the scale spec — these are locked per level and must be applied as defined

✗

Use gradient text in Editorial or UI contexts — gradient headlines are Marketing-only. UI element headlines use solid white or zinc-300

✗

Introduce type sizes outside the 11-step scale — use only the defined levels, no ad hoc font sizes

✗

Apply UI context to marketing copy or Marketing context to a card showing product output — when a card shows a score, metric, or verdict, it is always UI context regardless of its surrounding page

✗

Use all-caps for body copy — all-caps is reserved for Label scale UI elements only (11px / 0.125em letter-spacing)