design.md
Back to directory
editorial · research · serif · warm · data

Bureau Data.

A research bureau that publishes data the way a quality newspaper does. Cream-paper surfaces, Source Serif 4 for prose, IBM Plex Sans for UI labels, IBM Plex Mono with tabular-nums for every figure, a single rust accent reserved for footnote daggers and the active data point on charts. Built for data journalism, policy research, think-tanks, and white-papers that need to read as authoritative without ever shouting.

01 · Preview

The kitchen sink.

Bureau.app
ProductPricingDocsAbout
Sign inGet started
editorial · research · serif

Build with Bureau Data.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational
01 · Color

Palette

primary
#1F1C17
secondary
#6E685C
tertiary
#1F1C17
neutral
#ECE4CD
surface
#F5EED7
02 · Typography

Type scale

display
The quick brown fox
h1
A major section heading
h2
A subsection title
body
Body copy in the system's body font.
03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →
Disabled
04 · Inputs

Form controls

Email
iris@studio.com
Password
••••••••••••
Bio
Designing for long-form publications. Based in Kyoto.
05 · Choices

Select & toggle

Plan
Starter
Free forever
Pro
$18 / month
Team
$48 / month
Toggles
Public profile
Require two-factor
Auto-accept invites
06 · Tags & badges

Labeling

NeutralAccentSolidWith dot
NEWBETAv2.0LIVE
07 · Cards

Cards

Feature
Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →
Metric
24,810
▲ +12.4% vs last week
08 · Navigation

Tabs & breadcrumb

Overview
Analytics
Members
Workspace/Projects/Heritage System
09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px
2px
5px
8px · base
10px
12px
14px
16px
18px
20px
21px
10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm
2px
md
3px
lg
4px
pill
9999px
11 · Elevation

Depth & elevation

00 · Flat
Elevation 00
01 · Low
Elevation 01
02 · Medium
Elevation 02
03 · High
Elevation 03
12 · Data

Charts

Weekly revenue
$48,210
M
T
W
T
F
S
S
Active sessions
2,184
02 · Pro tokens

The states behind the resting style.

