A government document made beautiful. Source Serif 4 hero, 3px black borders that read as legal-page rules, IBM Plex Mono for clause numbers and timestamps, a single mustard-stamp accent that lives only on the approval seal and the active filing tab. Built for legal tech, civic, and document-heavy products.
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: "Statute Press"3description: "A government document made beautiful. Source Serif 4 hero, 3px black borders that read as legal-page rules, IBM Plex Mono for clause numbers and timestamps, a single mustard-stamp accent that lives only on the approval seal and the active filing tab. Built for legal tech, civic, and document-heavy products."4tags: [brutalist, editorial, legal, premium, modern]5colors:6 primary: "#0d0d0d"7 secondary: "#5d5d5d"8 tertiary: "#0d0d0d"9 neutral: "#ece6d4"10 surface: "#f5efde"11typography:12 display: "Source Serif 4"13 body: Inter14 mono: "IBM Plex Mono"15 scale:16 hero: "5.5rem / 0.98 / 700 / -0.025em"17 h1: "3.25rem / 1.06 / 700 / -0.02em"18 h2: "1.875rem / 1.2 / 600 / -0.012em"19 body: "1.0625rem / 1.65 / 400 / 0"20radius:21 sm: 0px22 md: 0px23 lg: 0px24 pill: 9999px25shadows:26 card: none27 button: none28borders:29 card: "3px solid #0d0d0d"30 divider: rgba(13,13,13,0.18)31buttons:32 primary:33 background: #0d0d0d34 color: #f5efde35 border: 3px solid #0d0d0d36 shape: sharp37 padding: 11px 22px38 font: 600 / 0.8125rem / 0.06em39 uppercase: true40 secondary:41 background: #f5efde42 color: #0d0d0d43 border: 3px solid #0d0d0d44 shape: sharp45 padding: 11px 22px46 font: 600 / 0.8125rem / 0.06em47 uppercase: true48 outline:49 background: transparent50 color: #0d0d0d51 border: 1.5px solid #0d0d0d52 shape: sharp53 padding: 11px 22px54 font: 600 / 0.8125rem / 0.06em55 uppercase: true56 ghost:57 background: transparent58 color: #5d5d5d59 border: none60 shape: sharp61 padding: 11px 18px62 font: 600 / 0.8125rem / 0.06em63 uppercase: true64charts:65 variant: "thin-bars"66 stroke_width: 1.2567 fill_opacity: 068 gridlines: false69 bar_gap: 12px70 highlight: single71 dot_marker: false72fonts_url: "https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap"73dependencies: ["lucide-react"]74---75 76# Statute 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 **Statute 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 `#0d0d0d`, text `#f5efde`, border `3px solid #0d0d0d`, padding `11px 22px`, weight `600`, uppercased.114- **Secondary** — sharp shape, bg `#f5efde`, text `#0d0d0d`, border `3px solid #0d0d0d`, padding `11px 22px`, weight `600`, uppercased.115- **Outline** — sharp shape, text `#0d0d0d`, border `1.5px solid #0d0d0d`, padding `11px 22px`, weight `600`, uppercased.116- **Ghost** — sharp shape, text `#5d5d5d`, padding `11px 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: `#f5efde`125- Border: `3px solid #0d0d0d`126- Shadow: `none`127- Radius: `radius.lg` (`0px`)128- Internal padding: `20px` for compact cards, `24–28px` for content cards.129 130#### Tabs131 132Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle 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 (`Source Serif 4`)** — h1, h2, hero headlines, brand wordmarks.143- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.144- **Mono (`IBM Plex 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 171Statute Press is a government filing made beautiful. The page surface is parchment `#f5efde` — closer to legal-pad cream than to white. Headlines run in Source Serif 4 at 88px, weight 700, with the optical-sized glyphs holding their authority at scale. Body sits in Inter at 17px on a 1.65 leading. Clause numbers, dockets, timestamps, and footnote references run in IBM Plex Mono uppercase. Cards and primary buttons are bordered with a hard 3px ink rule — the kind of border that reads as a legal-page divider, not as a CSS choice. The single accent is a mustard `#c89a2e` that appears only on the approval-seal badge and the active filing tab — like a rubber stamp on a contract.172 173The discipline is in the institutional restraint: serif display + sans body + mono numerals, hard 3px borders, parchment surface, and one mustard stamp.174 175**Signature moves**176- Source Serif 4 700 at 88px hero with optical sizing — institutional gravitas177- Hard 3px ink borders on cards and primary buttons — the legal-page rule178- Parchment surface `#f5efde` — never white, never grey179- Mustard `#c89a2e` only as the approval seal + active filing tab — never as a fill180- All UI labels uppercase 0.06em — that's the docket voice181- IBM Plex Mono for every clause number, timestamp, and footnote ref182 183## 2. Palette184 185### Surfaces186- **Parchment** `#f5efde` — page background (warm legal-pad cream)187- **Parchment Lift** `#ece6d4` — secondary surfaces, table headers188- **Hairline** `rgba(13,13,13,0.18)` — internal dividers189- **Hard Rule** `#0d0d0d` — the 3px legal border190 191### Ink192- **Ink** `#0d0d0d` — text, headings, primary CTA fill193- **Ink 60** `#5d5d5d` — secondary text194 195### Accent196- **Mustard Stamp** `#c89a2e` — approval seal, active filing tab border197- **Mustard Soft** `rgba(200,154,46,0.16)` — focus ring, hovered tab background198 199## 3. Typography200 201| Role | Font | Size | Weight | Leading | Tracking |202|------|------|------|--------|---------|----------|203| Hero | Source Serif 4 | 88px | 700 | 0.98 | -0.025em |204| H1 | Source Serif 4 | 52px | 700 | 1.06 | -0.02em |205| H2 | Source Serif 4 | 30px | 600 | 1.2 | -0.012em |206| Body | Inter | 17px | 400 | 1.65 | 0 |207| UI / Button | Inter | 13px | 600 | 1.4 | 0.06em uppercase |208| Clause / Mono | IBM Plex Mono | 11px | 500 | 1.0 | 0.08em uppercase |209| Filing Number | IBM Plex Mono | 14px | 600 | 1.0 | 0 tabular-nums |210 211Source Serif 4 uses optical sizing — at 88px the glyphs gain serif weight that smaller sizes don't show. Hold serif to display only; body is Inter.212 213## 4. Buttons214 215### Primary (Ink Slab with Rule)216```css217background: #0d0d0d;218color: #f5efde;219padding: 11px 22px;220border: 3px solid #0d0d0d;221border-radius: 0;222text-transform: uppercase;223letter-spacing: 0.06em;224```225 226The 3px border on the dark button is invisible on its own background — but it adds 3px of mass that reads as institutional weight. On the secondary it shows as a hard frame.227 228### Secondary (Parchment with Hard Rule)229- Parchment background, 3px solid ink border, ink text — same uppercase voice230 231### Outline & Ghost232- Outline: 1.5px solid ink — for inline secondary actions233- Ghost: no border, ink-60, hover underlines234 235## 5. Cards236 237```css238background: #f5efde;239border: 3px solid #0d0d0d;240border-radius: 0;241box-shadow: none;242```243 244The 3px hard rule IS the card. No shadows, no inset highlights, no soft fills. Featured cards (the approved filing) get a mustard stamp badge in the top-right corner — that is the only place mustard appears as a fill.245 246## 6. Charts247 248Thin precise bars (3px wide, 12px gap). One bar in mustard, others in 22% ink. NO gridlines. Line charts at 1.25px ink with no fill. Y-axis labels in IBM Plex Mono uppercase 11px. The chart reads as an exhibit attached to a filing.249 250## 7. Tabs251 252Boxed tabs with 1.5px ink border and 0px radius. Active = parchment-lift background, 2px mustard top border, ink text in uppercase 0.06em. Inactive = transparent, ink-60 uppercase. Reads like the index tabs on a hanging file folder.253 254## 8. Spacing255 256- Base 4px257- Scale: `4, 8, 12, 16, 24, 32, 48, 64, 96, 128`258- Section padding: 128px desktop, 64px mobile259 260## 9. Do's & don'ts261 262✅ **Do**263- Use Source Serif 4 700 at 88px for the hero — the optical-sized serif IS institutional gravitas264- Hold the parchment surface `#f5efde` — white reads as web app, grey reads as ledger265- Use the 3px hard rule on cards and primary/secondary buttons — that's the legal-page divider266- Reserve mustard for the approval stamp + active filing tab — never as a button or text fill267 268❌ **Don't**269- Use any radius — sharp 0px is institutional270- Add card shadows — the 3px border carries all the weight271- Use a second accent — mustard alone, on the stamp and the tab272- Use Source Serif at lower than 600 — anything lighter loses the serif authority273 274---275 276## Tokens277 278> Generated from the same source the live preview renders from.279> Treat the values below as the contract — never substitute approximations.280 281### Colors282 283| Role | Value |284|-----------|-------|285| primary | `#0d0d0d` |286| secondary | `#5d5d5d` |287| tertiary | `#0d0d0d` |288| neutral | `#ece6d4` |289| surface | `#f5efde` |290 291### Typography292 293- **Display:** Source Serif 4294- **Body:** Inter295- **Mono:** IBM Plex Mono296 297| Role | size / leading / weight / tracking |298|------|------------------------------------|299| Hero | 5.5rem / 0.98 / 700 / -0.025em |300| H1 | 3.25rem / 1.06 / 700 / -0.02em |301| H2 | 1.875rem / 1.2 / 600 / -0.012em |302| Body | 1.0625rem / 1.65 / 400 / 0 |303 304### Radius305 306- sm: `0px`307- md: `0px`308- lg: `0px`309- pill: `9999px`310 311### Shadows312 313- **card:** `none`314- **button:** `none`315 316### Borders317 318- **card:** `3px solid #0d0d0d`319- **divider:** `rgba(13,13,13,0.18)`320 321### Buttons322 323Four variants, each fully tokenized. The preview renders from these exact values.324 325#### Primary326 327| Property | Value |328|----------|-------|329| shape | `sharp` |330| background | `#0d0d0d` |331| color | `#f5efde` |332| border | `3px solid #0d0d0d` |333| padding | `11px 22px` |334| fontWeight | `600` |335| fontSize | `0.8125rem` |336| tracking | `0.06em` |337| uppercase | `true` |338 339#### Secondary340 341| Property | Value |342|----------|-------|343| shape | `sharp` |344| background | `#f5efde` |345| color | `#0d0d0d` |346| border | `3px solid #0d0d0d` |347| padding | `11px 22px` |348| fontWeight | `600` |349| fontSize | `0.8125rem` |350| tracking | `0.06em` |351| uppercase | `true` |352 353#### Outline354 355| Property | Value |356|----------|-------|357| shape | `sharp` |358| background | `transparent` |359| color | `#0d0d0d` |360| border | `1.5px solid #0d0d0d` |361| padding | `11px 22px` |362| fontWeight | `600` |363| fontSize | `0.8125rem` |364| tracking | `0.06em` |365| uppercase | `true` |366 367#### Ghost368 369| Property | Value |370|----------|-------|371| shape | `sharp` |372| background | `transparent` |373| color | `#5d5d5d` |374| border | `none` |375| padding | `11px 18px` |376| fontWeight | `600` |377| fontSize | `0.8125rem` |378| tracking | `0.06em` |379| uppercase | `true` |380 381### Charts382 383| Property | Value |384|----------|-------|385| variant | `thin-bars` |386| strokeWidth | `1.25` |387| fillOpacity | `0` |388| gridlines | `false` |389| barGap | `12px` |390| highlight | `single` |391| dotMarker | `false` |392 # 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:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter: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: ['"Inter"', 'sans-serif'], mono: ['"IBM Plex Mono"', 'monospace'], }, colors: { primary: '#0d0d0d', secondary: '#5d5d5d', accent: '#0d0d0d', neutral: '#ece6d4', surface: '#f5efde', }, borderRadius: { sm: '0px', md: '0px', lg: '0px', }, }, },};Crypto without the neon cliché. Dark slate surfaces, Geist sans for prose and Geist Mono with tabular numerals for every figure, a single cool mint accent reserved for positive deltas. Built for crypto exchanges, DeFi dashboards, and on-chain analytics that want to look serious — no glow, no purple-blue gradient, no rocket emoji.
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.
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.