Handoff · 01 of 03

Trace — tokens & type

Everything a Webflow developer needs to restyle hellotrace.io: color variables, type families, sizes, usage rules. Layouts stay put — swap tokens and fonts sitewide. Pairs with 02 — Section Animations & 03 — Layout Spec.

Version · E5

Scope · Colors + Type

Layout · see doc 03

01 — Color

A restrained palette. Warm neutrals, one accent.

Off-white page, near-black ink, one indigo accent for brand moments and links. Positive & negative semantic colors for data (deltas, chart states). Everything else is greys on a warm base.

Background

Warm off-white

#f6f4ef

Primary page background. Replaces pure white.

Background 2

Panel / card

#ecebe5

Secondary surface for cards, code blocks, subtle separation.

Ink — primary

Near-black

#14161a

Headings, primary body, logo wordmark. Never pure black.

Ink 2 — secondary

Graphite

#3a3d43

Body paragraphs, sub-headlines, most reading text.

Muted

Warm grey

#7a7971

Captions, mono eyebrows, metadata, timestamps.

Line

Hairline

#d9d6cc

All borders and dividers. 1px only — never thicker.

Accent

Indigo

#504fe9

Brand accent — the Trace dot, live indicators, pulse.

Accent ink

Indigo ink

#3f3ed1

Italic emphasis on headlines, small eyebrows, links.

Semantic · Positive

Forest

#1a6d3c

Positive deltas, up arrows, positive contribution chips. Chart colour for positive drivers.

Semantic · Negative

Oxide

#c2421f

Negative deltas, down arrows, anomaly flags, churn callouts. Chart colour for negative drivers.

02 — Type families

Three families. Clear roles.

Serif for display moments. Sans for everything that reads as text. Mono for eyebrows, labels, and data. All three free on Google Fonts.

Version · E5

Instrument Serif

Hero H1, section H2s, pull-quotes, italic emphasis. Only for large type (28px+).

Google Fonts · Regular 400 + Italic 400

Version · E5

Geist

Headlines, body, leads, H3/H4, nav, buttons, footer — everything that reads as text.

Google Fonts · 400 · 450 · 500 · 600

Version · E5

Geist Mono

Uppercase eyebrows, data labels, metric values, timestamps, status pills.

Google Fonts · 400 · 500

03 — Type scale & roles

Hierarchy, specified.

Each style has one job. Use the smallest appropriate role — don't invent in-between sizes. All sizes are in px so Webflow can one-to-one them.

H1 — Hero

Display headline

Geist · 500
Italic accent: Instrument Serif

See why your metrics move.

family

Geist

weight

500

size

clamp(52, 6.4vw, 104)px

line-height

1.0

tracking

-0.04em

em color

Instrument Serif italic 400

em accent

Accent ink

H2 — Section

Section title

Geist · 500
Italic accent: Instrument Serif

From variance to velocity.

family

Geist

weight

500

size

clamp(34, 4vw, 56)px

line-height

1.05

tracking

-0.04em

em color

Instrument Serif italic 400

use

all section H2s

H3 — Card / pillar

Card heading

Geist · 500
Italic accent: Instrument Serif

See why your metrics move.

family

Geist

weight

500

size

26px

line-height

1.2

tracking

-0.025em

use

pillars, panel headings

H4 — Inline

Sub heading

Geist · 500

Your metrics are siloed.

family

Geist

weight

500

size

20px

line-height

1.35

tracking

-0.015em

use

list titles, cells

Lead / sub

Lead paragraph

Geist · 500

Trace builds metric trees that decompose KPIs into their drivers, then continuously analyzes them.

family

Geist

weight

500

size

20px

line-height

1.45

tracking

-0.005em

use

hero sub, section leads

Body

Body text

Geist · 400

Your metrics are visible. The causal structure driving them isn't. Every team has their own dashboard, their own definition, their own story.

family

Geist

weight

400

size

16px

line-height

1.5

color

Ink 2 / #3a3d43

use

paragraphs everywhere

Eyebrow / label

Section eyebrow

Geist Mono · 500

The problem

01 — Model

family

Geist Mono

weight

500

size

11px

line-height

0.16em

transform

uppercase

use

section eyebrows, numbered labels

Caption / meta

Meta label

Geist Mono · 400

Causal analytics for operators

Jan 2026 · vs Dec 2025

family

Geist Mono

weight

400

size

11px

line-height

0.14em

transform

uppercase

use

timestamps, footnotes

Number / metric

Metric value

Geist · 500
tabular-nums

$91.2M +$1.1M

family

Geist

weight

500

size

20-34px

line-height

-0.03em

feature

tabular-nums on

use

KPI values, deltas

04 — Webflow integration

Two setup steps. Then restyle.

Add the fonts, define the variables, then point existing text styles and classes at them. No new sections, no layout changes.

Step 1 — Add the fonts

Go to Project Settings → Fonts → Add Google Fonts.
Add Instrument Serif — weights: 400, 400 italic.
Add Geist — weights: 400, 450, 500, 600.
Add Geist Mono — weights: 400, 500.
Save.

Step 2 — Define color variables

Go to Style Panel → Variables → Colors.
Create the colors from section 01 using the exact names & hex values.
Apply them to existing styles (backgrounds, ink, borders) via the picker.

Step 3 — Restyle text classes

For each existing style (Heading 1, Heading 2, Paragraph, etc.), open its selector.
Swap font family and font weight to match section 03.
Update size, line-height, letter-spacing per the spec.
Re-point color to the new variables.

Tip — Italic emphasis

Instrument Serif italic is the signature move. In Webflow, wrap the emphasized word in an inline em span, then set font-style: italic and color: Accent ink on the em selector.

h1 em, h2 em {
font-style: italic;
color: var(--accent-ink);}

Trace · Design handoff · doc 01 of 03

Print or share · see also: section animations · layout spec