design.md
Back to directory
brutalist · minimal · dark

Mono Brutalist.

Pure black on white. Hard borders, monospace everywhere, zero compromise.

01 · Preview

The kitchen sink.

Mono.app
ProductPricingDocsAbout
Sign inGet started
brutalist · minimal · dark

Build with Mono Brutalist.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational
01 · Color

Palette

primary
#000000
secondary
#555555
tertiary
#000000
neutral
#FFFFFF
surface
#FFFFFF
02 · Typography

Type scale

display
The quick brown fox
h1
A major section heading
h2
A subsection title
body
Body copy in the system's body font.
03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →
Disabled
04 · Inputs

Form controls

Email
iris@studio.com
Password
••••••••••••
Bio
Designing for long-form publications. Based in Kyoto.
05 · Choices

Select & toggle

Plan
Starter
Free forever
Pro
$18 / month
Team
$48 / month
Toggles
Public profile
Require two-factor
Auto-accept invites
06 · Tags & badges

Labeling

NeutralAccentSolidWith dot
NEWBETAv2.0LIVE
07 · Cards

Cards

Feature
Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →
Metric
24,810
▲ +12.4% vs last week
08 · Navigation

Tabs & breadcrumb

Overview
Analytics
Members
Workspace/Projects/Heritage System
09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px
2px
5px
8px · base
10px
12px
14px
16px
18px
20px
21px
10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm
0px
md
0px
lg
0px
pill
999px
11 · Elevation

Depth & elevation

00 · Flat
Elevation 00
01 · Low
Elevation 01
02 · Medium
Elevation 02
03 · High
Elevation 03
12 · Data

Charts

Weekly revenue
$48,210
M
T
W
T
F
S
S
Active sessions
2,184
02 · Pro tokens

The states behind the resting style.

