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.
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.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
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: 0px22 md: 0px23 lg: 2px24shadows:25 card: "0 0 0 1px rgba(23, 20, 17, 0.10)"26 button: none27borders:28 card: "1px solid rgba(23, 20, 17, 0.10)"29 divider: "rgba(23, 20, 17, 0.18)"30buttons:31 primary:32 background: #17141133 color: #F1ECE334 border: 1px solid #17141135 shape: sharp36 padding: 16px 28px37 font: mono / 500 / 0.75rem / 0.14em38 uppercase: true39 suffix: arrow40 secondary:41 background: transparent42 color: #17141143 border: 1px solid #17141144 shape: sharp45 padding: 15px 27px46 font: mono / 500 / 0.75rem / 0.14em47 uppercase: true48 outline:49 background: transparent50 color: #17141151 border: 1px solid rgba(23, 20, 17, 0.30)52 shape: sharp53 padding: 15px 27px54 font: mono / 500 / 0.75rem / 0.14em55 uppercase: true56 ghost:57 background: transparent58 color: #7A1E1E59 border: none60 shape: sharp61 padding: 15px 4px62 font: mono / 500 / 0.75rem / 0.14em63 uppercase: true64 hover: underline65charts:66 variant: "thin-bars"67 stroke_width: 168 gridlines: false69 bar_radius: 0px70 bar_gap: 10px71 highlight: single72 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 Editorial79 80## AI Build Instructions81 82> **Read this section before writing any code.** The rules below83> are non-negotiable. Every value used in the UI must come from this84> file's frontmatter — never substitute, approximate, or invent new85> colors, fonts, radii, or shadows. If a value is missing, ask the86> user before adding one.87 88### 1 · Your role89 90You are building UI for a project that has adopted **Mercure Editorial** as its91design system. Treat `DESIGN.md` as the single source of truth.92Your job is to translate the user's product requirements into93components and pages that look like they were designed by the same94person who authored this file.95 96### 2 · Token compliance97 98- Pull every color, font family, radius, shadow, and spacing value99 from the frontmatter at the top of this file.100- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never101 hard-code hex values that bypass the system.102- When a token can be expressed as a CSS variable, declare it once103 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 recipes108 109Use these recipes verbatim when building the corresponding component.110 111#### Buttons112 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 tertiary122actions in toolbars. **Ghost** for inline links and table actions.123 124#### Cards125 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#### Tabs133 134Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.135 136#### Charts137 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 pairings145 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 constraints151 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 — verify161 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## Overview174Mercure 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## Color179- **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## Typography188The 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## Geometry201- **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## Buttons207All 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## Cards215Cards 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 & Data218Single-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'ts221- ✅ 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## Tokens233 234> Generated from the same source the live preview renders from.235> Treat the values below as the contract — never substitute approximations.236 237### Colors238 239| Role | Value |240|-----------|-------|241| primary | `#171411` |242| secondary | `#6E665C` |243| tertiary | `#7A1E1E` |244| neutral | `#F1ECE3` |245| surface | `#FBF8F2` |246 247### Typography248 249- **Display:** Playfair Display250- **Body:** Source Serif 4251- **Mono:** JetBrains Mono252 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### Radius261 262- sm: `0px`263- md: `0px`264- lg: `2px`265 266### Shadows267 268- **card:** `0 0 0 1px rgba(23, 20, 17, 0.10)`269- **button:** `none`270 271### Borders272 273- **card:** `1px solid rgba(23, 20, 17, 0.10)`274- **divider:** `rgba(23, 20, 17, 0.18)`275 276### Buttons277 278Four variants, each fully tokenized. The preview renders from these exact values.279 280#### Primary281 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#### Secondary297 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#### Outline312 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#### Ghost327 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### Charts343 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 # 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.<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" />npm install lucide-react// tailwind.config.jsexport 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', }, }, },};Travel magazine that happens to be an app. Single-family typography, coral-pink accent reserved for primary CTAs, generous photography and 14–20px image radius.
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.
A developer tool that finally feels warm. Graphite surfaces (never black, never grey), JetBrains Mono for everything technical, Inter for prose, a single sage-green accent reserved for the active state. Built for CLIs, infra dashboards, and dev portals that want to look serious without looking like a 90s terminal.
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.