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.
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: "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: Inter14 mono: "JetBrains Mono"15radius:16 sm: 2px17 md: 4px18 lg: 4px19buttons:20 primary:21 background: #00FF8822 color: #00000023 border: none24 shape: sharp25 padding: 10px 20px26 font: mono / 700 / 0.06em27 uppercase: true28 secondary:29 background: #0A0A0A30 color: #00FF8831 border: 1px solid #00FF8832 shape: sharp33 padding: 10px 20px34 font: mono / 600 / 0.06em35 uppercase: true36 outline:37 background: transparent38 color: #7A7A7A39 border: 1px solid #2A2A2A40 shape: sharp41 padding: 10px 20px42 font: mono / 500 / 0.06em43 uppercase: true44 ghost:45 background: transparent46 color: #00FF8847 border: none48 shape: sharp49 padding: 10px 050 font: mono / 50051 hover: underline52charts:53 variant: "thin-bars"54 gridlines: true55 bar_gap: 10px56 highlight: all57fonts_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 Terminal62 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 **Dark Terminal** 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 `#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 tertiary105actions in toolbars. **Ghost** for inline links and table actions.106 107#### Cards108 109- Background: `#141414`110- Radius: `radius.lg` (`4px`)111- Internal padding: `20px` for compact cards, `24–28px` for content cards.112 113#### Tabs114 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#### Charts119 120- Bar/line variant: `thin-bars`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 (`Inter`)** — 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## Overview153Inspired by terminal emulators and developer tooling. Quiet near-black background, emerald accent for action and status, monospace for headers.154 155## Colors156- **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## Typography163**JetBrains Mono** for headlines and code. **Inter** for prose to keep readability.164 165## Spacing1664px grid, 80px sections.167 168## Components169Thin 1px borders (#262626). 4px radii. No shadows.170 171## Icons172`lucide-react`, stroke width 1.5, inheriting text color. Use emerald only on status icons (check, success).173 174## Do's and Don'ts175- ✅ 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## Tokens183 184> Generated from the same source the live preview renders from.185> Treat the values below as the contract — never substitute approximations.186 187### Colors188 189| Role | Value |190|-----------|-------|191| primary | `#E8E8E8` |192| secondary | `#7A7A7A` |193| tertiary | `#10B981` |194| neutral | `#0A0A0A` |195| surface | `#141414` |196 197### Typography198 199- **Display:** JetBrains Mono200- **Body:** Inter201- **Mono:** JetBrains Mono202 203### Radius204 205- sm: `2px`206- md: `4px`207- lg: `4px`208 209### Buttons210 211Four variants, each fully tokenized. The preview renders from these exact values.212 213#### Primary214 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#### Secondary228 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#### Outline242 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#### Ghost256 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### Charts269 270| Property | Value |271|----------|-------|272| variant | `thin-bars` |273| gridlines | `true` |274| barGap | `10px` |275| highlight | `all` |276 # 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&family=Inter:wght@400;500;600&display=swap" />npm install lucide-react// tailwind.config.jsexport 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', }, }, },};Cool soft-glass system on a pale icy-blue canvas. True frosted cards at 18% white with 28px backdrop-blur, 160% saturate, 1px white hairline, inner top-edge gloss. One restrained slate-blue accent.
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.
Tonal elevation, dynamic-color purple primary, full-rounded buttons, Roboto Flex throughout. Faithful to the modern tonal-surface spec — generous, accessible, dependable for product UI.
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.