design.md
Back to directory
brutalist · editorial · legal · premium · modern

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.

01 · Preview

The kitchen sink.

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
01 · Color

Palette

primary
#0D0D0D
secondary
#5D5D5D
tertiary
#0D0D0D
neutral
#ECE6D4
surface
#F5EFDE
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
0px
md
0px
lg
0px
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.

ArchetypeBrutalist

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
Account
sam@studio.com
dragging

Tab

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

DESIGN.md

markdown
1---
2name: "Statute Press"
3description: "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."
4tags: [brutalist, editorial, legal, premium, modern]
5colors:
6  primary:   "#0d0d0d"
7  secondary: "#5d5d5d"
8  tertiary:  "#0d0d0d"
9  neutral:   "#ece6d4"
10  surface:   "#f5efde"
11typography:
12  display: "Source Serif 4"
13  body:    Inter
14  mono:    "IBM Plex Mono"
15  scale:
16    hero: "5.5rem / 0.98 / 700 / -0.025em"
17    h1:   "3.25rem / 1.06 / 700 / -0.02em"
18    h2:   "1.875rem / 1.2 / 600 / -0.012em"
19    body: "1.0625rem / 1.65 / 400 / 0"
20radius:
21  sm: 0px
22  md: 0px
23  lg: 0px
24  pill: 9999px
25shadows:
26  card:   none
27  button: none
28borders:
29  card:    "3px solid #0d0d0d"
30  divider: rgba(13,13,13,0.18)
31buttons:
32  primary:
33    background: #0d0d0d
34    color: #f5efde
35    border: 3px solid #0d0d0d
36    shape: sharp
37    padding: 11px 22px
38    font: 600 / 0.8125rem / 0.06em
39    uppercase: true
40  secondary:
41    background: #f5efde
42    color: #0d0d0d
43    border: 3px solid #0d0d0d
44    shape: sharp
45    padding: 11px 22px
46    font: 600 / 0.8125rem / 0.06em
47    uppercase: true
48  outline:
49    background: transparent
50    color: #0d0d0d
51    border: 1.5px solid #0d0d0d
52    shape: sharp
53    padding: 11px 22px
54    font: 600 / 0.8125rem / 0.06em
55    uppercase: true
56  ghost:
57    background: transparent
58    color: #5d5d5d
59    border: none
60    shape: sharp
61    padding: 11px 18px
62    font: 600 / 0.8125rem / 0.06em
63    uppercase: true
64charts:
65  variant: "thin-bars"
66  stroke_width: 1.25
67  fill_opacity: 0
68  gridlines: false
69  bar_gap: 12px
70  highlight: single
71  dot_marker: false
72fonts_url: "https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
73dependencies: ["lucide-react"]
74---
75 
76# Statute Press
77 
78## AI Build Instructions
79 
80> **Read this section before writing any code.** The rules below
81> are non-negotiable. Every value used in the UI must come from this
82> file's frontmatter — never substitute, approximate, or invent new
83> colors, fonts, radii, or shadows. If a value is missing, ask the
84> user before adding one.
85 
86### 1 · Your role
87 
88You are building UI for a project that has adopted **Statute Press** as its
89design system. Treat `DESIGN.md` as the single source of truth.
90Your job is to translate the user's product requirements into
91components and pages that look like they were designed by the same
92person who authored this file.
93 
94### 2 · Token compliance
95 
96- Pull every color, font family, radius, shadow, and spacing value
97  from the frontmatter at the top of this file.
98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
99  hard-code hex values that bypass the system.
100- When a token can be expressed as a CSS variable, declare it once
101  in your global stylesheet and reference it everywhere downstream.
102- The Google Fonts `<link>` is provided in the Typography section.
103  Add it to `<head>` before any component renders.
104 
105### 3 · Component recipes
106 
107Use these recipes verbatim when building the corresponding component.
108 
109#### Buttons
110 
111Four variants are defined. Pick one — never blend variants or invent a fifth.
112 
113- **Primary** — sharp shape, bg `#0d0d0d`, text `#f5efde`, border `3px solid #0d0d0d`, padding `11px 22px`, weight `600`, uppercased.
114- **Secondary** — sharp shape, bg `#f5efde`, text `#0d0d0d`, border `3px solid #0d0d0d`, padding `11px 22px`, weight `600`, uppercased.
115- **Outline** — sharp shape, text `#0d0d0d`, border `1.5px solid #0d0d0d`, padding `11px 22px`, weight `600`, uppercased.
116- **Ghost** — sharp shape, text `#5d5d5d`, padding `11px 18px`, weight `600`, uppercased.
117 
118Reach for **primary** as the single dominant CTA per screen.
119**Secondary** for the supporting action. **Outline** for tertiary
120actions in toolbars. **Ghost** for inline links and table actions.
121 
122#### Cards
123 
124- Background: `#f5efde`
125- Border: `3px solid #0d0d0d`
126- Shadow: `none`
127- Radius: `radius.lg` (`0px`)
128- Internal padding: `20px` for compact cards, `24–28px` for content cards.
129 
130#### Tabs
131 
132Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill.
133 
134#### Charts
135 
136- Bar/line variant: `thin-bars`
137- No gridlines — let the bars/lines carry the data.
138- Highlight strategy: `single` — emphasize a single bar/point per chart.
139 
140#### Typography pairings
141 
142- **Display (`Source Serif 4`)** — h1, h2, hero headlines, brand wordmarks.
143- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
144- **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables.
145 
146### 4 · Hard constraints
147 
148Never do any of the following without explicit instruction from the user:
149 
150- Introduce a new color, font, radius, or shadow that isn't declared above.
151- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
152- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
153- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
154- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
155 
156### 5 · Before you finish — verify
157 
158Run through this checklist for every screen you produce:
159 
160- [ ] Every color used appears in the Colors table above.
161- [ ] Headlines use the display font; body copy uses the body font.
162- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
163- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
164- [ ] Cards and dividers use the declared border + shadow tokens.
165- [ ] No values were invented; if you needed something missing, you stopped and asked.
166 
167---
168 
169## 1. Atmosphere
170 
171Statute Press is a government filing made beautiful. The page surface is parchment `#f5efde` — closer to legal-pad cream than to white. Headlines run in Source Serif 4 at 88px, weight 700, with the optical-sized glyphs holding their authority at scale. Body sits in Inter at 17px on a 1.65 leading. Clause numbers, dockets, timestamps, and footnote references run in IBM Plex Mono uppercase. Cards and primary buttons are bordered with a hard 3px ink rule — the kind of border that reads as a legal-page divider, not as a CSS choice. The single accent is a mustard `#c89a2e` that appears only on the approval-seal badge and the active filing tab — like a rubber stamp on a contract.
172 
173The discipline is in the institutional restraint: serif display + sans body + mono numerals, hard 3px borders, parchment surface, and one mustard stamp.
174 
175**Signature moves**
176- Source Serif 4 700 at 88px hero with optical sizing — institutional gravitas
177- Hard 3px ink borders on cards and primary buttons — the legal-page rule
178- Parchment surface `#f5efde` — never white, never grey
179- Mustard `#c89a2e` only as the approval seal + active filing tab — never as a fill
180- All UI labels uppercase 0.06em — that's the docket voice
181- IBM Plex Mono for every clause number, timestamp, and footnote ref
182 
183## 2. Palette
184 
185### Surfaces
186- **Parchment** `#f5efde` — page background (warm legal-pad cream)
187- **Parchment Lift** `#ece6d4` — secondary surfaces, table headers
188- **Hairline** `rgba(13,13,13,0.18)` — internal dividers
189- **Hard Rule** `#0d0d0d` — the 3px legal border
190 
191### Ink
192- **Ink** `#0d0d0d` — text, headings, primary CTA fill
193- **Ink 60** `#5d5d5d` — secondary text
194 
195### Accent
196- **Mustard Stamp** `#c89a2e` — approval seal, active filing tab border
197- **Mustard Soft** `rgba(200,154,46,0.16)` — focus ring, hovered tab background
198 
199## 3. Typography
200 
201| Role | Font | Size | Weight | Leading | Tracking |
202|------|------|------|--------|---------|----------|
203| Hero | Source Serif 4 | 88px | 700 | 0.98 | -0.025em |
204| H1 | Source Serif 4 | 52px | 700 | 1.06 | -0.02em |
205| H2 | Source Serif 4 | 30px | 600 | 1.2 | -0.012em |
206| Body | Inter | 17px | 400 | 1.65 | 0 |
207| UI / Button | Inter | 13px | 600 | 1.4 | 0.06em uppercase |
208| Clause / Mono | IBM Plex Mono | 11px | 500 | 1.0 | 0.08em uppercase |
209| Filing Number | IBM Plex Mono | 14px | 600 | 1.0 | 0 tabular-nums |
210 
211Source Serif 4 uses optical sizing — at 88px the glyphs gain serif weight that smaller sizes don't show. Hold serif to display only; body is Inter.
212 
213## 4. Buttons
214 
215### Primary (Ink Slab with Rule)
216```css
217background: #0d0d0d;
218color: #f5efde;
219padding: 11px 22px;
220border: 3px solid #0d0d0d;
221border-radius: 0;
222text-transform: uppercase;
223letter-spacing: 0.06em;
224```
225 
226The 3px border on the dark button is invisible on its own background — but it adds 3px of mass that reads as institutional weight. On the secondary it shows as a hard frame.
227 
228### Secondary (Parchment with Hard Rule)
229- Parchment background, 3px solid ink border, ink text — same uppercase voice
230 
231### Outline & Ghost
232- Outline: 1.5px solid ink — for inline secondary actions
233- Ghost: no border, ink-60, hover underlines
234 
235## 5. Cards
236 
237```css
238background: #f5efde;
239border: 3px solid #0d0d0d;
240border-radius: 0;
241box-shadow: none;
242```
243 
244The 3px hard rule IS the card. No shadows, no inset highlights, no soft fills. Featured cards (the approved filing) get a mustard stamp badge in the top-right corner — that is the only place mustard appears as a fill.
245 
246## 6. Charts
247 
248Thin precise bars (3px wide, 12px gap). One bar in mustard, others in 22% ink. NO gridlines. Line charts at 1.25px ink with no fill. Y-axis labels in IBM Plex Mono uppercase 11px. The chart reads as an exhibit attached to a filing.
249 
250## 7. Tabs
251 
252Boxed tabs with 1.5px ink border and 0px radius. Active = parchment-lift background, 2px mustard top border, ink text in uppercase 0.06em. Inactive = transparent, ink-60 uppercase. Reads like the index tabs on a hanging file folder.
253 
254## 8. Spacing
255 
256- Base 4px
257- Scale: `4, 8, 12, 16, 24, 32, 48, 64, 96, 128`
258- Section padding: 128px desktop, 64px mobile
259 
260## 9. Do's & don'ts
261 
262✅ **Do**
263- Use Source Serif 4 700 at 88px for the hero — the optical-sized serif IS institutional gravitas
264- Hold the parchment surface `#f5efde` — white reads as web app, grey reads as ledger
265- Use the 3px hard rule on cards and primary/secondary buttons — that's the legal-page divider
266- Reserve mustard for the approval stamp + active filing tab — never as a button or text fill
267 
268❌ **Don't**
269- Use any radius — sharp 0px is institutional
270- Add card shadows — the 3px border carries all the weight
271- Use a second accent — mustard alone, on the stamp and the tab
272- Use Source Serif at lower than 600 — anything lighter loses the serif authority
273 
274---
275 
276## Tokens
277 
278> Generated from the same source the live preview renders from.
279> Treat the values below as the contract — never substitute approximations.
280 
281### Colors
282 
283| Role      | Value |
284|-----------|-------|
285| primary   | `#0d0d0d` |
286| secondary | `#5d5d5d` |
287| tertiary  | `#0d0d0d` |
288| neutral   | `#ece6d4` |
289| surface   | `#f5efde` |
290 
291### Typography
292 
293- **Display:** Source Serif 4
294- **Body:** Inter
295- **Mono:** IBM Plex Mono
296 
297| Role | size / leading / weight / tracking |
298|------|------------------------------------|
299| Hero | 5.5rem / 0.98 / 700 / -0.025em |
300| H1   | 3.25rem / 1.06 / 700 / -0.02em |
301| H2   | 1.875rem / 1.2 / 600 / -0.012em |
302| Body | 1.0625rem / 1.65 / 400 / 0 |
303 
304### Radius
305 
306- sm: `0px`
307- md: `0px`
308- lg: `0px`
309- pill: `9999px`
310 
311### Shadows
312 
313- **card:** `none`
314- **button:** `none`
315 
316### Borders
317 
318- **card:** `3px solid #0d0d0d`
319- **divider:** `rgba(13,13,13,0.18)`
320 
321### Buttons
322 
323Four variants, each fully tokenized. The preview renders from these exact values.
324 
325#### Primary
326 
327| Property | Value |
328|----------|-------|
329| shape | `sharp` |
330| background | `#0d0d0d` |
331| color | `#f5efde` |
332| border | `3px solid #0d0d0d` |
333| padding | `11px 22px` |
334| fontWeight | `600` |
335| fontSize | `0.8125rem` |
336| tracking | `0.06em` |
337| uppercase | `true` |
338 
339#### Secondary
340 
341| Property | Value |
342|----------|-------|
343| shape | `sharp` |
344| background | `#f5efde` |
345| color | `#0d0d0d` |
346| border | `3px solid #0d0d0d` |
347| padding | `11px 22px` |
348| fontWeight | `600` |
349| fontSize | `0.8125rem` |
350| tracking | `0.06em` |
351| uppercase | `true` |
352 
353#### Outline
354 
355| Property | Value |
356|----------|-------|
357| shape | `sharp` |
358| background | `transparent` |
359| color | `#0d0d0d` |
360| border | `1.5px solid #0d0d0d` |
361| padding | `11px 22px` |
362| fontWeight | `600` |
363| fontSize | `0.8125rem` |
364| tracking | `0.06em` |
365| uppercase | `true` |
366 
367#### Ghost
368 
369| Property | Value |
370|----------|-------|
371| shape | `sharp` |
372| background | `transparent` |
373| color | `#5d5d5d` |
374| border | `none` |
375| padding | `11px 18px` |
376| fontWeight | `600` |
377| fontSize | `0.8125rem` |
378| tracking | `0.06em` |
379| uppercase | `true` |
380 
381### Charts
382 
383| Property | Value |
384|----------|-------|
385| variant | `thin-bars` |
386| strokeWidth | `1.25` |
387| fillOpacity | `0` |
388| gridlines | `false` |
389| barGap | `12px` |
390| highlight | `single` |
391| dotMarker | `false` |
392 
393---
394 
395## Pro tokens
396 
397> Production-fidelity tokens. States, density, motion, elevation,
398> content rules and a measured WCAG contract — derived from the
399> resting tokens unless explicitly authored.
400 
401### States
402 
403#### Button
404 
405- **hover** — shadow: `4px 4px 0 0 #0d0d0d`, transform: `translate(-2px, -2px)`
406- **focus** — outline: `2px solid #0d0d0d`, outline-offset: `3px`
407- **active** — shadow: `none`, transform: `translate(0, 0)`
408- **disabled** — opacity: `0.4`, filter: `grayscale(0.4)`
409- **loading** — opacity: `0.6`
410- **selected** — bg: `#0d0d0d`, color: `#f5efde`
411 
412#### Input
413 
414- **hover** — border: `2px solid #0d0d0d`
415- **focus** — border: `2px solid #0d0d0d`, shadow: `4px 4px 0 0 #0d0d0d`
416- **disabled** — bg: `rgba(13, 13, 13, 0.05)`, opacity: `0.4`
417- **error** — border: `2px solid #B91C1C`, shadow: `4px 4px 0 0 #B91C1C`
418 
419#### Card
420 
421- **hover** — shadow: `6px 6px 0 0 #0d0d0d`, transform: `translate(-3px, -3px)`
422- **selected** — border: `3px solid #0d0d0d`
423- **dragging** — shadow: `8px 8px 0 0 #0d0d0d`, transform: `rotate(-1deg) scale(1.02)`
424 
425#### Tab
426 
427- **hover** — bg: `rgba(13, 13, 13, 0.08)`
428- **focus** — outline: `2px solid #0d0d0d`, outline-offset: `2px`
429- **selected** — bg: `#0d0d0d`, color: `#f5efde`
430 
431### Density
432 
433| Mode | padding × | row × | body | radius × | Use for |
434|------|-----------|-------|------|----------|---------|
435| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
436| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
437| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
438 
439### Motion
440 
441**Signature — Hard cut.** No animation. Transitions are cuts — the state switches, the eye follows. Brutalism means no softening.
442 
443```css
444transition: none;
445```
446 
447| Token | Value |
448|-------|-------|
449| duration.instant | `0ms` |
450| duration.fast | `50ms` |
451| duration.base | `100ms` |
452| duration.slow | `150ms` |
453| easing.standard | `linear` |
454| easing.decelerate | `linear` |
455| easing.accelerate | `linear` |
456| easing.spring | `steps(3, end)` |
457 
458### Elevation
459 
460Five-level scale, system-specific recipe.
461 
462| Level | Shadow | Recipe |
463|-------|--------|--------|
464| level0 | `none` | Flat — the border carries the separation. |
465| level1 | `2px 2px 0 0 #0d0d0d` | Hard offset 2/2, no blur. |
466| level2 | `4px 4px 0 0 #0d0d0d` | Hard offset 4/4 — cards. |
467| level3 | `6px 6px 0 0 #0d0d0d` | Hard offset 6/6 — dialogs. |
468| level4 | `8px 8px 0 0 #0d0d0d` | Hard offset 8/8 — modals, thicker border. |
469 
470### Content
471 
472- **measure:** `64ch` (max line length for body prose)
473- **paragraph spacing:** `1.2em`
474- **list indent:** `1.5em`
475- **list gap:** `0.5em`
476- **link:** color `#0d0d0d`, underline `always`
477- **blockquote:** border `4px solid #0d0d0d`, padding `0.8em 1em`
478- **code:** background `#0d0d0d`, color `#f5efde`
479 
480### Accessibility (WCAG 2.1)
481 
482**Overall:** AA
483 
484| Pair | Ratio | Required | Grade | Suggested fix |
485|------|-------|----------|-------|---------------|
486| Body text on surface | 16.92:1 | AA | AAA | — |
487| Body text on canvas | 15.58:1 | AA | AAA | — |
488| Muted text on surface | 5.73:1 | AA | AA | — |
489| Accent on surface | 16.92:1 | AA-Large | AAA | — |
490| Accent on canvas | 15.58:1 | AA-Large | AAA | — |
491
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:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter: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:    ['"Inter"', 'sans-serif'],
        mono:    ['"IBM Plex Mono"', 'monospace'],
      },
      colors: {
        primary:   '#0d0d0d',
        secondary: '#5d5d5d',
        accent:    '#0d0d0d',
        neutral:   '#ece6d4',
        surface:   '#f5efde',
      },
      borderRadius: {
        sm: '0px',
        md: '0px',
        lg: '0px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Duotone Press

A two-color press operation: warm bone and persimmon, nothing else. Bricolage Grotesque for display at oversized scale, Newsreader for body, sharp 0px corners, every accent and every CTA in the same persimmon. Built for editorial sites, indie magazines, and brands that want one disciplined color move and zero decoration.

editorialduotonewarmminimalbold
Duotone.app
ProductPricingDocsAbout
Sign inGet started
editorial · duotone · warm

Build with Duotone 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

Mercure Editorial

Design-studio editorial. Massive display serif at 7rem with tight tracking, hairline rules between sections, asymmetric column grids, captions in small-caps mono. One ox-blood accent. The page reads like a printed monograph.

editorialagencyserifminimalportfolio
Mercure.app
ProductPricingDocsAbout
Sign inGet started→
editorial · agency · serif

Build with Mercure Editorial.

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