A maximalist editorial broadside that earns every inch with prose. Sage-grey paper surface, Old Standard TT at extreme display scale for headlines, drop-caps that span eight body lines, full-bleed pull-quote slabs in oversized serif italic, Inter for navigation, a single muted burgundy accent reserved for the editor's mark and the issue-number tag. Built for long-form magazines, opinion sections, and editorial publishers who lead with words at oversized scale.
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: "Gazette Broadside"3description: "A maximalist editorial broadside that earns every inch with prose. Sage-grey paper surface, Old Standard TT at extreme display scale for headlines, drop-caps that span eight body lines, full-bleed pull-quote slabs in oversized serif italic, Inter for navigation, a single muted burgundy accent reserved for the editor's mark and the issue-number tag. Built for long-form magazines, opinion sections, and editorial publishers who lead with words at oversized scale."4tags: [editorial, premium, warm, serif, bold]5colors:6 primary: "#1d1f1c"7 secondary: "#6b6e64"8 tertiary: "#1d1f1c"9 neutral: "#dadbcd"10 surface: "#e6e7d8"11typography:12 display: "Old Standard TT"13 body: "Old Standard TT"14 mono: "JetBrains Mono"15 scale:16 hero: "12rem / 0.86 / 700 / -0.04em"17 h1: "5.5rem / 0.96 / 700 / -0.025em"18 h2: "2.25rem / 1.18 / 400 / -0.012em"19 body: "1.1875rem / 1.7 / 400 / -0.003em"20radius:21 sm: 1px22 md: 2px23 lg: 3px24 pill: 9999px25shadows:26 card: none27 button: none28borders:29 card: "1px solid rgba(29,31,28,0.16)"30 divider: rgba(29,31,28,0.20)31buttons:32 primary:33 background: #1d1f1c34 color: #e6e7d835 border: none36 shape: sharp37 padding: 12px 24px38 font: 500 / 0.8125rem / 0.18em39 uppercase: true40 secondary:41 background: transparent42 color: #1d1f1c43 border: 1px solid #1d1f1c44 shape: sharp45 padding: 12px 24px46 font: 500 / 0.8125rem / 0.18em47 uppercase: true48 outline:49 background: transparent50 color: #1d1f1c51 border: 1px solid rgba(29,31,28,0.20)52 shape: sharp53 padding: 12px 24px54 font: 500 / 0.8125rem / 0.18em55 uppercase: true56 ghost:57 background: transparent58 color: #6b6e6459 border: none60 shape: sharp61 padding: 12px 18px62 font: 500 / 0.8125rem / 0.18em63 uppercase: true64charts:65 variant: "thin-bars"66 stroke_width: 167 fill_opacity: 068 gridlines: false69 bar_gap: 14px70 highlight: single71 dot_marker: false72fonts_url: "https://fonts.googleapis.com/css2?family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"73dependencies: ["lucide-react"]74---75 76# Gazette Broadside77 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 **Gazette Broadside** 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 `#1d1f1c`, text `#e6e7d8`, padding `12px 24px`, weight `500`, uppercased.114- **Secondary** — sharp shape, text `#1d1f1c`, border `1px solid #1d1f1c`, padding `12px 24px`, weight `500`, uppercased.115- **Outline** — sharp shape, text `#1d1f1c`, border `1px solid rgba(29,31,28,0.20)`, padding `12px 24px`, weight `500`, uppercased.116- **Ghost** — sharp shape, text `#6b6e64`, padding `12px 18px`, weight `500`, 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: `#e6e7d8`125- Border: `1px solid rgba(29,31,28,0.16)`126- Shadow: `none`127- Radius: `radius.lg` (`3px`)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: `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 pairings141 142- **Display (`Old Standard TT`)** — h1, h2, hero headlines, brand wordmarks.143- **Body (`Old Standard TT`)** — 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 171Gazette Broadside is a maximalist editorial broadside that earns every inch with prose. The page surface is sage-grey `#e6e7d8` — a cool olive-paper tone that reads as a printed weekly review, never bright. Headlines run in Old Standard TT 700 at 192px with a 0.86 leading — the classical bold serif at full-bleed scale, taking up the entire above-the-fold. The first paragraph of every article opens with a drop-cap that spans eight body lines: Old Standard TT 400 at 13rem, slight negative left margin so it visually overhangs the column. Pull quotes are full-bleed slabs: Old Standard TT italic 400 at 64px on a 1.18 leading, surrounded by 96px of vertical space, indented from a single 1px ink rule on the left. Body sits in Old Standard TT regular at 19px on a 1.7 leading. Navigation runs in Inter 500 with 0.18em uppercase tracking — the only sans in the entire system. The single accent is muted burgundy `#6e2530` reserved for the editor's mark and the issue-number tag.172 173The discipline is in the maximalism: every page is dense with type, but the type does the entire job. There are no images, no cards, no decoration — just headlines at 192px, drop-caps at 208px, pull-quote slabs at 64px italic, and 19px body that runs for full columns.174 175**Signature moves**176- Old Standard TT 700 at 192px headlines — classical bold serif at full-bleed scale177- Drop-caps spanning 8 body lines (208px), Old Standard TT 400, slight negative left margin178- Full-bleed pull-quote slabs — italic 64px with 96px breathing room and a 1px left rule179- 19px body in Old Standard TT regular on 1.7 leading — long-form serious reading180- Sage-grey paper `#e6e7d8` — cool olive printed-weekly tone, never warm cream181- Burgundy `#6e2530` exclusively on editor's mark + issue-number tag — two surfaces only182- Inter (500, 0.18em uppercase) is the only sans — used for nav and page-number rails183 184## 2. Palette185 186### Surfaces187- **Sage Paper** `#e6e7d8` — page background (cool olive printed-weekly)188- **Sage Lift** `#dadbcd` — masthead, footer, table headers189- **Hairline** `rgba(29,31,28,0.16)` — every divider, every rule190 191### Ink192- **Ink** `#1d1f1c` — text, headings, primary CTA fill (warm near-black)193- **Ink 50** `#6b6e64` — secondary text, mono captions, byline194 195### Accent196- **Burgundy** `#6e2530` — editor's mark, issue-number tag197- That is the only color in the system.198 199## 3. Typography200 201| Role | Font | Size | Weight | Leading | Tracking |202|------|------|------|--------|---------|----------|203| Hero Headline | Old Standard TT | 192px | 700 | 0.86 | -0.04em |204| H1 | Old Standard TT | 88px | 700 | 0.96 | -0.025em |205| H2 / Subhead | Old Standard TT | 36px | 400 | 1.18 | -0.012em |206| Drop-Cap | Old Standard TT | 208px | 400 | 0.85 | -0.04em |207| Pull Quote | Old Standard TT (italic) | 64px | 400 | 1.18 | -0.012em |208| Body | Old Standard TT | 19px | 400 | 1.7 | -0.003em |209| Lead Paragraph | Old Standard TT | 22px | 400 | 1.6 | -0.005em |210| Byline / Caption | Inter | 12px | 500 | 1.4 | 0.10em uppercase |211| Nav / Section Label | Inter | 13px | 500 | 1.4 | 0.18em uppercase |212| Page Number | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase |213| Issue Number | JetBrains Mono | 13px | 500 | 1.0 | 0.04em tabular-nums |214 215Old Standard TT carries display, drop-caps, pull-quotes, and body — the entire editorial voice in one classical serif. Inter carries only the navigation rail and bylines. Mono carries only page numbers and the issue tag.216 217## 4. Buttons218 219### Primary (Ink Sharp)220```css221background: #1d1f1c;222color: #e6e7d8;223padding: 12px 24px;224border-radius: 2px;225text-transform: uppercase;226letter-spacing: 0.18em;227font-weight: 500;228```229 230The 0.18em tracking is the engraved-masthead voice carried into the subscribe button.231 232### Secondary (Ink Outline)233- Transparent, 1px solid ink, ink text — same near-sharp shape, same wide tracking234 235### Outline & Ghost236- Outline: transparent, 1px hairline at 20% ink237- Ghost: no border, ink-50 uppercase238 239## 5. Cards (rare)240 241The system prefers full-bleed columns separated by 1px hairlines and generous vertical breathing room. When a card is needed (a back-issue tile, a contributor card), it is sharp 2px corners, 1px hairline at 16% ink — never lifted, never shadowed.242 243## 6. Charts244 245Thin precise bars (3px wide, 14px gap). One bar in burgundy, others in 22% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts are reserved for editorial data exhibits and read as broadside graphics.246 247## 7. Tabs248 249Underline 1.5px in burgundy for the active state. Inactive tabs are ink-50 in Inter 500 uppercase 0.18em. The active label often switches to Old Standard TT italic at the same size — the rhythm change.250 251## 8. Spacing252 253- Base 8px (text-baseline aware)254- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200, 280`255- Section padding: 200px desktop, 96px mobile — full editorial breathing room256- Pull-quote padding: 96px above and below257- Drop-cap negative left margin: -16px258 259## 9. Do's & don'ts260 261✅ **Do**262- Use Old Standard TT 700 at 192px for the hero headline — the classical bold at full-bleed263- Open every article with a drop-cap spanning 8 body lines (208px) with a slight negative left margin264- Use full-bleed pull-quote slabs — Old Standard TT italic 64px with 96px breathing room265- Use 19px body — long-form serious reading is the entire premise266- Reserve burgundy for editor's mark + issue-number tag exclusively267 268❌ **Don't**269- Add images or photography to the broadside — the typography earns the entire page270- Use Old Standard TT for nav or UI labels — Inter at 0.18em uppercase is the only sans271- Use a second accent — burgundy alone, on two surfaces272- Round any corner beyond 3px — letterpress precision throughout273- Use 16px body — 19px on 1.7 leading is the editorial-broadside readability minimum274 275---276 277## Tokens278 279> Generated from the same source the live preview renders from.280> Treat the values below as the contract — never substitute approximations.281 282### Colors283 284| Role | Value |285|-----------|-------|286| primary | `#1d1f1c` |287| secondary | `#6b6e64` |288| tertiary | `#1d1f1c` |289| neutral | `#dadbcd` |290| surface | `#e6e7d8` |291 292### Typography293 294- **Display:** Old Standard TT295- **Body:** Old Standard TT296- **Mono:** JetBrains Mono297 298| Role | size / leading / weight / tracking |299|------|------------------------------------|300| Hero | 12rem / 0.86 / 700 / -0.04em |301| H1 | 5.5rem / 0.96 / 700 / -0.025em |302| H2 | 2.25rem / 1.18 / 400 / -0.012em |303| Body | 1.1875rem / 1.7 / 400 / -0.003em |304 305### Radius306 307- sm: `1px`308- md: `2px`309- lg: `3px`310- pill: `9999px`311 312### Shadows313 314- **card:** `none`315- **button:** `none`316 317### Borders318 319- **card:** `1px solid rgba(29,31,28,0.16)`320- **divider:** `rgba(29,31,28,0.20)`321 322### Buttons323 324Four variants, each fully tokenized. The preview renders from these exact values.325 326#### Primary327 328| Property | Value |329|----------|-------|330| shape | `sharp` |331| background | `#1d1f1c` |332| color | `#e6e7d8` |333| border | `none` |334| padding | `12px 24px` |335| fontWeight | `500` |336| fontSize | `0.8125rem` |337| tracking | `0.18em` |338| uppercase | `true` |339 340#### Secondary341 342| Property | Value |343|----------|-------|344| shape | `sharp` |345| background | `transparent` |346| color | `#1d1f1c` |347| border | `1px solid #1d1f1c` |348| padding | `12px 24px` |349| fontWeight | `500` |350| fontSize | `0.8125rem` |351| tracking | `0.18em` |352| uppercase | `true` |353 354#### Outline355 356| Property | Value |357|----------|-------|358| shape | `sharp` |359| background | `transparent` |360| color | `#1d1f1c` |361| border | `1px solid rgba(29,31,28,0.20)` |362| padding | `12px 24px` |363| fontWeight | `500` |364| fontSize | `0.8125rem` |365| tracking | `0.18em` |366| uppercase | `true` |367 368#### Ghost369 370| Property | Value |371|----------|-------|372| shape | `sharp` |373| background | `transparent` |374| color | `#6b6e64` |375| border | `none` |376| padding | `12px 18px` |377| fontWeight | `500` |378| fontSize | `0.8125rem` |379| tracking | `0.18em` |380| uppercase | `true` |381 382### Charts383 384| Property | Value |385|----------|-------|386| variant | `thin-bars` |387| strokeWidth | `1` |388| fillOpacity | `0` |389| gridlines | `false` |390| barGap | `14px` |391| highlight | `single` |392| dotMarker | `false` |393 # 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=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Old Standard TT"', 'serif'], sans: ['"Old Standard TT"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#1d1f1c', secondary: '#6b6e64', accent: '#1d1f1c', neutral: '#dadbcd', surface: '#e6e7d8', }, borderRadius: { sm: '1px', md: '2px', lg: '3px', }, }, },};Billboard-scale fintech. Geometric grotesque at -2.72px tracking, universal pill buttons with generous padding, zero shadows — depth through dark/light alternation only.
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.
Modern AI product surface without the clichés. Geist sans across the board, Geist Mono for prompts and metrics, very fine off-white surfaces with a 1px white inset highlight, a single muted electric-indigo accent reserved for the assistant's response state. Built for AI-first products that want to feel premium without leaning on rainbow gradients.
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.