design.md
Back to directory
editorial · agency · serif · minimal · portfolio

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.

01 · Preview

The kitchen sink.

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

Palette

primary
#171411
secondary
#6E665C
tertiary
#7A1E1E
neutral
#F1ECE3
surface
#FBF8F2
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

Primary→SecondaryOutlineGhostText 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
2px
pill
999px
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: "Mercure Editorial"
3description: "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."
4tags: [editorial, agency, serif, minimal, portfolio]
5colors:
6  primary:   "#171411"
7  secondary: "#6E665C"
8  tertiary:  "#7A1E1E"
9  neutral:   "#F1ECE3"
10  surface:   "#FBF8F2"
11typography:
12  display: "Playfair Display"
13  body:    "Source Serif 4"
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "7rem / 0.95 / 500 / -0.04em"
17    h1:   "3.75rem / 1.05 / 500 / -0.025em"
18    h2:   "1.75rem / 1.25 / 500 / -0.012em"
19    body: "1.0625rem / 1.75 / 400 / 0em"
20radius:
21  sm: 0px
22  md: 0px
23  lg: 2px
24shadows:
25  card:   "0 0 0 1px rgba(23, 20, 17, 0.10)"
26  button: none
27borders:
28  card:    "1px solid rgba(23, 20, 17, 0.10)"
29  divider: "rgba(23, 20, 17, 0.18)"
30buttons:
31  primary:
32    background: #171411
33    color: #F1ECE3
34    border: 1px solid #171411
35    shape: sharp
36    padding: 16px 28px
37    font: mono / 500 / 0.75rem / 0.14em
38    uppercase: true
39    suffix: arrow
40  secondary:
41    background: transparent
42    color: #171411
43    border: 1px solid #171411
44    shape: sharp
45    padding: 15px 27px
46    font: mono / 500 / 0.75rem / 0.14em
47    uppercase: true
48  outline:
49    background: transparent
50    color: #171411
51    border: 1px solid rgba(23, 20, 17, 0.30)
52    shape: sharp
53    padding: 15px 27px
54    font: mono / 500 / 0.75rem / 0.14em
55    uppercase: true
56  ghost:
57    background: transparent
58    color: #7A1E1E
59    border: none
60    shape: sharp
61    padding: 15px 4px
62    font: mono / 500 / 0.75rem / 0.14em
63    uppercase: true
64    hover: underline
65charts:
66  variant: "thin-bars"
67  stroke_width: 1
68  gridlines: false
69  bar_radius: 0px
70  bar_gap: 10px
71  highlight: single
72  axis_color: "#6E665C"
73  palette: ["#171411"]
74fonts_url: "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Serif+4:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
75dependencies: ["lucide-react"]
76---
77 
78# Mercure Editorial
79 
80## AI Build Instructions
81 
82> **Read this section before writing any code.** The rules below
83> are non-negotiable. Every value used in the UI must come from this
84> file's frontmatter — never substitute, approximate, or invent new
85> colors, fonts, radii, or shadows. If a value is missing, ask the
86> user before adding one.
87 
88### 1 · Your role
89 
90You are building UI for a project that has adopted **Mercure Editorial** as its
91design system. Treat `DESIGN.md` as the single source of truth.
92Your job is to translate the user's product requirements into
93components and pages that look like they were designed by the same
94person who authored this file.
95 
96### 2 · Token compliance
97 
98- Pull every color, font family, radius, shadow, and spacing value
99  from the frontmatter at the top of this file.
100- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
101  hard-code hex values that bypass the system.
102- When a token can be expressed as a CSS variable, declare it once
103  in your global stylesheet and reference it everywhere downstream.
104- The Google Fonts `<link>` is provided in the Typography section.
105  Add it to `<head>` before any component renders.
106 
107### 3 · Component recipes
108 
109Use these recipes verbatim when building the corresponding component.
110 
111#### Buttons
112 
113Four variants are defined. Pick one — never blend variants or invent a fifth.
114 
115- **Primary** — sharp shape, bg `#171411`, text `#F1ECE3`, border `1px solid #171411`, padding `16px 28px`, weight `500`, uppercased.
116- **Secondary** — sharp shape, text `#171411`, border `1px solid #171411`, padding `15px 27px`, weight `500`, uppercased.
117- **Outline** — sharp shape, text `#171411`, border `1px solid rgba(23, 20, 17, 0.30)`, padding `15px 27px`, weight `500`, uppercased.
118- **Ghost** — sharp shape, text `#7A1E1E`, padding `15px 4px`, weight `500`, uppercased.
119 
120Reach for **primary** as the single dominant CTA per screen.
121**Secondary** for the supporting action. **Outline** for tertiary
122actions in toolbars. **Ghost** for inline links and table actions.
123 
124#### Cards
125 
126- Background: `#FBF8F2`
127- Border: `1px solid rgba(23, 20, 17, 0.10)`
128- Shadow: `0 0 0 1px rgba(23, 20, 17, 0.10)`
129- Radius: `radius.lg` (`2px`)
130- Internal padding: `20px` for compact cards, `24–28px` for content cards.
131 
132#### Tabs
133 
134Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
135 
136#### Charts
137 
138- Bar/line variant: `thin-bars`
139- Bar radius: `0px`
140- No gridlines — let the bars/lines carry the data.
141- Highlight strategy: `single` — emphasize a single bar/point per chart.
142- Use the declared palette in order: `#171411`.
143 
144#### Typography pairings
145 
146- **Display (`Playfair Display`)** — h1, h2, hero headlines, brand wordmarks.
147- **Body (`Source Serif 4`)** — paragraphs, labels, button text, form inputs.
148- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
149 
150### 4 · Hard constraints
151 
152Never do any of the following without explicit instruction from the user:
153 
154- Introduce a new color, font, radius, or shadow that isn't declared above.
155- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
156- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
157- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
158- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
159 
160### 5 · Before you finish — verify
161 
162Run through this checklist for every screen you produce:
163 
164- [ ] Every color used appears in the Colors table above.
165- [ ] Headlines use the display font; body copy uses the body font.
166- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
167- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
168- [ ] Cards and dividers use the declared border + shadow tokens.
169- [ ] No values were invented; if you needed something missing, you stopped and asked.
170 
171---
172 
173## Overview
174Mercure Editorial is a design-studio system disguised as a printed monograph. One massive display serif carries the page: 7rem, weight 500, tracking -4%. Everything beneath it is restrained — old-style serif body copy, small-caps mono captions, hairline rules between sections, sharp rectangular geometry. A single ox-blood accent appears on active links and footnotes; nothing else is chromatic.
175 
176The page reads like an essay set in a quarterly. For studios, portfolios, agency sites, magazine-style brand pages, anything that should feel slow-read and considered.
177 
178## Color
179- **Ink #171411** — primary text. Near-black with a warm bias so it sits on bone without going cold.
180- **Graphite #6E665C** — captions, secondary copy.
181- **Ox-blood #7A1E1E** — the only chromatic accent. Active link, footnote rule, mark of emphasis.
182- **Bone #F1ECE3** — page canvas. Warmer than paper, cooler than cream.
183- **Paper #FBF8F2** — card surface.
184 
185Color is rationed. The page is mostly bone and ink with two strokes of ox-blood.
186 
187## Typography
188The system is the type. Three families, each with one job:
189 
190| Role | Font | Size | Weight | Tracking |
191|------|------|------|--------|----------|
192| Hero | Playfair Display | 7rem | 500 | -0.04em |
193| H1 | Playfair Display | 3.75rem | 500 | -0.025em |
194| H2 | Playfair Display | 1.75rem | 500 | -0.012em |
195| Body | Source Serif 4 | 1.0625rem | 400 | 0 / 1.75 |
196| Caption | JetBrains Mono | 0.75rem | 500 | 0.14em uppercase |
197 
198Body copy is set in **Source Serif 4** at 17px with 1.75 leading — long-form first. Captions, figure labels, and button text are **JetBrains Mono in uppercase small-caps** at 12px with 14% tracking. The contrast between display serif, body serif, and mono caps is the rhythm of the page.
199 
200## Geometry
201- **Radii: 0 / 0 / 2px.** Editorial is rectangles and hairlines.
202- **Hairline rules everywhere.** 1px ink rules between sections at 18% opacity. The page is divided like a magazine spread.
203- **Asymmetric columns.** A 12-column grid where text usually sits in columns 2-7 or 6-11, never centered. Pull-quotes break into the margin.
204- **Section gap: 160px** desktop, 96px mobile. The whitespace is part of the type.
205 
206## Buttons
207All buttons share the same anatomy: sharp corners, mono caps label at 12px / 14% tracking, 16px vertical padding.
208 
209- **Primary** — solid ink, bone label. Optional → arrow suffix.
210- **Secondary** — bare ink hairline, ink label.
211- **Outline** — same as secondary at 30% rule opacity.
212- **Ghost** — bare ox-blood label, hover underline.
213 
214## Cards
215Cards are not "cards" — they are **bordered rectangles** with a 1px ink hairline at 10% opacity, no shadow, sharp 0px corners (or 2px on the largest container). Padding is generous: 40px minimum on the long side.
216 
217## Charts & Data
218Single-color thin bars in ink, no gridlines, no fill, 10px gap. Axis labels in mono caps at 11px / 14% tracking. The chart reads like a figure inset in an article.
219 
220## Do's and Don'ts
221- ✅ Set the hero at 7rem. The whole system depends on display serif at scale.
222- ✅ Hairline rules between every section. They are the page's spine.
223- ✅ Captions in mono caps. The contrast against the serif is the entire texture.
224- ✅ Asymmetric columns. Centered text kills the editorial feel.
225- ❌ No rounded corners beyond 2px. No pills. No drop shadows.
226- ❌ No second chromatic accent. Ox-blood is alone for a reason.
227- ❌ No sans body copy. The body is set in Source Serif 4 — that is non-negotiable.
228- ❌ No icons inside body text. Use mono labels and rules instead.
229 
230---
231 
232## Tokens
233 
234> Generated from the same source the live preview renders from.
235> Treat the values below as the contract — never substitute approximations.
236 
237### Colors
238 
239| Role      | Value |
240|-----------|-------|
241| primary   | `#171411` |
242| secondary | `#6E665C` |
243| tertiary  | `#7A1E1E` |
244| neutral   | `#F1ECE3` |
245| surface   | `#FBF8F2` |
246 
247### Typography
248 
249- **Display:** Playfair Display
250- **Body:** Source Serif 4
251- **Mono:** JetBrains Mono
252 
253| Role | size / leading / weight / tracking |
254|------|------------------------------------|
255| Hero | 7rem / 0.95 / 500 / -0.04em |
256| H1   | 3.75rem / 1.05 / 500 / -0.025em |
257| H2   | 1.75rem / 1.25 / 500 / -0.012em |
258| Body | 1.0625rem / 1.75 / 400 / 0em |
259 
260### Radius
261 
262- sm: `0px`
263- md: `0px`
264- lg: `2px`
265 
266### Shadows
267 
268- **card:** `0 0 0 1px rgba(23, 20, 17, 0.10)`
269- **button:** `none`
270 
271### Borders
272 
273- **card:** `1px solid rgba(23, 20, 17, 0.10)`
274- **divider:** `rgba(23, 20, 17, 0.18)`
275 
276### Buttons
277 
278Four variants, each fully tokenized. The preview renders from these exact values.
279 
280#### Primary
281 
282| Property | Value |
283|----------|-------|
284| shape | `sharp` |
285| background | `#171411` |
286| color | `#F1ECE3` |
287| border | `1px solid #171411` |
288| padding | `16px 28px` |
289| fontFamily | `mono` |
290| fontWeight | `500` |
291| fontSize | `0.75rem` |
292| tracking | `0.14em` |
293| uppercase | `true` |
294| suffix | `arrow` |
295 
296#### Secondary
297 
298| Property | Value |
299|----------|-------|
300| shape | `sharp` |
301| background | `transparent` |
302| color | `#171411` |
303| border | `1px solid #171411` |
304| padding | `15px 27px` |
305| fontFamily | `mono` |
306| fontWeight | `500` |
307| fontSize | `0.75rem` |
308| tracking | `0.14em` |
309| uppercase | `true` |
310 
311#### Outline
312 
313| Property | Value |
314|----------|-------|
315| shape | `sharp` |
316| background | `transparent` |
317| color | `#171411` |
318| border | `1px solid rgba(23, 20, 17, 0.30)` |
319| padding | `15px 27px` |
320| fontFamily | `mono` |
321| fontWeight | `500` |
322| fontSize | `0.75rem` |
323| tracking | `0.14em` |
324| uppercase | `true` |
325 
326#### Ghost
327 
328| Property | Value |
329|----------|-------|
330| shape | `sharp` |
331| background | `transparent` |
332| color | `#7A1E1E` |
333| border | `none` |
334| padding | `15px 4px` |
335| fontFamily | `mono` |
336| fontWeight | `500` |
337| fontSize | `0.75rem` |
338| tracking | `0.14em` |
339| uppercase | `true` |
340| hoverHint | `underline` |
341 
342### Charts
343 
344| Property | Value |
345|----------|-------|
346| variant | `thin-bars` |
347| strokeWidth | `1` |
348| gridlines | `false` |
349| barRadius | `0px` |
350| barGap | `10px` |
351| highlight | `single` |
352| axisColor | `#6E665C` |
353| palette | `#171411` |
354 
355---
356 
357## Pro tokens
358 
359> Production-fidelity tokens. States, density, motion, elevation,
360> content rules and a measured WCAG contract — derived from the
361> resting tokens unless explicitly authored.
362 
363### States
364 
365#### Button
366 
367- **hover** — bg: `rgba(122, 30, 30, 0.92)`, shadow: `0 4px 20px -8px rgba(122, 30, 30, 0.4)`
368- **focus** — outline: `1.5px solid #7A1E1E`, outline-offset: `4px`
369- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
370- **disabled** — opacity: `0.45`
371- **loading** — opacity: `0.7`
372- **selected** — bg: `#171411`, color: `#FBF8F2`
373 
374#### Input
375 
376- **hover** — border: `1px solid #171411`
377- **focus** — border: `1px solid #7A1E1E`, shadow: `0 1px 0 0 #7A1E1E`
378- **disabled** — opacity: `0.45`
379- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
380 
381#### Card
382 
383- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
384- **selected** — border: `1px solid #171411`
385 
386#### Tab
387 
388- **hover** — color: `#171411`
389- **focus** — outline: `1.5px solid #7A1E1E`, outline-offset: `3px`
390- **selected** — color: `#7A1E1E`, border: `0 0 2px 0 solid #7A1E1E`
391 
392### Density
393 
394| Mode | padding × | row × | body | radius × | Use for |
395|------|-----------|-------|------|----------|---------|
396| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
397| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
398| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
399 
400### Motion
401 
402**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
403 
404```css
405transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
406```
407 
408| Token | Value |
409|-------|-------|
410| duration.instant | `80ms` |
411| duration.fast | `180ms` |
412| duration.base | `320ms` |
413| duration.slow | `500ms` |
414| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
415| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
416| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
417| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
418 
419### Elevation
420 
421Five-level scale, system-specific recipe.
422 
423| Level | Shadow | Recipe |
424|-------|--------|--------|
425| level0 | `none` | Hairline only — typical editorial resting state. |
426| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
427| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
428| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
429| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
430 
431### Content
432 
433- **measure:** `60ch` (max line length for body prose)
434- **paragraph spacing:** `1.5em`
435- **list indent:** `1.75em`
436- **list gap:** `0.55em`
437- **link:** color `#7A1E1E`, underline `always`
438- **blockquote:** border `4px solid #7A1E1E`, padding `0.4em 0 0.4em 1.5em`
439- **code:** background `rgba(23, 20, 17, 0.06)`, color `#171411`
440 
441### Accessibility (WCAG 2.1)
442 
443**Overall:** AA
444 
445| Pair | Ratio | Required | Grade | Suggested fix |
446|------|-------|----------|-------|---------------|
447| Body text on surface | 17.31:1 | AA | AAA | — |
448| Body text on canvas | 15.59:1 | AA | AAA | — |
449| Muted text on surface | 5.33:1 | AA | AA | — |
450| Accent on surface | 9.75:1 | AA-Large | AAA | — |
451| Accent on canvas | 8.78:1 | AA-Large | AAA | — |
452
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=Playfair+Display:wght@400;500;600;700&family=Source+Serif+4:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Playfair Display"', 'serif'],
        sans:    ['"Source Serif 4"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#171411',
        secondary: '#6E665C',
        accent:    '#7A1E1E',
        neutral:   '#F1ECE3',
        surface:   '#FBF8F2',
      },
      borderRadius: {
        sm: '0px',
        md: '0px',
        lg: '2px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Null Grid

An ultra-minimal restraint exercise. Pure white surfaces, every layout snapped to a strict 12-column grid with a 4px baseline, Inter at three sizes for the entire system, sharp 0px corners, and one vermilion accent reserved for exactly one moment per page. Built for product pages, design portfolios, and brand surfaces where the discipline of the grid IS the design.

minimalmodernpremiumgridsaas
Null.app
ProductPricingDocsAbout
Sign inGet started
minimal · modern · premium

Build with Null Grid.

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

Warm Canvas

Approachable minimalism on warm white. Compressed Inter at -2.125px, whisper borders, multi-layer 4-stack shadows, and a single saturated blue accent.

minimalwarmproductivitysaas
Warm.app
ProductPricingDocsAbout
Sign inGet started
minimal · warm · productivity

Build with Warm Canvas.

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