02 · Tokens·Three-tiered System

The contract
everything renders against.

1,184 tokens organized in three tiers. Every color, every space, every curve in the system flows from this contract — and re-themes when it changes.

Primitives: 268
Semantic: 122
Component: 794

All 1,184 tokens are typed. Zero hex codes ship in the components package.

Tier 01 · Primitive268

Raw values. Never referenced directly by components.

--color-violet-500

oklch(54% 0.18 274)

Tier 02 · Semantic122

Roles. The contract every theme must satisfy.

--color-interactive-primary

→ violet-500 (light) · violet-400 (dark)

Tier 03 · Component794

Surfaces. The shape components consume.

--color-button-primary-bg

→ interactive-primary

Renders →Toggle theme — every reference resolves through the same chain.

01 · Color

OKLCH means the ramp is the math.

Every brand step is one perceptual lightness apart. Mix safely, lighten without muddying, and stay AA-compliant by default.

WCAG 2.2 AA · verified

Acquisition · Q3 2026+18.4%

Cohort retention

100%75%50%25%0%

Wk 7 · 1,284

W1W2W3W4W5W6W7W8W9W10W11W12

violet · 700

Direct

42% of new users

violet · 500

Referral

28% of new users

violet · 300

21% of new users

violet · 100

Social

9% of new users

brand ramp · violet

L · 0.18C · 274h

5098% L1.04 : 1

10094% L1.18 : 1

30080% L2.10 : 1

50054% L · brandAA · 4.91

70038% LAAA · 8.4

90022% L14.2 : 1

semantic states

Deployment succeeded

--color-success · 60% L · 155h

Quota approaching limit

--color-warning · 72% L · 75h

Build failed · 2 errors

--color-destructive · 58% L · 25h

02 · Typography

A pairing that ships long-form, dashboards, and code.

Besley for editorial moments. Manrope for everything else. JetBrains Mono for code and labels. Eight sizes, four weights, three families.

Wylie Dog Field Notes·Issue 14

8 min read

Engineering · April 2026

Why we rebuilt the entire color system in a week.

Ten months of hex codes, three product redesigns, and one paint-bucket migration later — here is what an OKLCH-native token system actually buys you.

Elena Mori

Lead, Design Systems · 10 May 2026

Engineering

Every design system eventually hits the same wall: your color ramp made sense when it was just a handful of HEX values, but somewhere between the third palette expansion and the dark mode sprint, the math stopped working.

OKLCH fixes this because perceptual lightness is a first-class axis. When you step from oklch(54% 0.18 274) to oklch(38% 0.16 274), the difference is predictable — not a guess.

03 · Spacing

One scale. Three densities. Same data.

The 4-pixel base scale powers every gap, padding, and inset in the system. Switch density on this real members table — every gutter, row height, and avatar size re-resolves through the same tokens.

Team members

14 active · 3 invited

Akira Brennan

akira@compound.co

Adminjust nowactive

Leila Garza

leila@compound.co

Editor2h agoactive

Tom Parker

tom@compound.co

Viewer4d agoinvited

Sasha Chen

sasha@compound.co

Editor1w agoactive

Min-jun Kim

min@compound.co

Viewer3w agoinactive

--space-row-y: 14px--space-gap: 12px--space-avatar: 32px

Scale · 4px base

4px

8px

12px

16px · in use

20px

24px

32px

40px

48px

Composed tokens

--space-card-padding: 24px

--space-input-x: 12px

--space-stack-sm: 8px

04 · Radius

Five corners. Every surface already knows which.

Radius isn't a design decision at use-time — it's encoded in the token. Every component surface resolves to its semantic radius automatically.

xs2px

DesignSystemsOKLCH

Tags & chips

--radius-xs

sm6px

Buttons & inputs

--radius-sm

md10px

Edit

Duplicate

Five shadow steps — one stacking story.

Each step encodes both a shadow value and a semantic z-axis role. The scene below reflects honest stacking order.

xs · base

packages/ui

Button.tsx

md · popover

View changelog

Copy token

Open in Figma

lg · toast

Tokens published · v1.4.1

xl · modal

Invite teammate

name@company.com

Elevation ladder

xs · base

Cards, panels

--shadow-xs

sm · raised

Raised elements

--shadow-sm

md · popover

Menus, popovers

--shadow-md

lg · toast

Toasts, drawers

--shadow-lg

xl · modal

Modals, spotlights

--shadow-xl

Dark mode: shadows are replaced with border + background-lift. Same tokens, different rendering.

06 · Motion

Four curves and three durations cover everything.

Standard for persistent UI, emphasized for key moments, decelerate for entrances, accelerate for exits. Pick a duration from the scale — the curve does the rest.

Live preview

New PR ready to review

feat/token-refresh · 3 files changed

animation: tile-rise 320ms cubic-bezier(0.2, 0, 0, 1)

Ready to wire tokens into your codebase?

Install the package or pull tokens straight into Figma with Token Bridge — both consume the exact same contract you saw on this page.