Lemma system · Components

01

Palette

One primary hue. Click a swatch to copy its hex.

Indigo-tinted grays · the ones text actually uses

State

Correct · Admiral at 65%Secondary text picks up the page underneath it.

Close, wrong · #6C6991 flatSecondary text picks up the page underneath it.

02

Type

Eight roles, no others. Headings sit at 400 on web. Uppercase belongs to mono.

DisplayShip it.64 / 100% / 500 / −2%

H1Stop guessing why.48 / 110% / 400 / −1%

H2Get notified on what matters.32 / 120% / 400 / −1%

H3Fix it where you work.24 / 115% / 400 / −1%

Body LMost runs are fine. The ones that are not look fine too.18 / 130% / 400 / +0.02em

Body MReplays run against the last good build before you ship.16 / 130% / 400 / +0.02em

Body SGrouped by root cause, not by run.14 / 130% / 400 / +0.02em

LabelLive alerts · Trusted by teamsPLEX MONO 12 / +0.10–0.15em

Tracking ladder

Face roles

Britti Sans for all prose and headings. It is licensed, so this page falls back to Arial, the same fallback the production site declares.

IBM Plex Mono only on button labels, eyebrows, machine IDs like RUN-02F, and status words.

03

Shape and depth

Radius is zero. There are no shadows. Depth comes from rules and three flat surface steps.

Every corner

Page#F2F2F2

Interactive#E8E8E8 → #E0E0E0

Card, popover#FFFFFF

1px #D4D4DD · lineSections

1px #E6E6EF · hairlineRows

1px #F3F3FC · softReceding

0.5px #755CFE · plateFigures

04

Buttons

One recipe, two variants. Hover the live row; the other rows hold each state still.

LiveHoverFocusDisabled Primary Secondary Sizes

Primary hover fades a 135° gradient layer in over 300ms. It is one of the only two gradients in the system.

05

Rows and inputs

The list row is the answer to a card grid. Same surface pair as the secondary button.

Founding design engineerSan Francisco · Full-time Research engineer, evalsRemote · Full-time Solutions engineerNew York · Full-time

06

State

Color is a state channel. Border at 40%, fill at 8%, text at full strength.

RegressionInvestigatingResolvedExpected

Refund tool called without order_id in 38 runs since v41.

Replaying 38 runs against v40.

All 38 runs pass on v40. The schema change is the cause.

07

Plates

Figures numbered like a paper. Each one must encode something real. Click a caption to redraw.

COR. 7.1

Damped harmonograph. Each loop is one replay pass; the radius is the remaining error.

COR. 7.2

Lens field. Runs bend toward the one change that explains them.

Tab variant, no label. Twelve rings for twelve covered intents.

08

Trace field

Failures are a small colored minority in a large neutral field. Click a block to flag or clear it.

09

Long-form

72ch measure, 18px at 1.6. Backticks and curly quotes stripped, blockquotes upright.

A regression in an agent rarely looks like an error. It looks like a confident answer.

When order_id became optional in the refund schema, nothing threw. The model kept calling the tool, the tool kept returning 400, and the reply said the refund was on its way. Read how replay caught it.

The failure you did not know to look for is the one that ships.

Group by root cause, not by run.
Replay against the last good build.
Alert on new regressions only.

10

Motion

150ms ease-out for every state change, 300ms for overlays, one shine sweep. Nothing bounces.

Fast · 150ms ease-out

Medium · 300ms overlay

Shine · 0.9s, hover onceEvery release, documented.

11

Contrast

Measured on the #F2F2F2 page, so nobody has to guess.

Foreground	Sample	Ratio	Use
#1D1956 Admiral	Body text	14.15:1	Everything
#5D4EE7 Purple deep	Links	5.06:1	Body links, AA
#6C6991 Muted	Captions	4.61:1	Captions, eyebrows, AA
#755CFE Lady Blue	Plate stroke	3.98:1	Large text and UI edges only
#EE5557 Regression	Regression	3.09:1	Large text and UI edges only
#A1A0B8 Tint 400	RUN-02F	2.28:1	Inert IDs, never alone