attributionDesign system
TokensComponentsreadme.md
Extracted from screenshot · July 2026

Clinical, monochrome, data-first.

Near-black ink on warm off-white. Pill everything. Color is reserved for data — one blue accent, green up, red down.

01 · Color tokens
Ink — text & primary surfaces
--ink-900 #0B0B0C
--ink-800 #1A1A1B
--ink-700 #2E2E30
--ink-600 #404141
--ink-400 #8A8A8B
--ink-300 #A8A8A9
Paper & borders
--paper-0 card
--paper-50 page
--paper-100 section
--paper-150 fill
--border-default #E7E7E6
--border-strong #D9D9D8
Accent blue
700
600
500
100
50
Semantic
pos-600
pos-100
neg-600
neg-100
Night
900
800
02 · Typography
AI attribution for B2B SaaS
--text-display · 600 · 64/1.08 · −0.03em
One platform, end to end.
--text-h2 · 600 · 40/1.15 · −0.02em
Tie every ad dollar to closed-won revenue. Get better ad results by syncing accurate attribution data back to the platforms.
--text-body-md · 400 · 15/1.55
How it works
--text-eyebrow · 500 · 12px · UPPERCASE · +0.14em
$1.84M+24.6% ↑
$1.48M last 30d
--text-metric · 600 · 40px · tabular-nums
One family: SF-style system stack (--ds-font-sans). No webfont ships with the system.
03 · Spacing, radius & elevation
4px base scale
4
8
12
16
24
32
48
64
Sections breathe at 96–128px · container 1180px
Radii · shadows ≤ 4% — borders do the work
sm 8
rows
md 12
inputs
lg 16
cards
xl 24
panels
pill 999
--shadow-card · --shadow-raised · --shadow-overlay · ease-out 120–200ms
04 · Components
Button
onDark — for night surfaces
Badge & Delta
All systems healthyNEWLast 30 daysFirst touchAgent is live
+24.6% ↑−12.8% ↓+31.2% ↑−4.8% ↓
Input — email capture
Focus swaps the border to ink-900
StatCard
Closed-won ARR
$612K+18.2% ↑
$518K last 30d
CAC
$1,420−12.8% ↓
$1,628 last 30d
IntegrationRow
All systems healthy
PPixel1.4M events / 24h
BBilling$182K MRR added
CCRM612 lifecycle updates
Neutral placeholder chips — no third-party logos shipped
ChecklistItem
✓Cookieless, cross-device tracking
✓Server-side events that survive ad blockers
✓tone="positive" for status confirmations
SectionHeading
How it works
One platform, end to end.
From the first ad click to closed-won revenue.
NorthwindCustomer story
How Northwind unlocked accurate paid attribution
D
Dana Reeve
VP Growth
05 · Forms
Checkbox · Radio
Switch · Tabs
DetailsHistorySettings
Pill segmented control (toolbars) · underline tabs (pages)
06 · Overlays & table
Create report
✕

Reports refresh hourly and sync attribution back to your ad platforms.

Toast · Tooltip
✓Report createdSyncing starts within the hour.✕
Multi-touch · last 30 daysLTVnear-black label, 8px radius, above trigger
SourceClosed won
Paid search$196K+31.2% ↑
Email$98K−1.2% ↓
07 · Night CTA panel — the only gradient
Ready to see which ads drive real ARR?
Centered headline, muted subcopy, one white pill. Blue glow anchored to the bottom edge.
Full definition in readme.md · tokens in tokens/ · components in components/