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.
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.
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 372---373 374## Pro tokens375 376> Production-fidelity tokens. States, density, motion, elevation,377> content rules and a measured WCAG contract — derived from the378> resting tokens unless explicitly authored.379 380### States381 382#### Button383 384- **hover** — bg: `rgba(26, 26, 24, 0.15)`, color: `#1a1a18`, border: `1px solid #1a1a18`385- **focus** — outline: `1px dashed #1a1a18`, outline-offset: `2px`386- **active** — bg: `#1a1a18`, color: `#f4f0e6`387- **disabled** — opacity: `0.35`388- **loading** — opacity: `0.6`389- **selected** — bg: `#1a1a18`, color: `#f4f0e6`390 391#### Input392 393- **hover** — border: `1px solid rgba(26, 26, 24, 0.5)`394- **focus** — bg: `rgba(26, 26, 24, 0.05)`, border: `1px solid #1a1a18`395- **disabled** — opacity: `0.35`396- **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444`397 398#### Card399 400- **hover** — border: `1px solid #1a1a18`401- **selected** — bg: `rgba(26, 26, 24, 0.05)`, border: `1px solid #1a1a18`402- **dragging** — opacity: `0.7`403 404#### Tab405 406- **hover** — color: `#1a1a18`407- **focus** — outline: `1px dashed #1a1a18`, outline-offset: `1px`408- **selected** — bg: `rgba(26, 26, 24, 0.1)`, color: `#1a1a18`409 410### Density411 412| Mode | padding × | row × | body | radius × | Use for |413|------|-----------|-------|------|----------|---------|414| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |415| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |416| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |417 418### Motion419 420**Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms.421 422```css423transition: all 120ms linear;424```425 426| Token | Value |427|-------|-------|428| duration.instant | `0ms` |429| duration.fast | `60ms` |430| duration.base | `120ms` |431| duration.slow | `200ms` |432| easing.standard | `linear` |433| easing.decelerate | `linear` |434| easing.accelerate | `linear` |435| easing.spring | `steps(2, end)` |436 437### Elevation438 439Five-level scale, system-specific recipe.440 441| Level | Shadow | Recipe |442|-------|--------|--------|443| level0 | `none` | Flat — the stroke carries the hierarchy. |444| level1 | `none` | Border tone lifts the surface. |445| level2 | `0 0 0 1px rgba(26, 26, 24, 0.5)` | Ring outline — popover. |446| level3 | `0 0 0 1px #1a1a18, 0 12px 32px -16px rgba(26, 26, 24, 0.4)` | Sheet with accent ring + glow. |447| level4 | `0 0 0 1px #1a1a18, 0 24px 64px -20px rgba(26, 26, 24, 0.5)` | Modal with accent ring + glow. |448 449### Content450 451- **measure:** `78ch` (max line length for body prose)452- **paragraph spacing:** `1em`453- **list indent:** `1.25em`454- **list gap:** `0.35em`455- **link:** color `#1a1a18`, underline `always`456- **blockquote:** border `1px solid rgba(26, 26, 24, 0.5)`, padding `0.7em 1em`457- **code:** background `rgba(26, 26, 24, 0.12)`, color `#1a1a18`458 459### Accessibility (WCAG 2.1)460 461**Overall:** AA462 463| Pair | Ratio | Required | Grade | Suggested fix |464|------|-------|----------|-------|---------------|465| Body text on surface | 15.32:1 | AA | AAA | — |466| Body text on canvas | 14.12:1 | AA | AAA | — |467| Muted text on surface | 5.73:1 | AA | AA | — |468| Accent on surface | 15.32:1 | AA-Large | AAA | — |469| Accent on canvas | 14.12:1 | AA-Large | AAA | — |470 # 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', }, }, },};A studio interface built around real glassmorphism — frosted backdrop-blur cards floating over a soft tonal lavender-bone backdrop. Plus Jakarta Sans for UI, Spectral italic for accent display, a single indigo reserved for the active panel ring and the primary CTA. Built for creative studios, design tools, and product surfaces where the glass IS the interface chrome.
Literary salon as product page. Parchment canvas, serif headlines at weight 500, terracotta brand, exclusively warm neutrals, and ring-shadow depth.