design.md
Back to directory
dark · minimal · brutalist

Dark Terminal.

Emerald on near-black. Monospace developer aesthetic with thin borders.

01 · Preview

The kitchen sink.

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

Build with Dark Terminal.

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
#E8E8E8
secondary
#7A7A7A
tertiary
#10B981
neutral
#0A0A0A
surface
#141414
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
2px
md
4px
lg
4px
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: "Dark Terminal"
3description: "Emerald on near-black. Monospace developer aesthetic with thin borders."
4tags: [dark, minimal, brutalist]
5colors:
6  primary:   "#E8E8E8"
7  secondary: "#7A7A7A"
8  tertiary:  "#10B981"
9  neutral:   "#0A0A0A"
10  surface:   "#141414"
11typography:
12  display: "JetBrains Mono"
13  body:    Inter
14  mono:    "JetBrains Mono"
15radius:
16  sm: 2px
17  md: 4px
18  lg: 4px
19buttons:
20  primary:
21    background: #00FF88
22    color: #000000
23    border: none
24    shape: sharp
25    padding: 10px 20px
26    font: mono / 700 / 0.06em
27    uppercase: true
28  secondary:
29    background: #0A0A0A
30    color: #00FF88
31    border: 1px solid #00FF88
32    shape: sharp
33    padding: 10px 20px
34    font: mono / 600 / 0.06em
35    uppercase: true
36  outline:
37    background: transparent
38    color: #7A7A7A
39    border: 1px solid #2A2A2A
40    shape: sharp
41    padding: 10px 20px
42    font: mono / 500 / 0.06em
43    uppercase: true
44  ghost:
45    background: transparent
46    color: #00FF88
47    border: none
48    shape: sharp
49    padding: 10px 0
50    font: mono / 500
51    hover: underline
52charts:
53  variant: "thin-bars"
54  gridlines: true
55  bar_gap: 10px
56  highlight: all
57fonts_url: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap"
58dependencies: ["lucide-react"]
59---
60 
61# Dark Terminal
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 **Dark Terminal** 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 `#00FF88`, text `#000000`, padding `10px 20px`, weight `700`, uppercased.
99- **Secondary** — sharp shape, bg `#0A0A0A`, text `#00FF88`, border `1px solid #00FF88`, padding `10px 20px`, weight `600`, uppercased.
100- **Outline** — sharp shape, text `#7A7A7A`, border `1px solid #2A2A2A`, padding `10px 20px`, weight `500`, uppercased.
101- **Ghost** — sharp shape, text `#00FF88`, padding `10px 0`, weight `500`.
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: `#141414`
110- Radius: `radius.lg` (`4px`)
111- Internal padding: `20px` for compact cards, `24–28px` for content cards.
112 
113#### Tabs
114 
115Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill.
116Tabs are uppercased with `0.06em` tracking.
117 
118#### Charts
119 
120- Bar/line variant: `thin-bars`
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 (`Inter`)** — 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
153Inspired by terminal emulators and developer tooling. Quiet near-black background, emerald accent for action and status, monospace for headers.
154 
155## Colors
156- **Primary #E8E8E8** — body text.
157- **Secondary #7A7A7A** — meta.
158- **Tertiary #10B981** — emerald. Buttons, success, links.
159- **Neutral #0A0A0A** — page background.
160- **Surface #141414** — cards.
161 
162## Typography
163**JetBrains Mono** for headlines and code. **Inter** for prose to keep readability.
164 
165## Spacing
1664px grid, 80px sections.
167 
168## Components
169Thin 1px borders (#262626). 4px radii. No shadows.
170 
171## Icons
172`lucide-react`, stroke width 1.5, inheriting text color. Use emerald only on status icons (check, success).
173 
174## Do's and Don'ts
175- ✅ Use emerald for active/success states.
176- ✅ Keep contrast high — never gray-on-gray text.
177- ❌ Don't introduce a second accent color.
178- ❌ Don't use shadows on dark surfaces.
179 
180---
181 
182## Tokens
183 
184> Generated from the same source the live preview renders from.
185> Treat the values below as the contract — never substitute approximations.
186 
187### Colors
188 
189| Role      | Value |
190|-----------|-------|
191| primary   | `#E8E8E8` |
192| secondary | `#7A7A7A` |
193| tertiary  | `#10B981` |
194| neutral   | `#0A0A0A` |
195| surface   | `#141414` |
196 
197### Typography
198 
199- **Display:** JetBrains Mono
200- **Body:** Inter
201- **Mono:** JetBrains Mono
202 
203### Radius
204 
205- sm: `2px`
206- md: `4px`
207- lg: `4px`
208 
209### Buttons
210 
211Four variants, each fully tokenized. The preview renders from these exact values.
212 
213#### Primary
214 
215| Property | Value |
216|----------|-------|
217| shape | `sharp` |
218| background | `#00FF88` |
219| color | `#000000` |
220| border | `none` |
221| padding | `10px 20px` |
222| fontFamily | `mono` |
223| fontWeight | `700` |
224| tracking | `0.06em` |
225| uppercase | `true` |
226 
227#### Secondary
228 
229| Property | Value |
230|----------|-------|
231| shape | `sharp` |
232| background | `#0A0A0A` |
233| color | `#00FF88` |
234| border | `1px solid #00FF88` |
235| padding | `10px 20px` |
236| fontFamily | `mono` |
237| fontWeight | `600` |
238| tracking | `0.06em` |
239| uppercase | `true` |
240 
241#### Outline
242 
243| Property | Value |
244|----------|-------|
245| shape | `sharp` |
246| background | `transparent` |
247| color | `#7A7A7A` |
248| border | `1px solid #2A2A2A` |
249| padding | `10px 20px` |
250| fontFamily | `mono` |
251| fontWeight | `500` |
252| tracking | `0.06em` |
253| uppercase | `true` |
254 
255#### Ghost
256 
257| Property | Value |
258|----------|-------|
259| shape | `sharp` |
260| background | `transparent` |
261| color | `#00FF88` |
262| border | `none` |
263| padding | `10px 0` |
264| fontFamily | `mono` |
265| fontWeight | `500` |
266| hoverHint | `underline` |
267 
268### Charts
269 
270| Property | Value |
271|----------|-------|
272| variant | `thin-bars` |
273| gridlines | `true` |
274| barGap | `10px` |
275| highlight | `all` |
276 
277---
278 
279## Pro tokens
280 
281> Production-fidelity tokens. States, density, motion, elevation,
282> content rules and a measured WCAG contract — derived from the
283> resting tokens unless explicitly authored.
284 
285### States
286 
287#### Button
288 
289- **hover** — shadow: `4px 4px 0 0 #E8E8E8`, transform: `translate(-2px, -2px)`
290- **focus** — outline: `2px solid #E8E8E8`, outline-offset: `3px`
291- **active** — shadow: `none`, transform: `translate(0, 0)`
292- **disabled** — opacity: `0.4`, filter: `grayscale(0.4)`
293- **loading** — opacity: `0.6`
294- **selected** — bg: `#E8E8E8`, color: `#141414`
295 
296#### Input
297 
298- **hover** — border: `2px solid #E8E8E8`
299- **focus** — border: `2px solid #E8E8E8`, shadow: `4px 4px 0 0 #E8E8E8`
300- **disabled** — bg: `rgba(232, 232, 232, 0.05)`, opacity: `0.4`
301- **error** — border: `2px solid #B91C1C`, shadow: `4px 4px 0 0 #B91C1C`
302 
303#### Card
304 
305- **hover** — shadow: `6px 6px 0 0 #E8E8E8`, transform: `translate(-3px, -3px)`
306- **selected** — border: `3px solid #E8E8E8`
307- **dragging** — shadow: `8px 8px 0 0 #E8E8E8`, transform: `rotate(-1deg) scale(1.02)`
308 
309#### Tab
310 
311- **hover** — bg: `rgba(232, 232, 232, 0.08)`
312- **focus** — outline: `2px solid #E8E8E8`, outline-offset: `2px`
313- **selected** — bg: `#E8E8E8`, color: `#141414`
314 
315### Density
316 
317| Mode | padding × | row × | body | radius × | Use for |
318|------|-----------|-------|------|----------|---------|
319| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
320| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
321| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
322 
323### Motion
324 
325**Signature — Hard cut.** No animation. Transitions are cuts — the state switches, the eye follows. Brutalism means no softening.
326 
327```css
328transition: none;
329```
330 
331| Token | Value |
332|-------|-------|
333| duration.instant | `0ms` |
334| duration.fast | `50ms` |
335| duration.base | `100ms` |
336| duration.slow | `150ms` |
337| easing.standard | `linear` |
338| easing.decelerate | `linear` |
339| easing.accelerate | `linear` |
340| easing.spring | `steps(3, end)` |
341 
342### Elevation
343 
344Five-level scale, system-specific recipe.
345 
346| Level | Shadow | Recipe |
347|-------|--------|--------|
348| level0 | `none` | Flat — the border carries the separation. |
349| level1 | `2px 2px 0 0 #E8E8E8` | Hard offset 2/2, no blur. |
350| level2 | `4px 4px 0 0 #E8E8E8` | Hard offset 4/4 — cards. |
351| level3 | `6px 6px 0 0 #E8E8E8` | Hard offset 6/6 — dialogs. |
352| level4 | `8px 8px 0 0 #E8E8E8` | Hard offset 8/8 — modals, thicker border. |
353 
354### Content
355 
356- **measure:** `64ch` (max line length for body prose)
357- **paragraph spacing:** `1.2em`
358- **list indent:** `1.5em`
359- **list gap:** `0.5em`
360- **link:** color `#E8E8E8`, underline `always`
361- **blockquote:** border `4px solid #E8E8E8`, padding `0.8em 1em`
362- **code:** background `#E8E8E8`, color `#141414`
363 
364### Accessibility (WCAG 2.1)
365 
366**Overall:** AA-Large
367 
368| Pair | Ratio | Required | Grade | Suggested fix |
369|------|-------|----------|-------|---------------|
370| Body text on surface | 15.04:1 | AA | AAA | — |
371| Body text on canvas | 16.16:1 | AA | AAA | — |
372| Muted text on surface | 4.29:1 | AA | AA-Large | `#7f7f7f` → 4.6:1 (AA) |
373| Accent on surface | 7.26:1 | AA-Large | AAA | — |
374| Accent on canvas | 7.8:1 | AA-Large | AAA | — |
375
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&family=Inter:wght@400;500;600&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:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#E8E8E8',
        secondary: '#7A7A7A',
        accent:    '#10B981',
        neutral:   '#0A0A0A',
        surface:   '#141414',
      },
      borderRadius: {
        sm: '2px',
        md: '4px',
        lg: '4px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Quartz Monochrome

No chromatic color at all. Five steps of grey on a paper-white canvas, generous 16px radii, oversized whitespace, one humanist sans for everything. The discipline is the brand.

minimalmonochromelightpremiummodern
Quartz.app
ProductPricingDocsAbout
Sign inGet started
minimal · monochrome · light

Build with Quartz Monochrome.

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

Bronze Foundry

A workshop interface cast in brushed bronze. Warm metallic tonal surfaces with a subtle vertical sheen, Fraunces for display and Inter for UI, sharp 2px corners, a single patina-green accent reserved for verified-cast marks and the primary CTA. Built for craft brands, manufacturing portfolios, and premium hardware product pages where the surface itself reads as machined metal.

metallicpremiumwarmmodernminimal
Bronze.app
ProductPricingDocsAbout
Sign inGet started
metallic · premium · warm

Build with Bronze Foundry.

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