Phase 0 · Tokens + components preview

The grammar before the sentences.

Toggle the theme in the topbar — every token below has a value in both light and dark. Memo surfaces are always cream; the activity surface follows the theme.

Typography

Display · serif 36/44

H1 · serif 24/32

H2 · sans 18/26

H3 · sans 15/22

Body memo · serif 15/26. Lead with the lifestyle story; the spec sheet belongs further down the page.

Body UI · sans 14/22. Everything that isn’t memo or deliverable copy.

Meta · sans 12/18 · tokens, timestamps, model badges.

Eyebrow · sans 11 uppercase 0.08em

Colour tokens

surface · page--surface-page

surface · canvas--surface-canvas

surface · raised--surface-raised

surface · memo--surface-memo

surface · activity--surface-activity

accent--accent-primary

accent · soft--accent-soft

signal · positive--signal-positive

signal · attention--signal-attention

signal · risk--signal-risk

Actions

Status + signals

queued running done stalled

Live agent — 6px coral, 1.5s pulse Completed Queued

Facet icons (placeholder)

1 · WHYMarket Intelligence

2 · WHYPrecision Objective Setting

3 · HOWDefining Strategies

4 · HOWTactical Planning

5 · WHATBuild · Execute · Optimize

6 · WHATShip · Measure · Adapt

7 · WHATReview + Evaluate

Memo voice

Strategy memo · draft

A premium audio launch into APAC

Lead with the lifestyle story; the spec sheet belongs further down the page. Tier-1 metros first — Singapore, Tokyo, Sydney — with a channel mix that earns trust before it asks for the sale.

“We have eight weeks and a brand most of the region hasn’t heard of yet.”