ArchetypeEditorial

Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
1---
2name: "Bureau Data"
3description: "A research bureau that publishes data the way a quality newspaper does. Cream-paper surfaces, Source Serif 4 for prose, IBM Plex Sans for UI labels, IBM Plex Mono with tabular-nums for every figure, a single rust accent reserved for footnote daggers and the active data point on charts. Built for data journalism, policy research, think-tanks, and white-papers that need to read as authoritative without ever shouting."
4tags: [editorial, research, serif, warm, data]
5colors:
6  primary:   "#1f1c17"
7  secondary: "#6e685c"
8  tertiary:  "#1f1c17"
9  neutral:   "#ece4cd"
10  surface:   "#f5eed7"
11typography:
12  display: "Source Serif 4"
13  body:    "Source Serif 4"
14  mono:    "IBM Plex Mono"
15  scale:
16    hero: "5.5rem / 1.02 / 600 / -0.025em"
17    h1:   "3.25rem / 1.1 / 600 / -0.018em"
18    h2:   "1.75rem / 1.28 / 600 / -0.012em"
19    body: "1.125rem / 1.72 / 400 / -0.003em"
20radius:
21  sm: 2px
22  md: 3px
23  lg: 4px
24  pill: 9999px
25shadows:
26  card:   none
27  button: none
28borders:
29  card:    "1px solid rgba(31,28,23,0.10)"
30  divider: rgba(31,28,23,0.14)
31buttons:
32  primary:
33    background: #1f1c17
34    color: #f5eed7
35    border: none
36    shape: sharp
37    padding: 10px 20px
38    font: 500 / 0.8125rem
39  secondary:
40    background: transparent
41    color: #1f1c17
42    border: 1px solid rgba(31,28,23,0.20)
43    shape: sharp
44    padding: 10px 20px
45    font: 500 / 0.8125rem
46  outline:
47    background: transparent
48    color: #1f1c17
49    border: 1px solid rgba(31,28,23,0.16)
50    shape: sharp
51    padding: 10px 20px
52    font: 500 / 0.8125rem
53  ghost:
54    background: transparent
55    color: #6e685c
56    border: none
57    shape: sharp
58    padding: 10px 14px
59    font: 500 / 0.8125rem
60charts:
61  variant: "thin-bars"
62  stroke_width: 1.25
63  fill_opacity: 0
64  gridlines: true
65  bar_gap: 5px
66  highlight: single
67  dot_marker: true
68fonts_url: "https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Bureau Data
73 
74## AI Build Instructions
75 
76> **Read this section before writing any code.** The rules below
77> are non-negotiable. Every value used in the UI must come from this
78> file's frontmatter — never substitute, approximate, or invent new
79> colors, fonts, radii, or shadows. If a value is missing, ask the
80> user before adding one.
81 
82### 1 · Your role
83 
84You are building UI for a project that has adopted **Bureau Data** as its
85design system. Treat `DESIGN.md` as the single source of truth.
86Your job is to translate the user's product requirements into
87components and pages that look like they were designed by the same
88person who authored this file.
89 
90### 2 · Token compliance
91 
92- Pull every color, font family, radius, shadow, and spacing value
93  from the frontmatter at the top of this file.
94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
95  hard-code hex values that bypass the system.
96- When a token can be expressed as a CSS variable, declare it once
97  in your global stylesheet and reference it everywhere downstream.
98- The Google Fonts `<link>` is provided in the Typography section.
99  Add it to `<head>` before any component renders.
100 
101### 3 · Component recipes
102 
103Use these recipes verbatim when building the corresponding component.
104 
105#### Buttons
106 
107Four variants are defined. Pick one — never blend variants or invent a fifth.
108 
109- **Primary** — sharp shape, bg `#1f1c17`, text `#f5eed7`, padding `10px 20px`, weight `500`.
110- **Secondary** — sharp shape, text `#1f1c17`, border `1px solid rgba(31,28,23,0.20)`, padding `10px 20px`, weight `500`.
111- **Outline** — sharp shape, text `#1f1c17`, border `1px solid rgba(31,28,23,0.16)`, padding `10px 20px`, weight `500`.
112- **Ghost** — sharp shape, text `#6e685c`, padding `10px 14px`, weight `500`.
113 
114Reach for **primary** as the single dominant CTA per screen.
115**Secondary** for the supporting action. **Outline** for tertiary
116actions in toolbars. **Ghost** for inline links and table actions.
117 
118#### Cards
119 
120- Background: `#f5eed7`
121- Border: `1px solid rgba(31,28,23,0.10)`
122- Shadow: `none`
123- Radius: `radius.lg` (`4px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Tabs
127 
128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
129 
130#### Charts
131 
132- Bar/line variant: `thin-bars`
133- Highlight strategy: `single` — emphasize a single bar/point per chart.
134 
135#### Typography pairings
136 
137- **Display (`Source Serif 4`)** — h1, h2, hero headlines, brand wordmarks.
138- **Body (`Source Serif 4`)** — paragraphs, labels, button text, form inputs.
139- **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables.
140 
141### 4 · Hard constraints
142 
143Never do any of the following without explicit instruction from the user:
144 
145- Introduce a new color, font, radius, or shadow that isn't declared above.
146- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
147- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
148- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
149- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
150 
151### 5 · Before you finish — verify
152 
153Run through this checklist for every screen you produce:
154 
155- [ ] Every color used appears in the Colors table above.
156- [ ] Headlines use the display font; body copy uses the body font.
157- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
158- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
159- [ ] Cards and dividers use the declared border + shadow tokens.
160- [ ] No values were invented; if you needed something missing, you stopped and asked.
161 
162---
163 
164## 1. Atmosphere
165 
166Bureau Data publishes research the way a quality newspaper does. The page surface is cream paper `#f5eed7` — the warm tone of a good white paper, never bright. Headlines run in Source Serif 4 at 88px, weight 600, with a tight optical-size variant — text-grade serif that reads as authoritative reporting, not display drama. Body sits in Source Serif 4 at 18px on a 1.72 leading — long-form readable. UI labels switch to IBM Plex Sans for a clean sans counterpoint. Every percentage, count, year, dataset value runs in IBM Plex Mono with tabular-nums — column-aligned to the cell. The single accent is rust `#9c3a1a` that appears only on footnote daggers, the active data point in chart hovers, and the highlighted figure in a sentence — the marks that say "look here, this is the finding."
167 
168The discipline is in the readability: Source Serif at long-form sizes, generous leading, and the rust used as a single editorial pen-mark per page.
169 
170**Signature moves**
171- Source Serif 4 600 at 88px for headlines — text-grade authority, not display drama
172- 18px body on 1.72 leading — long-form readable, white-paper voice
173- Cream paper surface `#f5eed7` — warm white-paper, never bright
174- Rust `#9c3a1a` exclusively on footnote daggers + active chart point + highlighted figure
175- IBM Plex Mono with tabular-nums on every percentage, count, year, dataset value
176- Sharp 2-4px radius — the printed-page voice, never pill
177 
178## 2. Palette
179 
180### Surfaces
181- **Cream Paper** `#f5eed7` — page background (warm white-paper)
182- **Cream Lift** `#ece4cd` — secondary surfaces, table headers, sidebar
183- **Hairline** `rgba(31,28,23,0.14)` — every divider
184 
185### Ink
186- **Ink** `#1f1c17` — text, headings, primary CTA fill (warm near-black)
187- **Ink 50** `#6e685c` — secondary text, mono labels, captions
188 
189### Accent
190- **Rust** `#9c3a1a` — footnote daggers, active chart hover point, highlighted figure
191- **Rust Soft** `rgba(156,58,26,0.10)` — chart fill on hovered bar, focus ring
192 
193## 3. Typography
194 
195| Role | Font | Size | Weight | Leading | Tracking |
196|------|------|------|--------|---------|----------|
197| Headline (Hero) | Source Serif 4 | 88px | 600 | 1.02 | -0.025em |
198| H1 | Source Serif 4 | 52px | 600 | 1.1 | -0.018em |
199| H2 | Source Serif 4 | 28px | 600 | 1.28 | -0.012em |
200| Pull Quote | Source Serif 4 (italic) | 24px | 400 | 1.45 | -0.008em |
201| Body | Source Serif 4 | 18px | 400 | 1.72 | -0.003em |
202| UI / Button | IBM Plex Sans | 13px | 500 | 1.4 | 0 |
203| Figure / Percentage | IBM Plex Mono | 14px | 500 | 1.0 | 0 tabular-nums |
204| Dataset Value | IBM Plex Mono | 13px | 500 | 1.0 | 0 tabular-nums |
205| Footnote / Caption | IBM Plex Mono | 11px | 500 | 1.0 | 0.06em uppercase |
206 
207Source Serif 4 carries everything that is prose; IBM Plex Sans carries everything that is UI; IBM Plex Mono carries everything that is data. The three roles never overlap.
208 
209## 4. Buttons
210 
211### Primary (Ink Sharp)
212```css
213background: #1f1c17;
214color: #f5eed7;
215padding: 10px 20px;
216border-radius: 3px;
217font-weight: 500;
218```
219 
220Sharp 3px corners read as a printed download tag, not a web button.
221 
222### Secondary (Outline)
223- Transparent, 1px hairline at 20% ink, ink text — same sharp shape
224 
225### Outline & Ghost
226- Outline: transparent, 1px hairline at 16% ink
227- Ghost: no border, ink-50, hover underlines
228 
229## 5. Cards
230 
231```css
232background: #f5eed7;
233border: 1px solid rgba(31,28,23,0.10);
234border-radius: 4px;
235box-shadow: none;
236```
237 
238NO shadows. Datapoint cards lift to cream-lift surface with a 1px ink top border (3px wide) — the only chrome.
239 
240## 6. Charts
241 
242Thin precise bars (4px wide, 5px gap) with dashed gridlines at 14% ink — used for time-series and ranking charts. One bar in rust (the highlighted finding), others in 22% ink. Line charts at 1.25px ink, ending in a rust dot marker. Y-axis labels in IBM Plex Mono uppercase 11px aligned to the right. The chart-source citation runs below in Plex Mono italic — every chart cites its source.
243 
244## 7. Tabs
245 
246Underline 1.5px in ink for the active state. Inactive tabs are ink-50 in IBM Plex Sans 500. Hover lifts to ink. Tabs sit on a 1px hairline baseline.
247 
248## 8. Spacing
249 
250- Base 8px (text-baseline aware)
251- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 160`
252- Section padding: 128px desktop, 64px mobile — long-form rhythm
253 
254## 9. Do's & don'ts
255 
256✅ **Do**
257- Use Source Serif 4 600 for headlines — text-grade serif at scale, not display drama
258- Hold the cream paper surface — bright white reads as web app, beige reads as old textbook
259- Reserve rust for footnote daggers + active chart point + highlighted figure exclusively
260- Put every percentage, count, year, dataset value in IBM Plex Mono with tabular-nums
261- Cite every chart source in Plex Mono italic below the chart
262 
263❌ **Don't**
264- Use Source Serif 4 for UI labels — Plex Sans handles UI, Plex Mono handles data
265- Use rust for buttons, accents, or large surfaces — three editorial surfaces only
266- Use 16px body — 18px on 1.72 leading is the white-paper readability minimum
267- Use uppercase tracking on the primary CTA — this is reporting, not a brass plate
268 
269---
270 
271## Tokens
272 
273> Generated from the same source the live preview renders from.
274> Treat the values below as the contract — never substitute approximations.
275 
276### Colors
277 
278| Role      | Value |
279|-----------|-------|
280| primary   | `#1f1c17` |
281| secondary | `#6e685c` |
282| tertiary  | `#1f1c17` |
283| neutral   | `#ece4cd` |
284| surface   | `#f5eed7` |
285 
286### Typography
287 
288- **Display:** Source Serif 4
289- **Body:** Source Serif 4
290- **Mono:** IBM Plex Mono
291 
292| Role | size / leading / weight / tracking |
293|------|------------------------------------|
294| Hero | 5.5rem / 1.02 / 600 / -0.025em |
295| H1   | 3.25rem / 1.1 / 600 / -0.018em |
296| H2   | 1.75rem / 1.28 / 600 / -0.012em |
297| Body | 1.125rem / 1.72 / 400 / -0.003em |
298 
299### Radius
300 
301- sm: `2px`
302- md: `3px`
303- lg: `4px`
304- pill: `9999px`
305 
306### Shadows
307 
308- **card:** `none`
309- **button:** `none`
310 
311### Borders
312 
313- **card:** `1px solid rgba(31,28,23,0.10)`
314- **divider:** `rgba(31,28,23,0.14)`
315 
316### Buttons
317 
318Four variants, each fully tokenized. The preview renders from these exact values.
319 
320#### Primary
321 
322| Property | Value |
323|----------|-------|
324| shape | `sharp` |
325| background | `#1f1c17` |
326| color | `#f5eed7` |
327| border | `none` |
328| padding | `10px 20px` |
329| fontWeight | `500` |
330| fontSize | `0.8125rem` |
331 
332#### Secondary
333 
334| Property | Value |
335|----------|-------|
336| shape | `sharp` |
337| background | `transparent` |
338| color | `#1f1c17` |
339| border | `1px solid rgba(31,28,23,0.20)` |
340| padding | `10px 20px` |
341| fontWeight | `500` |
342| fontSize | `0.8125rem` |
343 
344#### Outline
345 
346| Property | Value |
347|----------|-------|
348| shape | `sharp` |
349| background | `transparent` |
350| color | `#1f1c17` |
351| border | `1px solid rgba(31,28,23,0.16)` |
352| padding | `10px 20px` |
353| fontWeight | `500` |
354| fontSize | `0.8125rem` |
355 
356#### Ghost
357 
358| Property | Value |
359|----------|-------|
360| shape | `sharp` |
361| background | `transparent` |
362| color | `#6e685c` |
363| border | `none` |
364| padding | `10px 14px` |
365| fontWeight | `500` |
366| fontSize | `0.8125rem` |
367 
368### Charts
369 
370| Property | Value |
371|----------|-------|
372| variant | `thin-bars` |
373| strokeWidth | `1.25` |
374| fillOpacity | `0` |
375| gridlines | `true` |
376| barGap | `5px` |
377| highlight | `single` |
378| dotMarker | `true` |
379 
380---
381 
382## Pro tokens
383 
384> Production-fidelity tokens. States, density, motion, elevation,
385> content rules and a measured WCAG contract — derived from the
386> resting tokens unless explicitly authored.
387 
388### States
389 
390#### Button
391 
392- **hover** — bg: `rgba(31, 28, 23, 0.92)`, shadow: `0 4px 20px -8px rgba(31, 28, 23, 0.4)`
393- **focus** — outline: `1.5px solid #1f1c17`, outline-offset: `4px`
394- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
395- **disabled** — opacity: `0.45`
396- **loading** — opacity: `0.7`
397- **selected** — bg: `#1f1c17`, color: `#f5eed7`
398 
399#### Input
400 
401- **hover** — border: `1px solid #1f1c17`
402- **focus** — border: `1px solid #1f1c17`, shadow: `0 1px 0 0 #1f1c17`
403- **disabled** — opacity: `0.45`
404- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
405 
406#### Card
407 
408- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
409- **selected** — border: `1px solid #1f1c17`
410 
411#### Tab
412 
413- **hover** — color: `#1f1c17`
414- **focus** — outline: `1.5px solid #1f1c17`, outline-offset: `3px`
415- **selected** — color: `#1f1c17`, border: `0 0 2px 0 solid #1f1c17`
416 
417### Density
418 
419| Mode | padding × | row × | body | radius × | Use for |
420|------|-----------|-------|------|----------|---------|
421| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
422| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
423| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
424 
425### Motion
426 
427**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
428 
429```css
430transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
431```
432 
433| Token | Value |
434|-------|-------|
435| duration.instant | `80ms` |
436| duration.fast | `180ms` |
437| duration.base | `320ms` |
438| duration.slow | `500ms` |
439| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
440| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
441| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
442| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
443 
444### Elevation
445 
446Five-level scale, system-specific recipe.
447 
448| Level | Shadow | Recipe |
449|-------|--------|--------|
450| level0 | `none` | Hairline only — typical editorial resting state. |
451| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
452| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
453| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
454| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
455 
456### Content
457 
458- **measure:** `60ch` (max line length for body prose)
459- **paragraph spacing:** `1.5em`
460- **list indent:** `1.75em`
461- **list gap:** `0.55em`
462- **link:** color `#1f1c17`, underline `always`
463- **blockquote:** border `4px solid #1f1c17`, padding `0.4em 0 0.4em 1.5em`
464- **code:** background `rgba(31, 28, 23, 0.06)`, color `#1f1c17`
465 
466### Accessibility (WCAG 2.1)
467 
468**Overall:** AA
469 
470| Pair | Ratio | Required | Grade | Suggested fix |
471|------|-------|----------|-------|---------------|
472| Body text on surface | 14.63:1 | AA | AAA | — |
473| Body text on canvas | 13.38:1 | AA | AAA | — |
474| Muted text on surface | 4.76:1 | AA | AA | — |
475| Accent on surface | 14.63:1 | AA-Large | AAA | — |
476| Accent on canvas | 13.38:1 | AA-Large | AAA | — |
477
04 · How to use it

Wire it into your agent.

markdown
# CLAUDE.md
 
Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.
05 · Required setup

Three snippets.

Google Fonts link

html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Source Serif 4"', 'serif'],
        sans:    ['"Source Serif 4"', 'sans-serif'],
        mono:    ['"IBM Plex Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1f1c17',
        secondary: '#6e685c',
        accent:    '#1f1c17',
        neutral:   '#ece4cd',
        surface:   '#f5eed7',
      },
      borderRadius: {
        sm: '2px',
        md: '3px',
        lg: '4px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Dawn Gradient

Minimal canvas with a single restrained gesture — a deep indigo-to-steel gradient on the primary CTA and one accent word. Everything else is whitespace and quiet type.

minimallightpremiumsaasmodern
Dawn.app
ProductPricingDocsAbout
Sign inGet started
minimal · light · premium

Build with Dawn Gradient.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational

Statute Press

A government document made beautiful. Source Serif 4 hero, 3px black borders that read as legal-page rules, IBM Plex Mono for clause numbers and timestamps, a single mustard-stamp accent that lives only on the approval seal and the active filing tab. Built for legal tech, civic, and document-heavy products.

brutalisteditoriallegalpremiummodern
Statute.app
ProductPricingDocsAbout
Sign inGet started
brutalist · editorial · legal

Build with Statute Press.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational