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.
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: "Duotone Press"3description: "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."4tags: [editorial, duotone, warm, minimal, bold]5colors:6 primary: "#1a1612"7 secondary: "#1a1612"8 tertiary: "#cf4a1c"9 neutral: "#ede4d3"10 surface: "#f5ecd9"11typography:12 display: "Bricolage Grotesque"13 body: Newsreader14 mono: "JetBrains Mono"15 scale:16 hero: "10rem / 0.9 / 700 / -0.045em"17 h1: "5rem / 0.96 / 700 / -0.03em"18 h2: "2rem / 1.18 / 600 / -0.018em"19 body: "1.125rem / 1.65 / 400 / -0.003em"20radius:21 sm: 0px22 md: 0px23 lg: 0px24 pill: 9999px25shadows:26 card: none27 button: none28borders:29 card: "1px solid #1a1612"30 divider: "#1a1612"31buttons:32 primary:33 background: #cf4a1c34 color: #f5ecd935 border: none36 shape: sharp37 padding: 13px 26px38 font: 600 / 0.8125rem / 0.10em39 uppercase: true40 secondary:41 background: transparent42 color: #1a161243 border: 1px solid #1a161244 shape: sharp45 padding: 13px 26px46 font: 600 / 0.8125rem / 0.10em47 uppercase: true48 outline:49 background: transparent50 color: #1a161251 border: 1px solid #1a161252 shape: sharp53 padding: 13px 26px54 font: 600 / 0.8125rem / 0.10em55 uppercase: true56 ghost:57 background: transparent58 color: #1a161259 border: none60 shape: sharp61 padding: 13px 18px62 font: 600 / 0.8125rem / 0.10em63 uppercase: true64charts:65 variant: bars66 stroke_width: 267 fill_opacity: 068 gridlines: false69 bar_gap: 8px70 highlight: single71 dot_marker: false72fonts_url: "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700&family=Newsreader:ital,wght@0,400;0,500;1,400&family=JetBrains+Mono:wght@400;500&display=swap"73dependencies: ["lucide-react"]74---75 76# Duotone Press77 78## AI Build Instructions79 80> **Read this section before writing any code.** The rules below81> are non-negotiable. Every value used in the UI must come from this82> file's frontmatter — never substitute, approximate, or invent new83> colors, fonts, radii, or shadows. If a value is missing, ask the84> user before adding one.85 86### 1 · Your role87 88You are building UI for a project that has adopted **Duotone Press** as its89design system. Treat `DESIGN.md` as the single source of truth.90Your job is to translate the user's product requirements into91components and pages that look like they were designed by the same92person who authored this file.93 94### 2 · Token compliance95 96- Pull every color, font family, radius, shadow, and spacing value97 from the frontmatter at the top of this file.98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never99 hard-code hex values that bypass the system.100- When a token can be expressed as a CSS variable, declare it once101 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 recipes106 107Use these recipes verbatim when building the corresponding component.108 109#### Buttons110 111Four variants are defined. Pick one — never blend variants or invent a fifth.112 113- **Primary** — sharp shape, bg `#cf4a1c`, text `#f5ecd9`, padding `13px 26px`, weight `600`, uppercased.114- **Secondary** — sharp shape, text `#1a1612`, border `1px solid #1a1612`, padding `13px 26px`, weight `600`, uppercased.115- **Outline** — sharp shape, text `#1a1612`, border `1px solid #1a1612`, padding `13px 26px`, weight `600`, uppercased.116- **Ghost** — sharp shape, text `#1a1612`, padding `13px 18px`, weight `600`, uppercased.117 118Reach for **primary** as the single dominant CTA per screen.119**Secondary** for the supporting action. **Outline** for tertiary120actions in toolbars. **Ghost** for inline links and table actions.121 122#### Cards123 124- Background: `#f5ecd9`125- Border: `1px solid #1a1612`126- Shadow: `none`127- Radius: `radius.lg` (`0px`)128- Internal padding: `20px` for compact cards, `24–28px` for content cards.129 130#### Tabs131 132Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.133 134#### Charts135 136- Bar/line variant: `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 pairings141 142- **Display (`Bricolage Grotesque`)** — h1, h2, hero headlines, brand wordmarks.143- **Body (`Newsreader`)** — paragraphs, labels, button text, form inputs.144- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.145 146### 4 · Hard constraints147 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 — verify157 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. Atmosphere170 171Duotone Press is a strict two-color press operation. The page surface is warm bone `#f5ecd9` — never white, never cream. Ink is near-black `#1a1612` with a slight warm undertone — text, headings, dividers, secondary buttons, card borders. The single accent is persimmon `#cf4a1c` — every CTA, every active state, every editorial moment. There is no third color. Display headlines run in Bricolage Grotesque at 160px, weight 700 — the variable-grotesque hits like a press-roll. Body sits in Newsreader at 18px on a 1.65 leading — the warm text-grade serif is the editorial counterweight.172 173The discipline is absolute: every pixel is bone, ink, or persimmon. No greys, no tints, no opacity tricks. The persimmon does the entire job of "look here," and a page should have at most three persimmon moments.174 175**Signature moves**176- Bricolage Grotesque 700 at 160px — variable-grotesque press-roll weight177- Newsreader 18px body — warm text-grade serif counterweight178- Strict two-color: bone `#f5ecd9` + ink `#1a1612` + persimmon `#cf4a1c` — no third color179- Persimmon for every CTA + every active state + every editorial moment180- Sharp 0px corners on every card and button — press-printed precision181- 1px ink dividers and card borders — never grey, never opacity182 183## 2. Palette (the entire system)184 185- **Bone** `#f5ecd9` — page background186- **Bone Lift** `#ede4d3` — secondary surfaces, table headers187- **Ink** `#1a1612` — text, dividers, card borders, secondary CTA outline188- **Persimmon** `#cf4a1c` — primary CTA, active state, editorial accent189 190That is the entire palette. No greys (use opacity-0 ink only when absolutely needed for ink-50 text via an actual second ink swatch — but prefer dropping the text). No third hue. Ever.191 192## 3. Typography193 194| Role | Font | Size | Weight | Leading | Tracking |195|------|------|------|--------|---------|----------|196| Hero | Bricolage Grotesque | 160px | 700 | 0.90 | -0.045em |197| H1 | Bricolage Grotesque | 80px | 700 | 0.96 | -0.03em |198| H2 | Bricolage Grotesque | 32px | 600 | 1.18 | -0.018em |199| Pull Quote | Newsreader (italic) | 26px | 400 | 1.4 | -0.008em |200| Body | Newsreader | 18px | 400 | 1.65 | -0.003em |201| UI / Button | Bricolage Grotesque | 13px | 600 | 1.4 | 0.10em uppercase |202| Caption | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase |203| Number | JetBrains Mono | 14px | 500 | 1.0 | 0 tabular-nums |204 205Bricolage Grotesque on display + UI labels; Newsreader on body + pull quotes. Two voices, no compromise.206 207## 4. Buttons208 209### Primary (Persimmon — every CTA)210```css211background: #cf4a1c;212color: #f5ecd9;213padding: 13px 26px;214border-radius: 0px;215text-transform: uppercase;216letter-spacing: 0.10em;217font-weight: 600;218```219 220Sharp 0px corners. The persimmon-on-bone reads as a printed-tab press-stamp.221 222### Secondary (Ink Outline)223- Transparent, 1px solid ink, ink text — same sharp 0px corners224 225### Outline & Ghost226- Outline: identical to secondary (no fourth treatment in a two-color system)227- Ghost: no border, ink text, hover underlines228 229## 5. Cards230 231```css232background: #f5ecd9;233border: 1px solid #1a1612;234border-radius: 0px;235box-shadow: none;236```237 238NO shadows. NO opacity. The 1px solid ink border is the only chrome. The active card flips: ink background, bone text, 1px persimmon border on the bottom edge — the only place persimmon ever appears as a border.239 240## 6. Charts241 242Thick precise bars (8px wide, 8px gap). One bar in persimmon, others in ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts read as press-printed broadside graphics, not as data viz.243 244## 7. Tabs245 246Underline 2px in persimmon for the active state. Inactive tabs are ink in Bricolage Grotesque uppercase 0.10em. The underline is the only place persimmon appears in nav.247 248## 8. Spacing249 250- Base 8px251- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 160`252- Section padding: 128px desktop, 64px mobile253 254## 9. Do's & don'ts255 256✅ **Do**257- Hold the strict two-color discipline: bone, ink, persimmon — no greys, no tints, no third hue258- Use Bricolage Grotesque at 160px for the hero — the variable-grotesque is the system's voice259- Reserve persimmon for CTAs + active states + editorial accents only260- Use sharp 0px corners on every card and button — press-printed precision261 262❌ **Don't**263- Add a third color, even for status — success/warn/error all live in ink + persimmon264- Use ink-50 grey for secondary text — drop the text or restate it in shorter form265- Round any corner — 0px or pill (for badges only), nothing in between266- Use persimmon as a background fill — three surfaces only (CTA, active state, editorial accent)267 268---269 270## Tokens271 272> Generated from the same source the live preview renders from.273> Treat the values below as the contract — never substitute approximations.274 275### Colors276 277| Role | Value |278|-----------|-------|279| primary | `#1a1612` |280| secondary | `#1a1612` |281| tertiary | `#cf4a1c` |282| neutral | `#ede4d3` |283| surface | `#f5ecd9` |284 285### Typography286 287- **Display:** Bricolage Grotesque288- **Body:** Newsreader289- **Mono:** JetBrains Mono290 291| Role | size / leading / weight / tracking |292|------|------------------------------------|293| Hero | 10rem / 0.9 / 700 / -0.045em |294| H1 | 5rem / 0.96 / 700 / -0.03em |295| H2 | 2rem / 1.18 / 600 / -0.018em |296| Body | 1.125rem / 1.65 / 400 / -0.003em |297 298### Radius299 300- sm: `0px`301- md: `0px`302- lg: `0px`303- pill: `9999px`304 305### Shadows306 307- **card:** `none`308- **button:** `none`309 310### Borders311 312- **card:** `1px solid #1a1612`313- **divider:** `#1a1612`314 315### Buttons316 317Four variants, each fully tokenized. The preview renders from these exact values.318 319#### Primary320 321| Property | Value |322|----------|-------|323| shape | `sharp` |324| background | `#cf4a1c` |325| color | `#f5ecd9` |326| border | `none` |327| padding | `13px 26px` |328| fontWeight | `600` |329| fontSize | `0.8125rem` |330| tracking | `0.10em` |331| uppercase | `true` |332 333#### Secondary334 335| Property | Value |336|----------|-------|337| shape | `sharp` |338| background | `transparent` |339| color | `#1a1612` |340| border | `1px solid #1a1612` |341| padding | `13px 26px` |342| fontWeight | `600` |343| fontSize | `0.8125rem` |344| tracking | `0.10em` |345| uppercase | `true` |346 347#### Outline348 349| Property | Value |350|----------|-------|351| shape | `sharp` |352| background | `transparent` |353| color | `#1a1612` |354| border | `1px solid #1a1612` |355| padding | `13px 26px` |356| fontWeight | `600` |357| fontSize | `0.8125rem` |358| tracking | `0.10em` |359| uppercase | `true` |360 361#### Ghost362 363| Property | Value |364|----------|-------|365| shape | `sharp` |366| background | `transparent` |367| color | `#1a1612` |368| border | `none` |369| padding | `13px 18px` |370| fontWeight | `600` |371| fontSize | `0.8125rem` |372| tracking | `0.10em` |373| uppercase | `true` |374 375### Charts376 377| Property | Value |378|----------|-------|379| variant | `bars` |380| strokeWidth | `2` |381| fillOpacity | `0` |382| gridlines | `false` |383| barGap | `8px` |384| highlight | `single` |385| dotMarker | `false` |386 # 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=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700&family=Newsreader:ital,wght@0,400;0,500;1,400&family=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Bricolage Grotesque"', 'serif'], sans: ['"Newsreader"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#1a1612', secondary: '#1a1612', accent: '#cf4a1c', neutral: '#ede4d3', surface: '#f5ecd9', }, borderRadius: { sm: '0px', md: '0px', lg: '0px', }, }, },};Dark graphite glassmorphism — heavy 48px backdrop blur on near-opaque graphite panes, hairline pewter borders, and brushed-silver text accents. No color, no glow, no aurora. Just clean machined glass over a flat charcoal canvas with subtle metallic gradients on display type.
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 trading desk that whispers. Off-white surfaces with hairline-only chrome, IBM Plex Sans for prose, IBM Plex Mono with tabular numerals for every figure, a single forest-green accent reserved for positive deltas. Built for fintech dashboards, treasury tools, and any product where the numbers must be the loudest thing on the screen.
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.