A 71Labs product
A design system your coding agent can actually follow.
71UI is one design.md file: tokens, rules and ten category playbooks for Claude Code, Codex and Cursor. Every page in this studio was planned, built and checked by following it.
One file · Ten playbooks · Lints clean
One brief, ten playbooks
Plan the quarter in one place.
Meridian turns scattered roadmaps into one schedule your whole team can edit, with an owner, a date and a status on every line.
- Billing v2Ana · Oct 14On track
- Mobile betaKenji · Nov 3At risk
- SOC 2 auditPriya · Dec 1Done
- Tasks shipped
- 128
- Teams
- 14
- Avg. cycle
- 4.8days
Playbook A
SaaS website
Confident, friendly, product-led
- Theme
- Light
- Display
- Geist 400
- Text
- Inter
- Radius
- Friendly · 12 / 24 / 32px
- Primary
- #2F63E85.16:1
<section data-playbook="a">
One brief, ten playbooks: the markup and copy never change, only the attribute.
design.md · lint report
One file, and it lints clean.
Google’s DESIGN.md linter parses it on every build of this site: 0 errors, 0 warnings, 39 component specs.
- Lines in one Markdown file
- 2,123
- Color tokens, contrast-checked
- 26
- Type styles on one scale
- 18
- Category playbooks, A–J
- 10
The works
Nine products, none of them real.
Each work follows one playbook to the letter: its token plan, its single loud idea and its checklist. The brands are fictional; the rules and the ratios are not.
Playbook C · Crypto, DeFi & Web3
Ledgerline
Onchain treasury vaults with the risk shown up front.
Loud idea: Warm gradient frame around a white sheet
- The warm gradient lives only in the frame around the page; no text ever sits on it.
- Serif display (Newsreader) with square black buttons is C1's quiet system; the frame is the one loud idea.
- APYs always carry a window ("7-day avg") and changes repeat the sign as well as the color.
Playbook B · AI & agent products
Mainspring
The scheduler that keeps autonomous agents on time and in context.
Loud idea: Frame rails and crosshairs
- The loud idea is the frame: 1px rails and crosshair glints. The hero stays a still radial glow, so the page spends no ambient-loop budget.
- Section titles are two-tone (white, then warm gray) — a quiet system device, not a second loud idea.
- Qronos ships #757168 secondary text (4.30:1); Mainspring uses #8A857B (5.42:1).
Playbook I · Enterprise editorial
Folio
Document intelligence for insurance underwriting.
Loud idea: Brightness-ramp closing headline
- A light serif at 300 is the stated display exception; UI text is Geist.
- Key phrases in the hero lede are emphasized by brightness (100% vs 60%), not weight.
- The closing headline ramps 40% → 70% → 100% white; 40% measures 3.54:1 at 48px.
The index
Six more, each from its own playbook.
A · SaaSTessera
Client portals built from the spreadsheets you already run.
D · FintechHarbor
Send money across borders at the rate you actually see.
E · PortfolioMara Okafor
Portfolio of a product designer who makes complex tools feel obvious.
F · DashboardKeel
A revenue operations console — the integration settings screen.
H · Deep techAster Bio
Engineering cellular resilience against age-related disease.
J · Dev toolstern
A typed job queue for Postgres.
The method
Brief to review, from one file.
The four steps in design.md’s Agent Protocol. Any coding agent can run them, and every work here did.
- 01
Brief
One line each for the subject, the audience, the one job, the proof and the loud idea.
Job: open the app and compare vaults.
- 02
Token plan
Colors with roles and measured contrast, the type pair, a radius personality and a motion profile, all before any code.
ink-subtle #5E5E5E · 6.48:1
- 03
Build
Sizes and states come from the component specs, and the copy uses the product’s own words.
button 32px · radius 10px · label 13/16
- 04
Review
The 24-item Pre-Ship Checklist runs against the page, and each item is reported as passed, failed or not verified.
No transition: all · focus visible · 24px targets
Measured, not guessed
Every reference fails AA somewhere.
Usually in the second-tier text. The works keep each reference’s look and fix the number, and every ratio below is computed when the site builds.
| Reference | Shipped | In the work | Floor | Work |
|---|---|---|---|---|
| QronosSecondary text on black | 4.30:1Fails#757168 | 5.69:1Passes#8A857B | 4.5:1 | Mainspring |
| SaasCNBody text on gray tiles | 4.35:1Fails#737373 | 4.89:1Passes#6B6B6B | 4.5:1 | Tessera |
| StackerWhite label on the signal blue | 4.19:1Fails#FFFFFF | 5.16:1Passes#FFFFFF | 4.5:1 | Tessera |
| Banking bentoWhite text on the blue tile | 2.78:1Fails#FFFFFF | 6.34:1Passes#FFFFFF | 4.5:1 | Harbor |
| Integrated BioDimmed headline tail, large text | 1.53:1Fails#C9CBBE | 3.16:1Passes#8A8D7E | 3.0:1 | Aster Bio |
| V7 LabsMuted labels | 2.88:1Fails#939291 | 5.31:1Passes#676664 | 4.5:1 | Folio |
| Apps cheatsheetBadge text on its green fill | 2.47:1Fails#15B042 | 4.70:1Passes#0E7A2F | 4.5:1 | Keel |
Install
Put it next to your code.
Save design.md at the root of your repo, then ask for a page. Your agent reads the Agent Protocol first and loads only what the job needs.