A research bureau that publishes data the way a quality newspaper does. Cream-paper surfaces, Source Serif 4 for prose, IBM Plex Sans for UI labels, IBM Plex Mono with tabular-nums for every figure, a single rust accent reserved for footnote daggers and the active data point on charts. Built for data journalism, policy research, think-tanks, and white-papers that need to read as authoritative without ever shouting.
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: "Bureau Data"3description: "A research bureau that publishes data the way a quality newspaper does. Cream-paper surfaces, Source Serif 4 for prose, IBM Plex Sans for UI labels, IBM Plex Mono with tabular-nums for every figure, a single rust accent reserved for footnote daggers and the active data point on charts. Built for data journalism, policy research, think-tanks, and white-papers that need to read as authoritative without ever shouting."4tags: [editorial, research, serif, warm, data]5colors:6 primary: "#1f1c17"7 secondary: "#6e685c"8 tertiary: "#1f1c17"9 neutral: "#ece4cd"10 surface: "#f5eed7"11typography:12 display: "Source Serif 4"13 body: "Source Serif 4"14 mono: "IBM Plex Mono"15 scale:16 hero: "5.5rem / 1.02 / 600 / -0.025em"17 h1: "3.25rem / 1.1 / 600 / -0.018em"18 h2: "1.75rem / 1.28 / 600 / -0.012em"19 body: "1.125rem / 1.72 / 400 / -0.003em"20radius:21 sm: 2px22 md: 3px23 lg: 4px24 pill: 9999px25shadows:26 card: none27 button: none28borders:29 card: "1px solid rgba(31,28,23,0.10)"30 divider: rgba(31,28,23,0.14)31buttons:32 primary:33 background: #1f1c1734 color: #f5eed735 border: none36 shape: sharp37 padding: 10px 20px38 font: 500 / 0.8125rem39 secondary:40 background: transparent41 color: #1f1c1742 border: 1px solid rgba(31,28,23,0.20)43 shape: sharp44 padding: 10px 20px45 font: 500 / 0.8125rem46 outline:47 background: transparent48 color: #1f1c1749 border: 1px solid rgba(31,28,23,0.16)50 shape: sharp51 padding: 10px 20px52 font: 500 / 0.8125rem53 ghost:54 background: transparent55 color: #6e685c56 border: none57 shape: sharp58 padding: 10px 14px59 font: 500 / 0.8125rem60charts:61 variant: "thin-bars"62 stroke_width: 1.2563 fill_opacity: 064 gridlines: true65 bar_gap: 5px66 highlight: single67 dot_marker: true68fonts_url: "https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap"69dependencies: ["lucide-react"]70---71 72# Bureau Data73 74## AI Build Instructions75 76> **Read this section before writing any code.** The rules below77> are non-negotiable. Every value used in the UI must come from this78> file's frontmatter — never substitute, approximate, or invent new79> colors, fonts, radii, or shadows. If a value is missing, ask the80> user before adding one.81 82### 1 · Your role83 84You are building UI for a project that has adopted **Bureau Data** as its85design system. Treat `DESIGN.md` as the single source of truth.86Your job is to translate the user's product requirements into87components and pages that look like they were designed by the same88person who authored this file.89 90### 2 · Token compliance91 92- Pull every color, font family, radius, shadow, and spacing value93 from the frontmatter at the top of this file.94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never95 hard-code hex values that bypass the system.96- When a token can be expressed as a CSS variable, declare it once97 in your global stylesheet and reference it everywhere downstream.98- The Google Fonts `<link>` is provided in the Typography section.99 Add it to `<head>` before any component renders.100 101### 3 · Component recipes102 103Use these recipes verbatim when building the corresponding component.104 105#### Buttons106 107Four variants are defined. Pick one — never blend variants or invent a fifth.108 109- **Primary** — sharp shape, bg `#1f1c17`, text `#f5eed7`, padding `10px 20px`, weight `500`.110- **Secondary** — sharp shape, text `#1f1c17`, border `1px solid rgba(31,28,23,0.20)`, padding `10px 20px`, weight `500`.111- **Outline** — sharp shape, text `#1f1c17`, border `1px solid rgba(31,28,23,0.16)`, padding `10px 20px`, weight `500`.112- **Ghost** — sharp shape, text `#6e685c`, padding `10px 14px`, weight `500`.113 114Reach for **primary** as the single dominant CTA per screen.115**Secondary** for the supporting action. **Outline** for tertiary116actions in toolbars. **Ghost** for inline links and table actions.117 118#### Cards119 120- Background: `#f5eed7`121- Border: `1px solid rgba(31,28,23,0.10)`122- Shadow: `none`123- Radius: `radius.lg` (`4px`)124- Internal padding: `20px` for compact cards, `24–28px` for content cards.125 126#### Tabs127 128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.129 130#### Charts131 132- Bar/line variant: `thin-bars`133- Highlight strategy: `single` — emphasize a single bar/point per chart.134 135#### Typography pairings136 137- **Display (`Source Serif 4`)** — h1, h2, hero headlines, brand wordmarks.138- **Body (`Source Serif 4`)** — paragraphs, labels, button text, form inputs.139- **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables.140 141### 4 · Hard constraints142 143Never do any of the following without explicit instruction from the user:144 145- Introduce a new color, font, radius, or shadow that isn't declared above.146- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).147- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.148- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.149- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.150 151### 5 · Before you finish — verify152 153Run through this checklist for every screen you produce:154 155- [ ] Every color used appears in the Colors table above.156- [ ] Headlines use the display font; body copy uses the body font.157- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).158- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.159- [ ] Cards and dividers use the declared border + shadow tokens.160- [ ] No values were invented; if you needed something missing, you stopped and asked.161 162---163 164## 1. Atmosphere165 166Bureau Data publishes research the way a quality newspaper does. The page surface is cream paper `#f5eed7` — the warm tone of a good white paper, never bright. Headlines run in Source Serif 4 at 88px, weight 600, with a tight optical-size variant — text-grade serif that reads as authoritative reporting, not display drama. Body sits in Source Serif 4 at 18px on a 1.72 leading — long-form readable. UI labels switch to IBM Plex Sans for a clean sans counterpoint. Every percentage, count, year, dataset value runs in IBM Plex Mono with tabular-nums — column-aligned to the cell. The single accent is rust `#9c3a1a` that appears only on footnote daggers, the active data point in chart hovers, and the highlighted figure in a sentence — the marks that say "look here, this is the finding."167 168The discipline is in the readability: Source Serif at long-form sizes, generous leading, and the rust used as a single editorial pen-mark per page.169 170**Signature moves**171- Source Serif 4 600 at 88px for headlines — text-grade authority, not display drama172- 18px body on 1.72 leading — long-form readable, white-paper voice173- Cream paper surface `#f5eed7` — warm white-paper, never bright174- Rust `#9c3a1a` exclusively on footnote daggers + active chart point + highlighted figure175- IBM Plex Mono with tabular-nums on every percentage, count, year, dataset value176- Sharp 2-4px radius — the printed-page voice, never pill177 178## 2. Palette179 180### Surfaces181- **Cream Paper** `#f5eed7` — page background (warm white-paper)182- **Cream Lift** `#ece4cd` — secondary surfaces, table headers, sidebar183- **Hairline** `rgba(31,28,23,0.14)` — every divider184 185### Ink186- **Ink** `#1f1c17` — text, headings, primary CTA fill (warm near-black)187- **Ink 50** `#6e685c` — secondary text, mono labels, captions188 189### Accent190- **Rust** `#9c3a1a` — footnote daggers, active chart hover point, highlighted figure191- **Rust Soft** `rgba(156,58,26,0.10)` — chart fill on hovered bar, focus ring192 193## 3. Typography194 195| Role | Font | Size | Weight | Leading | Tracking |196|------|------|------|--------|---------|----------|197| Headline (Hero) | Source Serif 4 | 88px | 600 | 1.02 | -0.025em |198| H1 | Source Serif 4 | 52px | 600 | 1.1 | -0.018em |199| H2 | Source Serif 4 | 28px | 600 | 1.28 | -0.012em |200| Pull Quote | Source Serif 4 (italic) | 24px | 400 | 1.45 | -0.008em |201| Body | Source Serif 4 | 18px | 400 | 1.72 | -0.003em |202| UI / Button | IBM Plex Sans | 13px | 500 | 1.4 | 0 |203| Figure / Percentage | IBM Plex Mono | 14px | 500 | 1.0 | 0 tabular-nums |204| Dataset Value | IBM Plex Mono | 13px | 500 | 1.0 | 0 tabular-nums |205| Footnote / Caption | IBM Plex Mono | 11px | 500 | 1.0 | 0.06em uppercase |206 207Source Serif 4 carries everything that is prose; IBM Plex Sans carries everything that is UI; IBM Plex Mono carries everything that is data. The three roles never overlap.208 209## 4. Buttons210 211### Primary (Ink Sharp)212```css213background: #1f1c17;214color: #f5eed7;215padding: 10px 20px;216border-radius: 3px;217font-weight: 500;218```219 220Sharp 3px corners read as a printed download tag, not a web button.221 222### Secondary (Outline)223- Transparent, 1px hairline at 20% ink, ink text — same sharp shape224 225### Outline & Ghost226- Outline: transparent, 1px hairline at 16% ink227- Ghost: no border, ink-50, hover underlines228 229## 5. Cards230 231```css232background: #f5eed7;233border: 1px solid rgba(31,28,23,0.10);234border-radius: 4px;235box-shadow: none;236```237 238NO shadows. Datapoint cards lift to cream-lift surface with a 1px ink top border (3px wide) — the only chrome.239 240## 6. Charts241 242Thin precise bars (4px wide, 5px gap) with dashed gridlines at 14% ink — used for time-series and ranking charts. One bar in rust (the highlighted finding), others in 22% ink. Line charts at 1.25px ink, ending in a rust dot marker. Y-axis labels in IBM Plex Mono uppercase 11px aligned to the right. The chart-source citation runs below in Plex Mono italic — every chart cites its source.243 244## 7. Tabs245 246Underline 1.5px in ink for the active state. Inactive tabs are ink-50 in IBM Plex Sans 500. Hover lifts to ink. Tabs sit on a 1px hairline baseline.247 248## 8. Spacing249 250- Base 8px (text-baseline aware)251- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 160`252- Section padding: 128px desktop, 64px mobile — long-form rhythm253 254## 9. Do's & don'ts255 256✅ **Do**257- Use Source Serif 4 600 for headlines — text-grade serif at scale, not display drama258- Hold the cream paper surface — bright white reads as web app, beige reads as old textbook259- Reserve rust for footnote daggers + active chart point + highlighted figure exclusively260- Put every percentage, count, year, dataset value in IBM Plex Mono with tabular-nums261- Cite every chart source in Plex Mono italic below the chart262 263❌ **Don't**264- Use Source Serif 4 for UI labels — Plex Sans handles UI, Plex Mono handles data265- Use rust for buttons, accents, or large surfaces — three editorial surfaces only266- Use 16px body — 18px on 1.72 leading is the white-paper readability minimum267- Use uppercase tracking on the primary CTA — this is reporting, not a brass plate268 269---270 271## Tokens272 273> Generated from the same source the live preview renders from.274> Treat the values below as the contract — never substitute approximations.275 276### Colors277 278| Role | Value |279|-----------|-------|280| primary | `#1f1c17` |281| secondary | `#6e685c` |282| tertiary | `#1f1c17` |283| neutral | `#ece4cd` |284| surface | `#f5eed7` |285 286### Typography287 288- **Display:** Source Serif 4289- **Body:** Source Serif 4290- **Mono:** IBM Plex Mono291 292| Role | size / leading / weight / tracking |293|------|------------------------------------|294| Hero | 5.5rem / 1.02 / 600 / -0.025em |295| H1 | 3.25rem / 1.1 / 600 / -0.018em |296| H2 | 1.75rem / 1.28 / 600 / -0.012em |297| Body | 1.125rem / 1.72 / 400 / -0.003em |298 299### Radius300 301- sm: `2px`302- md: `3px`303- lg: `4px`304- pill: `9999px`305 306### Shadows307 308- **card:** `none`309- **button:** `none`310 311### Borders312 313- **card:** `1px solid rgba(31,28,23,0.10)`314- **divider:** `rgba(31,28,23,0.14)`315 316### Buttons317 318Four variants, each fully tokenized. The preview renders from these exact values.319 320#### Primary321 322| Property | Value |323|----------|-------|324| shape | `sharp` |325| background | `#1f1c17` |326| color | `#f5eed7` |327| border | `none` |328| padding | `10px 20px` |329| fontWeight | `500` |330| fontSize | `0.8125rem` |331 332#### Secondary333 334| Property | Value |335|----------|-------|336| shape | `sharp` |337| background | `transparent` |338| color | `#1f1c17` |339| border | `1px solid rgba(31,28,23,0.20)` |340| padding | `10px 20px` |341| fontWeight | `500` |342| fontSize | `0.8125rem` |343 344#### Outline345 346| Property | Value |347|----------|-------|348| shape | `sharp` |349| background | `transparent` |350| color | `#1f1c17` |351| border | `1px solid rgba(31,28,23,0.16)` |352| padding | `10px 20px` |353| fontWeight | `500` |354| fontSize | `0.8125rem` |355 356#### Ghost357 358| Property | Value |359|----------|-------|360| shape | `sharp` |361| background | `transparent` |362| color | `#6e685c` |363| border | `none` |364| padding | `10px 14px` |365| fontWeight | `500` |366| fontSize | `0.8125rem` |367 368### Charts369 370| Property | Value |371|----------|-------|372| variant | `thin-bars` |373| strokeWidth | `1.25` |374| fillOpacity | `0` |375| gridlines | `true` |376| barGap | `5px` |377| highlight | `single` |378| dotMarker | `true` |379 # 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=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Source Serif 4"', 'serif'], sans: ['"Source Serif 4"', 'sans-serif'], mono: ['"IBM Plex Mono"', 'monospace'], }, colors: { primary: '#1f1c17', secondary: '#6e685c', accent: '#1f1c17', neutral: '#ece4cd', surface: '#f5eed7', }, borderRadius: { sm: '2px', md: '3px', lg: '4px', }, }, },};A warm, high-contrast palette rooted in broadsheet newspaper aesthetics.
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 premium command-line aesthetic that earned its calm. JetBrains Mono carries display, body, and labels at three sizes; warm off-white paper for surfaces; precise hairlines instead of cards; a single cobalt accent reserved for the cursor caret, the active path crumb, and the primary action. Built for developer-tool marketing pages, technical documentation hubs, and infra products that want to read as terminal-native without going dark.
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.