A premium command-line aesthetic that earned its calm. JetBrains Mono carries display, body, and labels at three sizes; warm off-white paper for surfaces; precise hairlines instead of cards; a single cobalt accent reserved for the cursor caret, the active path crumb, and the primary action. Built for developer-tool marketing pages, technical documentation hubs, and infra products that want to read as terminal-native without going dark.
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: "Monolith CLI"3description: "A premium command-line aesthetic that earned its calm. JetBrains Mono carries display, body, and labels at three sizes; warm off-white paper for surfaces; precise hairlines instead of cards; a single cobalt accent reserved for the cursor caret, the active path crumb, and the primary action. Built for developer-tool marketing pages, technical documentation hubs, and infra products that want to read as terminal-native without going dark."4tags: [coding, minimal, premium, warm, modern]5colors:6 primary: "#1a1a18"7 secondary: "#5e5e58"8 tertiary: "#1a1a18"9 neutral: "#ebe7dd"10 surface: "#f4f0e6"11typography:12 display: "JetBrains Mono"13 body: "JetBrains Mono"14 mono: "JetBrains Mono"15 scale:16 hero: "4.5rem / 1 / 500 / -0.04em"17 h1: "2.5rem / 1.1 / 500 / -0.025em"18 h2: "1.5rem / 1.25 / 500 / -0.012em"19 body: "0.9375rem / 1.65 / 400 / 0"20radius:21 sm: 2px22 md: 3px23 lg: 4px24 pill: 9999px25shadows:26 card: none27 button: none28borders:29 card: "1px solid rgba(26,26,24,0.12)"30 divider: rgba(26,26,24,0.14)31buttons:32 primary:33 background: #1a1a1834 color: #f4f0e635 border: none36 shape: sharp37 padding: 10px 18px38 font: 500 / 0.8125rem39 secondary:40 background: transparent41 color: #1a1a1842 border: 1px solid rgba(26,26,24,0.20)43 shape: sharp44 padding: 10px 18px45 font: 500 / 0.8125rem46 outline:47 background: transparent48 color: #1a1a1849 border: 1px solid rgba(26,26,24,0.16)50 shape: sharp51 padding: 10px 18px52 font: 500 / 0.8125rem53 ghost:54 background: transparent55 color: #5e5e5856 border: none57 shape: sharp58 padding: 10px 14px59 font: 500 / 0.8125rem60charts:61 variant: "thin-bars"62 stroke_width: 163 fill_opacity: 064 gridlines: false65 bar_gap: 3px66 highlight: single67 dot_marker: false68fonts_url: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"69dependencies: ["lucide-react"]70---71 72# Monolith CLI73 74## AI Build Instructions75 76> **Read this section before writing any code.** The rules below77> are non-negotiable. Every value used in the UI must come from this78> file's frontmatter — never substitute, approximate, or invent new79> colors, fonts, radii, or shadows. If a value is missing, ask the80> user before adding one.81 82### 1 · Your role83 84You are building UI for a project that has adopted **Monolith CLI** as its85design system. Treat `DESIGN.md` as the single source of truth.86Your job is to translate the user's product requirements into87components and pages that look like they were designed by the same88person who authored this file.89 90### 2 · Token compliance91 92- Pull every color, font family, radius, shadow, and spacing value93 from the frontmatter at the top of this file.94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never95 hard-code hex values that bypass the system.96- When a token can be expressed as a CSS variable, declare it once97 in your global stylesheet and reference it everywhere downstream.98- The Google Fonts `<link>` is provided in the Typography section.99 Add it to `<head>` before any component renders.100 101### 3 · Component recipes102 103Use these recipes verbatim when building the corresponding component.104 105#### Buttons106 107Four variants are defined. Pick one — never blend variants or invent a fifth.108 109- **Primary** — sharp shape, bg `#1a1a18`, text `#f4f0e6`, padding `10px 18px`, weight `500`.110- **Secondary** — sharp shape, text `#1a1a18`, border `1px solid rgba(26,26,24,0.20)`, padding `10px 18px`, weight `500`.111- **Outline** — sharp shape, text `#1a1a18`, border `1px solid rgba(26,26,24,0.16)`, padding `10px 18px`, weight `500`.112- **Ghost** — sharp shape, text `#5e5e58`, padding `10px 14px`, weight `500`.113 114Reach for **primary** as the single dominant CTA per screen.115**Secondary** for the supporting action. **Outline** for tertiary116actions in toolbars. **Ghost** for inline links and table actions.117 118#### Cards119 120- Background: `#f4f0e6`121- Border: `1px solid rgba(26,26,24,0.12)`122- Shadow: `none`123- Radius: `radius.lg` (`4px`)124- Internal padding: `20px` for compact cards, `24–28px` for content cards.125 126#### Tabs127 128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.129 130#### Charts131 132- Bar/line variant: `thin-bars`133- No gridlines — let the bars/lines carry the data.134- Highlight strategy: `single` — emphasize a single bar/point per chart.135 136#### Typography pairings137 138- **Display (`JetBrains Mono`)** — h1, h2, hero headlines, brand wordmarks.139- **Body (`JetBrains Mono`)** — paragraphs, labels, button text, form inputs.140- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.141 142### 4 · Hard constraints143 144Never do any of the following without explicit instruction from the user:145 146- Introduce a new color, font, radius, or shadow that isn't declared above.147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.151 152### 5 · Before you finish — verify153 154Run through this checklist for every screen you produce:155 156- [ ] Every color used appears in the Colors table above.157- [ ] Headlines use the display font; body copy uses the body font.158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.160- [ ] Cards and dividers use the declared border + shadow tokens.161- [ ] No values were invented; if you needed something missing, you stopped and asked.162 163---164 165## 1. Atmosphere166 167Monolith CLI is a premium command-line aesthetic that earned its calm. The page surface is warm off-white paper `#f4f0e6` — closer to printed manual stock than to white. Display headlines run in JetBrains Mono 500 at 72px with -0.04em tracking — the mono glyphs at scale read as etched into the page. Body sits in the same JetBrains Mono at 15px on a 1.65 leading — long-form readable mono. There are no cards: every section is divided by a single 1px hairline at 14% ink. The single accent is cobalt `#1f4dd9` — a deep, saturated true-blue that appears only on the cursor caret `▍`, the active breadcrumb segment, and the primary CTA. The caret blinks at 1Hz; nothing else animates.168 169The discipline is in the type scale: only three sizes (72px / 24px / 15px) and only two weights (400 / 500). Mono at every size means columns naturally align — section labels above a paragraph, command snippets inline in body, and the cobalt cursor sits on a baseline shared with the prose.170 171**Signature moves**172- JetBrains Mono only — display, body, labels — three sizes (72/24/15), two weights (400/500)173- Warm paper surface `#f4f0e6` — never white, never grey174- Cobalt `#1f4dd9` exclusively on cursor caret `▍`, active breadcrumb, primary CTA175- 1px hairlines at 14% ink instead of cards — the system never lifts a surface176- Sharp 2-4px corners — precise, never pill, never soft177- Single 1Hz blinking cursor caret — the only animation in the entire system178 179## 2. Palette180 181### Surfaces182- **Paper** `#f4f0e6` — page background (warm manual stock)183- **Paper Lift** `#ebe7dd` — secondary tonal surface (rare, used only for code blocks)184- **Hairline** `rgba(26,26,24,0.14)` — every divider, every section break185 186### Ink187- **Ink** `#1a1a18` — text, headings, primary CTA fill (warm near-black)188- **Ink 50** `#5e5e58` — secondary text, comments, captions189 190### Accent191- **Cobalt** `#1f4dd9` — cursor caret, active breadcrumb, primary CTA, focus ring192- **Cobalt Soft** `rgba(31,77,217,0.10)` — focus ring background193 194## 3. Typography (the entire system)195 196| Role | Font | Size | Weight | Leading | Tracking |197|------|------|------|--------|---------|----------|198| Hero | JetBrains Mono | 72px | 500 | 1.0 | -0.04em |199| H1 | JetBrains Mono | 40px | 500 | 1.1 | -0.025em |200| H2 | JetBrains Mono | 24px | 500 | 1.25 | -0.012em |201| Body | JetBrains Mono | 15px | 400 | 1.65 | 0 |202| UI / Button | JetBrains Mono | 13px | 500 | 1.4 | 0 |203| Caption / Comment | JetBrains Mono | 12px | 400 | 1.4 | 0 |204| Inline Code | JetBrains Mono | 14px | 400 | 1.4 | 0 (no extra treatment — it's already mono) |205 206Three sizes, two weights, one font. Inline code does not need a different background or color — the entire system is already mono.207 208## 4. Buttons209 210### Primary (Ink Sharp Mono)211```css212background: #1a1a18;213color: #f4f0e6;214padding: 10px 18px;215border-radius: 3px;216font-family: "JetBrains Mono";217font-weight: 500;218```219 220The button label is mono, lowercase, often prefixed with a glyph: `$ deploy`, `→ continue`, `↳ open in editor`. The button reads as a runnable command, not a marketing CTA.221 222### Secondary (Outline)223- Transparent, 1px hairline at 20% ink — same sharp shape224 225### Outline & Ghost226- Outline: transparent, 1px hairline at 16% ink227- Ghost: no border, ink-50228 229## 5. Cards (there are none)230 231The system never lifts a surface. Sections are separated by a single 1px hairline at 14% ink and 64px of vertical breathing room. Code samples sit in a slightly recessed paper-lift block `#ebe7dd` with a 1px hairline border — that is the only deviation from flat paper.232 233## 6. Charts234 235Thin precise bars (2px wide, 3px gap). One bar in cobalt, others in 22% ink. NO gridlines. Y-axis labels in JetBrains Mono 11px. Charts read as terminal output, never as data viz.236 237## 7. Tabs238 239Underline 1.5px in cobalt for the active state. Inactive tabs are ink-50 in JetBrains Mono 500. The active tab label is prefixed with a cobalt `▍` caret — that's how the system says "you are here."240 241## 8. Spacing242 243- Base 4px (mono-grid aware)244- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128`245- Section padding: 96px desktop, 48px mobile — air comes from the hairlines246 247## 9. Do's & don'ts248 249✅ **Do**250- Use JetBrains Mono for everything — display, body, UI, labels — that's the entire premise251- Hold the warm paper surface — terminal-dark would make this generic252- Reserve cobalt for cursor caret + active breadcrumb + primary CTA — three surfaces only253- Prefix the primary button label with a glyph: `$`, `→`, `↳` — it reads as a runnable command254 255❌ **Don't**256- Add a sans serif for "readability" — the warm paper handles long-form mono fine at 15px257- Use cards or shadows — hairlines and breathing room carry the layout258- Add a second accent color — cobalt alone, on three specific surfaces259- Animate beyond the 1Hz caret blink — the calm IS the system260 261---262 263## Tokens264 265> Generated from the same source the live preview renders from.266> Treat the values below as the contract — never substitute approximations.267 268### Colors269 270| Role | Value |271|-----------|-------|272| primary | `#1a1a18` |273| secondary | `#5e5e58` |274| tertiary | `#1a1a18` |275| neutral | `#ebe7dd` |276| surface | `#f4f0e6` |277 278### Typography279 280- **Display:** JetBrains Mono281- **Body:** JetBrains Mono282- **Mono:** JetBrains Mono283 284| Role | size / leading / weight / tracking |285|------|------------------------------------|286| Hero | 4.5rem / 1 / 500 / -0.04em |287| H1 | 2.5rem / 1.1 / 500 / -0.025em |288| H2 | 1.5rem / 1.25 / 500 / -0.012em |289| Body | 0.9375rem / 1.65 / 400 / 0 |290 291### Radius292 293- sm: `2px`294- md: `3px`295- lg: `4px`296- pill: `9999px`297 298### Shadows299 300- **card:** `none`301- **button:** `none`302 303### Borders304 305- **card:** `1px solid rgba(26,26,24,0.12)`306- **divider:** `rgba(26,26,24,0.14)`307 308### Buttons309 310Four variants, each fully tokenized. The preview renders from these exact values.311 312#### Primary313 314| Property | Value |315|----------|-------|316| shape | `sharp` |317| background | `#1a1a18` |318| color | `#f4f0e6` |319| border | `none` |320| padding | `10px 18px` |321| fontWeight | `500` |322| fontSize | `0.8125rem` |323 324#### Secondary325 326| Property | Value |327|----------|-------|328| shape | `sharp` |329| background | `transparent` |330| color | `#1a1a18` |331| border | `1px solid rgba(26,26,24,0.20)` |332| padding | `10px 18px` |333| fontWeight | `500` |334| fontSize | `0.8125rem` |335 336#### Outline337 338| Property | Value |339|----------|-------|340| shape | `sharp` |341| background | `transparent` |342| color | `#1a1a18` |343| border | `1px solid rgba(26,26,24,0.16)` |344| padding | `10px 18px` |345| fontWeight | `500` |346| fontSize | `0.8125rem` |347 348#### Ghost349 350| Property | Value |351|----------|-------|352| shape | `sharp` |353| background | `transparent` |354| color | `#5e5e58` |355| border | `none` |356| padding | `10px 14px` |357| fontWeight | `500` |358| fontSize | `0.8125rem` |359 360### Charts361 362| Property | Value |363|----------|-------|364| variant | `thin-bars` |365| strokeWidth | `1` |366| fillOpacity | `0` |367| gridlines | `false` |368| barGap | `3px` |369| highlight | `single` |370| dotMarker | `false` |371 # 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;600;700&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: '#1a1a18', secondary: '#5e5e58', accent: '#1a1a18', neutral: '#ebe7dd', surface: '#f4f0e6', }, borderRadius: { sm: '2px', md: '3px', lg: '4px', }, }, },};Pressed-herbarium editorial — deep forest ink and oxidized terracotta on bone paper. Italic Cormorant display, generous leading, hairline rules, and a single warm spot color used like a botanist's annotation stamp.
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.
An enterprise admin tool that respects density. Cool bone-grey surfaces, Inter for prose and IBM Plex Mono with tabular numerals for every figure, a single steel-blue accent reserved for the active module pane border. Built for B2B internal tools, ops dashboards, and admin consoles where information density is the feature, not the bug.
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.