Pure black on white. Hard borders, monospace everywhere, zero compromise.
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: "Mono Brutalist"3description: "Pure black on white. Hard borders, monospace everywhere, zero compromise."4tags: [brutalist, minimal, dark]5colors:6 primary: "#000000"7 secondary: "#555555"8 tertiary: "#000000"9 neutral: "#FFFFFF"10 surface: "#FFFFFF"11typography:12 display: "JetBrains Mono"13 body: "JetBrains Mono"14 mono: "JetBrains Mono"15radius:16 sm: 0px17 md: 0px18 lg: 0px19buttons:20 primary:21 background: #00000022 color: #FFFFFF23 border: 2px solid #00000024 shape: sharp25 padding: 12px 24px26 font: mono / 700 / 0.08em27 uppercase: true28 secondary:29 background: #FFFFFF30 color: #00000031 border: 2px solid #00000032 shape: sharp33 padding: 12px 24px34 font: mono / 700 / 0.08em35 uppercase: true36 outline:37 background: transparent38 color: #00000039 border: 2px dashed #00000040 shape: sharp41 padding: 12px 24px42 font: mono / 700 / 0.08em43 uppercase: true44 ghost:45 background: transparent46 color: #00000047 border: none48 shape: sharp49 padding: 10px 050 font: mono / 700 / 0.08em51 uppercase: true52 hover: underline53charts:54 variant: flat55 bar_gap: 2px56 highlight: all57fonts_url: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap"58dependencies: ["lucide-react"]59---60 61# Mono Brutalist62 63## AI Build Instructions64 65> **Read this section before writing any code.** The rules below66> are non-negotiable. Every value used in the UI must come from this67> file's frontmatter — never substitute, approximate, or invent new68> colors, fonts, radii, or shadows. If a value is missing, ask the69> user before adding one.70 71### 1 · Your role72 73You are building UI for a project that has adopted **Mono Brutalist** as its74design system. Treat `DESIGN.md` as the single source of truth.75Your job is to translate the user's product requirements into76components and pages that look like they were designed by the same77person who authored this file.78 79### 2 · Token compliance80 81- Pull every color, font family, radius, shadow, and spacing value82 from the frontmatter at the top of this file.83- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never84 hard-code hex values that bypass the system.85- When a token can be expressed as a CSS variable, declare it once86 in your global stylesheet and reference it everywhere downstream.87- The Google Fonts `<link>` is provided in the Typography section.88 Add it to `<head>` before any component renders.89 90### 3 · Component recipes91 92Use these recipes verbatim when building the corresponding component.93 94#### Buttons95 96Four variants are defined. Pick one — never blend variants or invent a fifth.97 98- **Primary** — sharp shape, bg `#000000`, text `#FFFFFF`, border `2px solid #000000`, padding `12px 24px`, weight `700`, uppercased.99- **Secondary** — sharp shape, bg `#FFFFFF`, text `#000000`, border `2px solid #000000`, padding `12px 24px`, weight `700`, uppercased.100- **Outline** — sharp shape, text `#000000`, border `2px dashed #000000`, padding `12px 24px`, weight `700`, uppercased.101- **Ghost** — sharp shape, text `#000000`, padding `10px 0`, weight `700`, uppercased.102 103Reach for **primary** as the single dominant CTA per screen.104**Secondary** for the supporting action. **Outline** for tertiary105actions in toolbars. **Ghost** for inline links and table actions.106 107#### Cards108 109- Background: `#FFFFFF`110- Radius: `radius.lg` (`0px`)111- Internal padding: `20px` for compact cards, `24–28px` for content cards.112 113#### Tabs114 115Variant: `brutalist`. Hard rectangular tabs with thick borders. Active tab is fully filled in the primary color.116Tabs are uppercased with `0.1em` tracking.117 118#### Charts119 120- Bar/line variant: `flat`121- Highlight strategy: `all` — emphasize a single bar/point per chart.122 123#### Typography pairings124 125- **Display (`JetBrains Mono`)** — h1, h2, hero headlines, brand wordmarks.126- **Body (`JetBrains Mono`)** — paragraphs, labels, button text, form inputs.127- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.128 129### 4 · Hard constraints130 131Never do any of the following without explicit instruction from the user:132 133- Introduce a new color, font, radius, or shadow that isn't declared above.134- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).135- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.136- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.137- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.138 139### 5 · Before you finish — verify140 141Run through this checklist for every screen you produce:142 143- [ ] Every color used appears in the Colors table above.144- [ ] Headlines use the display font; body copy uses the body font.145- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).146- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.147- [ ] Cards and dividers use the declared border + shadow tokens.148- [ ] No values were invented; if you needed something missing, you stopped and asked.149 150---151 152## Overview153Raw, uncompromising, system-font monospace. No color, no curves, no shadow. Structure and typography do all the work.154 155## Colors156- **Primary #000000** — pure black. Borders, text, fills.157- **Secondary #555555** — only for de-emphasized meta.158- **Neutral / Surface #FFFFFF** — pure white.159 160## Typography161**JetBrains Mono** at every level. Use weight (400/500/700/800) and uppercase for hierarchy.162 163## Spacing1648px grid. Sections 80px. Tight, deliberate.165 166## Components167Hard 2px black borders. Zero border-radius. Zero shadows. Buttons uppercase.168 169## Icons170`lucide-react` with stroke width 2. Always black.171 172## Do's and Don'ts173- ✅ Use uppercase for buttons and labels.174- ✅ Keep borders crisp at 2px.175- ❌ No rounded corners, anywhere.176- ❌ No grays except #555 for meta.177 178---179 180## Tokens181 182> Generated from the same source the live preview renders from.183> Treat the values below as the contract — never substitute approximations.184 185### Colors186 187| Role | Value |188|-----------|-------|189| primary | `#000000` |190| secondary | `#555555` |191| tertiary | `#000000` |192| neutral | `#FFFFFF` |193| surface | `#FFFFFF` |194 195### Typography196 197- **Display:** JetBrains Mono198- **Body:** JetBrains Mono199- **Mono:** JetBrains Mono200 201### Radius202 203- sm: `0px`204- md: `0px`205- lg: `0px`206 207### Buttons208 209Four variants, each fully tokenized. The preview renders from these exact values.210 211#### Primary212 213| Property | Value |214|----------|-------|215| shape | `sharp` |216| background | `#000000` |217| color | `#FFFFFF` |218| border | `2px solid #000000` |219| padding | `12px 24px` |220| fontFamily | `mono` |221| fontWeight | `700` |222| tracking | `0.08em` |223| uppercase | `true` |224 225#### Secondary226 227| Property | Value |228|----------|-------|229| shape | `sharp` |230| background | `#FFFFFF` |231| color | `#000000` |232| border | `2px solid #000000` |233| padding | `12px 24px` |234| fontFamily | `mono` |235| fontWeight | `700` |236| tracking | `0.08em` |237| uppercase | `true` |238 239#### Outline240 241| Property | Value |242|----------|-------|243| shape | `sharp` |244| background | `transparent` |245| color | `#000000` |246| border | `2px dashed #000000` |247| padding | `12px 24px` |248| fontFamily | `mono` |249| fontWeight | `700` |250| tracking | `0.08em` |251| uppercase | `true` |252 253#### Ghost254 255| Property | Value |256|----------|-------|257| shape | `sharp` |258| background | `transparent` |259| color | `#000000` |260| border | `none` |261| padding | `10px 0` |262| fontFamily | `mono` |263| fontWeight | `700` |264| tracking | `0.08em` |265| uppercase | `true` |266| hoverHint | `underline` |267 268### Charts269 270| Property | Value |271|----------|-------|272| variant | `flat` |273| barGap | `2px` |274| highlight | `all` |275 # 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=JetBrains+Mono:wght@400;500;700;800&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"JetBrains Mono"', 'serif'], sans: ['"JetBrains Mono"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#000000', secondary: '#555555', accent: '#000000', neutral: '#FFFFFF', surface: '#FFFFFF', }, borderRadius: { sm: '0px', md: '0px', lg: '0px', }, }, },};Emerald on near-black. Monospace developer aesthetic with thin borders.
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 printed quarterly that happens to live on the web. Soft blush-bone surfaces, Fraunces 600 italic display headlines, Geist Mono for marginalia, a single deep plum accent on drop caps and pull-quote bars. Built for journals, newsletters, and slow-content brands that want warmth without preciousness.
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.