ArchetypeBrutalist

Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected
Account
sam@studio.com
dragging

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
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: 0px
17  md: 0px
18  lg: 0px
19buttons:
20  primary:
21    background: #000000
22    color: #FFFFFF
23    border: 2px solid #000000
24    shape: sharp
25    padding: 12px 24px
26    font: mono / 700 / 0.08em
27    uppercase: true
28  secondary:
29    background: #FFFFFF
30    color: #000000
31    border: 2px solid #000000
32    shape: sharp
33    padding: 12px 24px
34    font: mono / 700 / 0.08em
35    uppercase: true
36  outline:
37    background: transparent
38    color: #000000
39    border: 2px dashed #000000
40    shape: sharp
41    padding: 12px 24px
42    font: mono / 700 / 0.08em
43    uppercase: true
44  ghost:
45    background: transparent
46    color: #000000
47    border: none
48    shape: sharp
49    padding: 10px 0
50    font: mono / 700 / 0.08em
51    uppercase: true
52    hover: underline
53charts:
54  variant: flat
55  bar_gap: 2px
56  highlight: all
57fonts_url: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap"
58dependencies: ["lucide-react"]
59---
60 
61# Mono Brutalist
62 
63## AI Build Instructions
64 
65> **Read this section before writing any code.** The rules below
66> are non-negotiable. Every value used in the UI must come from this
67> file's frontmatter — never substitute, approximate, or invent new
68> colors, fonts, radii, or shadows. If a value is missing, ask the
69> user before adding one.
70 
71### 1 · Your role
72 
73You are building UI for a project that has adopted **Mono Brutalist** as its
74design system. Treat `DESIGN.md` as the single source of truth.
75Your job is to translate the user's product requirements into
76components and pages that look like they were designed by the same
77person who authored this file.
78 
79### 2 · Token compliance
80 
81- Pull every color, font family, radius, shadow, and spacing value
82  from the frontmatter at the top of this file.
83- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
84  hard-code hex values that bypass the system.
85- When a token can be expressed as a CSS variable, declare it once
86  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 recipes
91 
92Use these recipes verbatim when building the corresponding component.
93 
94#### Buttons
95 
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 tertiary
105actions in toolbars. **Ghost** for inline links and table actions.
106 
107#### Cards
108 
109- Background: `#FFFFFF`
110- Radius: `radius.lg` (`0px`)
111- Internal padding: `20px` for compact cards, `24–28px` for content cards.
112 
113#### Tabs
114 
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#### Charts
119 
120- Bar/line variant: `flat`
121- Highlight strategy: `all` — emphasize a single bar/point per chart.
122 
123#### Typography pairings
124 
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 constraints
130 
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 — verify
140 
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## Overview
153Raw, uncompromising, system-font monospace. No color, no curves, no shadow. Structure and typography do all the work.
154 
155## Colors
156- **Primary #000000** — pure black. Borders, text, fills.
157- **Secondary #555555** — only for de-emphasized meta.
158- **Neutral / Surface #FFFFFF** — pure white.
159 
160## Typography
161**JetBrains Mono** at every level. Use weight (400/500/700/800) and uppercase for hierarchy.
162 
163## Spacing
1648px grid. Sections 80px. Tight, deliberate.
165 
166## Components
167Hard 2px black borders. Zero border-radius. Zero shadows. Buttons uppercase.
168 
169## Icons
170`lucide-react` with stroke width 2. Always black.
171 
172## Do's and Don'ts
173- ✅ 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## Tokens
181 
182> Generated from the same source the live preview renders from.
183> Treat the values below as the contract — never substitute approximations.
184 
185### Colors
186 
187| Role      | Value |
188|-----------|-------|
189| primary   | `#000000` |
190| secondary | `#555555` |
191| tertiary  | `#000000` |
192| neutral   | `#FFFFFF` |
193| surface   | `#FFFFFF` |
194 
195### Typography
196 
197- **Display:** JetBrains Mono
198- **Body:** JetBrains Mono
199- **Mono:** JetBrains Mono
200 
201### Radius
202 
203- sm: `0px`
204- md: `0px`
205- lg: `0px`
206 
207### Buttons
208 
209Four variants, each fully tokenized. The preview renders from these exact values.
210 
211#### Primary
212 
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#### Secondary
226 
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#### Outline
240 
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#### Ghost
254 
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### Charts
269 
270| Property | Value |
271|----------|-------|
272| variant | `flat` |
273| barGap | `2px` |
274| highlight | `all` |
275 
276---
277 
278## Pro tokens
279 
280> Production-fidelity tokens. States, density, motion, elevation,
281> content rules and a measured WCAG contract — derived from the
282> resting tokens unless explicitly authored.
283 
284### States
285 
286#### Button
287 
288- **hover** — shadow: `4px 4px 0 0 #000000`, transform: `translate(-2px, -2px)`
289- **focus** — outline: `2px solid #000000`, outline-offset: `3px`
290- **active** — shadow: `none`, transform: `translate(0, 0)`
291- **disabled** — opacity: `0.4`, filter: `grayscale(0.4)`
292- **loading** — opacity: `0.6`
293- **selected** — bg: `#000000`, color: `#FFFFFF`
294 
295#### Input
296 
297- **hover** — border: `2px solid #000000`
298- **focus** — border: `2px solid #000000`, shadow: `4px 4px 0 0 #000000`
299- **disabled** — bg: `rgba(0, 0, 0, 0.05)`, opacity: `0.4`
300- **error** — border: `2px solid #B91C1C`, shadow: `4px 4px 0 0 #B91C1C`
301 
302#### Card
303 
304- **hover** — shadow: `6px 6px 0 0 #000000`, transform: `translate(-3px, -3px)`
305- **selected** — border: `3px solid #000000`
306- **dragging** — shadow: `8px 8px 0 0 #000000`, transform: `rotate(-1deg) scale(1.02)`
307 
308#### Tab
309 
310- **hover** — bg: `rgba(0, 0, 0, 0.08)`
311- **focus** — outline: `2px solid #000000`, outline-offset: `2px`
312- **selected** — bg: `#000000`, color: `#FFFFFF`
313 
314### Density
315 
316| Mode | padding × | row × | body | radius × | Use for |
317|------|-----------|-------|------|----------|---------|
318| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
319| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
320| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
321 
322### Motion
323 
324**Signature — Hard cut.** No animation. Transitions are cuts — the state switches, the eye follows. Brutalism means no softening.
325 
326```css
327transition: none;
328```
329 
330| Token | Value |
331|-------|-------|
332| duration.instant | `0ms` |
333| duration.fast | `50ms` |
334| duration.base | `100ms` |
335| duration.slow | `150ms` |
336| easing.standard | `linear` |
337| easing.decelerate | `linear` |
338| easing.accelerate | `linear` |
339| easing.spring | `steps(3, end)` |
340 
341### Elevation
342 
343Five-level scale, system-specific recipe.
344 
345| Level | Shadow | Recipe |
346|-------|--------|--------|
347| level0 | `none` | Flat — the border carries the separation. |
348| level1 | `2px 2px 0 0 #000000` | Hard offset 2/2, no blur. |
349| level2 | `4px 4px 0 0 #000000` | Hard offset 4/4 — cards. |
350| level3 | `6px 6px 0 0 #000000` | Hard offset 6/6 — dialogs. |
351| level4 | `8px 8px 0 0 #000000` | Hard offset 8/8 — modals, thicker border. |
352 
353### Content
354 
355- **measure:** `64ch` (max line length for body prose)
356- **paragraph spacing:** `1.2em`
357- **list indent:** `1.5em`
358- **list gap:** `0.5em`
359- **link:** color `#000000`, underline `always`
360- **blockquote:** border `4px solid #000000`, padding `0.8em 1em`
361- **code:** background `#000000`, color `#FFFFFF`
362 
363### Accessibility (WCAG 2.1)
364 
365**Overall:** AAA
366 
367| Pair | Ratio | Required | Grade | Suggested fix |
368|------|-------|----------|-------|---------------|
369| Body text on surface | 21:1 | AA | AAA | — |
370| Body text on canvas | 21:1 | AA | AAA | — |
371| Muted text on surface | 7.46:1 | AA | AAA | — |
372| Accent on surface | 21:1 | AA-Large | AAA | — |
373| Accent on canvas | 21:1 | AA-Large | AAA | — |
374
04 · How to use it

Wire it into your agent.

markdown
# 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.
05 · Required setup

Three snippets.

Google Fonts link

html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export 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',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Arcade Night

Esports broadcast in dark mode. Near-black surfaces, sharp display serif paired with a square mono, knife-edge corners, a single high-voltage lime accent. Built for tournaments and launch events.

darkgamingeventboldpremium
Arcade.app
ProductPricingDocsAbout
Sign inGet started
dark · gaming · event

Build with Arcade Night.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational

Linear Orbit

Hairline-thin product workspace. Cool off-white surfaces, Inter Display with tight tracking, a single indigo accent, every divider 1px at 6% ink. Engineered calm.

developerminimalpremiumsaasmodern
Linear.app
ProductPricingDocsAbout
Sign inGet started
developer · minimal · premium

Build with Linear Orbit.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational