design.md
Back to directory
developer · dark · minimal · modern · technical

Graphite Shell.

A developer tool that finally feels warm. Graphite surfaces (never black, never grey), JetBrains Mono for everything technical, Inter for prose, a single sage-green accent reserved for the active state. Built for CLIs, infra dashboards, and dev portals that want to look serious without looking like a 90s terminal.

01 · Preview

The kitchen sink.

Graphite.app
ProductPricingDocsAbout
Sign inGet started
developer · dark · minimal

Build with Graphite Shell.

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
#E8E6DF
secondary
#8A8780
tertiary
#E8E6DF
neutral
#1F1E1B
surface
#161513
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
3px
md
5px
lg
8px
pill
9999px
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.

ArchetypeTerminal

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: "Graphite Shell"
3description: "A developer tool that finally feels warm. Graphite surfaces (never black, never grey), JetBrains Mono for everything technical, Inter for prose, a single sage-green accent reserved for the active state. Built for CLIs, infra dashboards, and dev portals that want to look serious without looking like a 90s terminal."
4tags: [developer, dark, minimal, modern, technical]
5colors:
6  primary:   "#e8e6df"
7  secondary: "#8a8780"
8  tertiary:  "#e8e6df"
9  neutral:   "#1f1e1b"
10  surface:   "#161513"
11typography:
12  display: Inter
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "3.25rem / 1.06 / 600 / -0.025em"
17    h1:   "2.125rem / 1.16 / 600 / -0.02em"
18    h2:   "1.4375rem / 1.3 / 600 / -0.012em"
19    body: "0.9375rem / 1.6 / 400 / 0"
20radius:
21  sm: 3px
22  md: 5px
23  lg: 8px
24  pill: 9999px
25shadows:
26  card:   "rgba(0,0,0,0.35) 0 1px 0 inset, rgba(0,0,0,0.4) 0 1px 2px"
27  button: none
28borders:
29  card:    "1px solid rgba(232,230,223,0.08)"
30  divider: rgba(232,230,223,0.10)
31buttons:
32  primary:
33    background: #9cb380
34    color: #161513
35    border: none
36    shape: rounded
37    padding: 9px 18px
38    font: mono / 600 / 0.8125rem
39  secondary:
40    background: #262420
41    color: #e8e6df
42    border: 1px solid rgba(232,230,223,0.10)
43    shape: rounded
44    padding: 9px 18px
45    font: mono / 500 / 0.8125rem
46  outline:
47    background: transparent
48    color: #e8e6df
49    border: 1px solid rgba(232,230,223,0.16)
50    shape: rounded
51    padding: 9px 18px
52    font: mono / 500 / 0.8125rem
53  ghost:
54    background: transparent
55    color: #8a8780
56    border: none
57    shape: rounded
58    padding: 9px 14px
59    font: mono / 500 / 0.8125rem
60charts:
61  variant: "thin-bars"
62  stroke_width: 1.5
63  fill_opacity: 0.08
64  gridlines: true
65  bar_gap: 10px
66  highlight: single
67  dot_marker: true
68fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Graphite Shell
73 
74## AI Build Instructions
75 
76> **Read this section before writing any code.** The rules below
77> are non-negotiable. Every value used in the UI must come from this
78> file's frontmatter — never substitute, approximate, or invent new
79> colors, fonts, radii, or shadows. If a value is missing, ask the
80> user before adding one.
81 
82### 1 · Your role
83 
84You are building UI for a project that has adopted **Graphite Shell** as its
85design system. Treat `DESIGN.md` as the single source of truth.
86Your job is to translate the user's product requirements into
87components and pages that look like they were designed by the same
88person who authored this file.
89 
90### 2 · Token compliance
91 
92- Pull every color, font family, radius, shadow, and spacing value
93  from the frontmatter at the top of this file.
94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
95  hard-code hex values that bypass the system.
96- When a token can be expressed as a CSS variable, declare it once
97  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 recipes
102 
103Use these recipes verbatim when building the corresponding component.
104 
105#### Buttons
106 
107Four variants are defined. Pick one — never blend variants or invent a fifth.
108 
109- **Primary** — rounded shape, bg `#9cb380`, text `#161513`, padding `9px 18px`, weight `600`.
110- **Secondary** — rounded shape, bg `#262420`, text `#e8e6df`, border `1px solid rgba(232,230,223,0.10)`, padding `9px 18px`, weight `500`.
111- **Outline** — rounded shape, text `#e8e6df`, border `1px solid rgba(232,230,223,0.16)`, padding `9px 18px`, weight `500`.
112- **Ghost** — rounded shape, text `#8a8780`, padding `9px 14px`, weight `500`.
113 
114Reach for **primary** as the single dominant CTA per screen.
115**Secondary** for the supporting action. **Outline** for tertiary
116actions in toolbars. **Ghost** for inline links and table actions.
117 
118#### Cards
119 
120- Background: `#161513`
121- Border: `1px solid rgba(232,230,223,0.08)`
122- Shadow: `rgba(0,0,0,0.35) 0 1px 0 inset, rgba(0,0,0,0.4) 0 1px 2px`
123- Radius: `radius.lg` (`8px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Tabs
127 
128Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill.
129 
130#### Charts
131 
132- Bar/line variant: `thin-bars`
133- Highlight strategy: `single` — emphasize a single bar/point per chart.
134 
135#### Typography pairings
136 
137- **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks.
138- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
139- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
140 
141### 4 · Hard constraints
142 
143Never do any of the following without explicit instruction from the user:
144 
145- Introduce a new color, font, radius, or shadow that isn't declared above.
146- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
147- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
148- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
149- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
150 
151### 5 · Before you finish — verify
152 
153Run through this checklist for every screen you produce:
154 
155- [ ] Every color used appears in the Colors table above.
156- [ ] Headlines use the display font; body copy uses the body font.
157- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
158- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
159- [ ] Cards and dividers use the declared border + shadow tokens.
160- [ ] No values were invented; if you needed something missing, you stopped and asked.
161 
162---
163 
164## 1. Atmosphere
165 
166Graphite Shell is a dev tool that refuses to look like a 90s terminal. Surfaces are warm graphite — `#161513` page, `#1f1e1b` cards, `#262420` lifted — never pure black, never cool grey. JetBrains Mono carries every technical label, button, and metric. Inter takes prose only — descriptions, doc body, marketing copy. The single accent is a muted sage `#9cb380` — the green of an old terminal cursor at 70% saturation, used only on primary CTAs and the active tab indicator.
167 
168The discipline is in the warmth: graphite over black, sage over neon green, mono on buttons. It feels like a serious CLI built by people who care.
169 
170**Signature moves**
171- Warm graphite surfaces `#161513 / #1f1e1b / #262420` — never black, never cool grey
172- JetBrains Mono on every button label — buttons read as commands
173- Sage accent `#9cb380` (muted, never neon) — primary CTA + active tab only
174- Boxed tabs that read like a tmux pane selector
175- 1px black inset highlight on every card — dark-mode catch-light
176 
177## 2. Palette
178 
179### Surfaces
180- **Shell** `#161513` — page background (warm graphite, brown-leaning)
181- **Pane** `#1f1e1b` — primary card surface
182- **Pane Lift** `#262420` — secondary button, hovered card
183- **Hairline** `rgba(232,230,223,0.08)` — every divider
184 
185### Ink (light on dark)
186- **Bone** `#e8e6df` — text, headings (warm, ivory)
187- **Bone 55** `#8a8780` — secondary text, ghost buttons, mono labels
188 
189### Accent
190- **Sage** `#9cb380` — primary CTA fill, active tab border, chart highlight
191- **Sage Soft** `rgba(156,179,128,0.14)` — focus ring, hovered tab
192 
193## 3. Typography
194 
195| Role | Font | Size | Weight | Leading | Tracking |
196|------|------|------|--------|---------|----------|
197| Hero | Inter | 52px | 600 | 1.06 | -0.025em |
198| H1 | Inter | 34px | 600 | 1.16 | -0.02em |
199| H2 | Inter | 23px | 600 | 1.3 | -0.012em |
200| Body | Inter | 15px | 400 | 1.6 | 0 |
201| UI / Button | JetBrains Mono | 13px | 500 | 1.4 | 0 |
202| Label | JetBrains Mono | 11px | 500 | 1.0 | 0.04em uppercase |
203| Code | JetBrains Mono | 13px | 400 | 1.55 | 0 |
204 
205Inter handles ALL display + prose. JetBrains Mono handles every interactive label and every technical readout. The split is strict — never use mono for prose, never use Inter on a button.
206 
207## 4. Buttons
208 
209### Primary (Sage Cursor)
210```css
211background: #9cb380;
212color: #161513;
213padding: 9px 18px;
214border-radius: 5px;
215font-family: "JetBrains Mono";
216font-weight: 600;
217```
218 
219Mono on the button label is the entire signature — it reads as if you're invoking a command.
220 
221### Secondary (Pane Lift)
222- `#262420` background, 1px hairline at 10% bone, bone text in mono 500
223 
224### Outline & Ghost
225- Outline: transparent, 1px hairline at 16% bone
226- Ghost: no border, bone-55 mono, hover lifts to bone
227 
228## 5. Cards
229 
230```css
231background: #1f1e1b;
232border: 1px solid rgba(232,230,223,0.08);
233border-radius: 8px;
234box-shadow:
235  rgba(0,0,0,0.35) 0 1px 0 inset,
236  rgba(0,0,0,0.4) 0 1px 2px;
237```
238 
239The 1px black inset highlight at the top edge is the dark catch-light — without it the card reads as flat brown.
240 
241Featured cards add a 2px sage left border — that is the active-pane indicator, borrowed from tmux/zellij.
242 
243## 6. Charts
244 
245Thin precise bars (4px wide, 10px gap) with dashed gridlines at 8% bone. One bar in sage, others in 22% bone. Line charts at 1.5px bone with an 8% sage fill, ending in a sage dot marker. Y-axis labels in JetBrains Mono uppercase 11px.
246 
247## 7. Tabs
248 
249Boxed tabs with 5px radius and 1px hairline at 10% bone. Active = pane-lift background, 1px sage border, sage text in mono 600. Inactive = transparent, bone-55 mono. Reads like a tmux pane selector.
250 
251## 8. Spacing
252 
253- Base 4px
254- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 80`
255- Section padding: 80px desktop, 40px mobile
256 
257## 9. Do's & don'ts
258 
259✅ **Do**
260- Hold the warm graphite surfaces — pure black or cool grey kills the warmth
261- Put JetBrains Mono on every button — that's the command-line voice
262- Use sage at muted saturation `#9cb380` — never neon green, never terminal-bright
263- Keep the 1px black inset highlight on every card — dark catch-light
264 
265❌ **Don't**
266- Use pure black `#000` or cool grey — graphite `#161513` is the only correct base
267- Use bright terminal green (`#00ff00`, etc.) — sage is muted on purpose
268- Put Inter on buttons — mono carries every interactive label
269- Add a second accent — sage alone, full stop
270 
271---
272 
273## Tokens
274 
275> Generated from the same source the live preview renders from.
276> Treat the values below as the contract — never substitute approximations.
277 
278### Colors
279 
280| Role      | Value |
281|-----------|-------|
282| primary   | `#e8e6df` |
283| secondary | `#8a8780` |
284| tertiary  | `#e8e6df` |
285| neutral   | `#1f1e1b` |
286| surface   | `#161513` |
287 
288### Typography
289 
290- **Display:** Inter
291- **Body:** Inter
292- **Mono:** JetBrains Mono
293 
294| Role | size / leading / weight / tracking |
295|------|------------------------------------|
296| Hero | 3.25rem / 1.06 / 600 / -0.025em |
297| H1   | 2.125rem / 1.16 / 600 / -0.02em |
298| H2   | 1.4375rem / 1.3 / 600 / -0.012em |
299| Body | 0.9375rem / 1.6 / 400 / 0 |
300 
301### Radius
302 
303- sm: `3px`
304- md: `5px`
305- lg: `8px`
306- pill: `9999px`
307 
308### Shadows
309 
310- **card:** `rgba(0,0,0,0.35) 0 1px 0 inset, rgba(0,0,0,0.4) 0 1px 2px`
311- **button:** `none`
312 
313### Borders
314 
315- **card:** `1px solid rgba(232,230,223,0.08)`
316- **divider:** `rgba(232,230,223,0.10)`
317 
318### Buttons
319 
320Four variants, each fully tokenized. The preview renders from these exact values.
321 
322#### Primary
323 
324| Property | Value |
325|----------|-------|
326| shape | `rounded` |
327| background | `#9cb380` |
328| color | `#161513` |
329| border | `none` |
330| padding | `9px 18px` |
331| fontFamily | `mono` |
332| fontWeight | `600` |
333| fontSize | `0.8125rem` |
334 
335#### Secondary
336 
337| Property | Value |
338|----------|-------|
339| shape | `rounded` |
340| background | `#262420` |
341| color | `#e8e6df` |
342| border | `1px solid rgba(232,230,223,0.10)` |
343| padding | `9px 18px` |
344| fontFamily | `mono` |
345| fontWeight | `500` |
346| fontSize | `0.8125rem` |
347 
348#### Outline
349 
350| Property | Value |
351|----------|-------|
352| shape | `rounded` |
353| background | `transparent` |
354| color | `#e8e6df` |
355| border | `1px solid rgba(232,230,223,0.16)` |
356| padding | `9px 18px` |
357| fontFamily | `mono` |
358| fontWeight | `500` |
359| fontSize | `0.8125rem` |
360 
361#### Ghost
362 
363| Property | Value |
364|----------|-------|
365| shape | `rounded` |
366| background | `transparent` |
367| color | `#8a8780` |
368| border | `none` |
369| padding | `9px 14px` |
370| fontFamily | `mono` |
371| fontWeight | `500` |
372| fontSize | `0.8125rem` |
373 
374### Charts
375 
376| Property | Value |
377|----------|-------|
378| variant | `thin-bars` |
379| strokeWidth | `1.5` |
380| fillOpacity | `0.08` |
381| gridlines | `true` |
382| barGap | `10px` |
383| highlight | `single` |
384| dotMarker | `true` |
385 
386---
387 
388## Pro tokens
389 
390> Production-fidelity tokens. States, density, motion, elevation,
391> content rules and a measured WCAG contract — derived from the
392> resting tokens unless explicitly authored.
393 
394### States
395 
396#### Button
397 
398- **hover** — bg: `rgba(232, 230, 223, 0.15)`, color: `#e8e6df`, border: `1px solid #e8e6df`
399- **focus** — outline: `1px dashed #e8e6df`, outline-offset: `2px`
400- **active** — bg: `#e8e6df`, color: `#161513`
401- **disabled** — opacity: `0.35`
402- **loading** — opacity: `0.6`
403- **selected** — bg: `#e8e6df`, color: `#161513`
404 
405#### Input
406 
407- **hover** — border: `1px solid rgba(232, 230, 223, 0.5)`
408- **focus** — bg: `rgba(232, 230, 223, 0.05)`, border: `1px solid #e8e6df`
409- **disabled** — opacity: `0.35`
410- **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444`
411 
412#### Card
413 
414- **hover** — border: `1px solid #e8e6df`
415- **selected** — bg: `rgba(232, 230, 223, 0.05)`, border: `1px solid #e8e6df`
416- **dragging** — opacity: `0.7`
417 
418#### Tab
419 
420- **hover** — color: `#e8e6df`
421- **focus** — outline: `1px dashed #e8e6df`, outline-offset: `1px`
422- **selected** — bg: `rgba(232, 230, 223, 0.1)`, color: `#e8e6df`
423 
424### Density
425 
426| Mode | padding × | row × | body | radius × | Use for |
427|------|-----------|-------|------|----------|---------|
428| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
429| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
430| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
431 
432### Motion
433 
434**Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms.
435 
436```css
437transition: all 120ms linear;
438```
439 
440| Token | Value |
441|-------|-------|
442| duration.instant | `0ms` |
443| duration.fast | `60ms` |
444| duration.base | `120ms` |
445| duration.slow | `200ms` |
446| easing.standard | `linear` |
447| easing.decelerate | `linear` |
448| easing.accelerate | `linear` |
449| easing.spring | `steps(2, end)` |
450 
451### Elevation
452 
453Five-level scale, system-specific recipe.
454 
455| Level | Shadow | Recipe |
456|-------|--------|--------|
457| level0 | `none` | Flat — the stroke carries the hierarchy. |
458| level1 | `none` | Border tone lifts the surface. |
459| level2 | `0 0 0 1px rgba(232, 230, 223, 0.5)` | Ring outline — popover. |
460| level3 | `0 0 0 1px #e8e6df, 0 12px 32px -16px rgba(232, 230, 223, 0.4)` | Sheet with accent ring + glow. |
461| level4 | `0 0 0 1px #e8e6df, 0 24px 64px -20px rgba(232, 230, 223, 0.5)` | Modal with accent ring + glow. |
462 
463### Content
464 
465- **measure:** `78ch` (max line length for body prose)
466- **paragraph spacing:** `1em`
467- **list indent:** `1.25em`
468- **list gap:** `0.35em`
469- **link:** color `#e8e6df`, underline `always`
470- **blockquote:** border `1px solid rgba(232, 230, 223, 0.5)`, padding `0.7em 1em`
471- **code:** background `rgba(232, 230, 223, 0.12)`, color `#e8e6df`
472 
473### Accessibility (WCAG 2.1)
474 
475**Overall:** AA
476 
477| Pair | Ratio | Required | Grade | Suggested fix |
478|------|-------|----------|-------|---------------|
479| Body text on surface | 14.61:1 | AA | AAA | — |
480| Body text on canvas | 13.35:1 | AA | AAA | — |
481| Muted text on surface | 5.09:1 | AA | AA | — |
482| Accent on surface | 14.61:1 | AA-Large | AAA | — |
483| Accent on canvas | 13.35:1 | AA-Large | AAA | — |
484
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=Inter:wght@400;500;600;700&family=JetBrains+Mono: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: ['"Inter"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#e8e6df',
        secondary: '#8a8780',
        accent:    '#e8e6df',
        neutral:   '#1f1e1b',
        surface:   '#161513',
      },
      borderRadius: {
        sm: '3px',
        md: '5px',
        lg: '8px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Duotone Press

A two-color press operation: warm bone and persimmon, nothing else. Bricolage Grotesque for display at oversized scale, Newsreader for body, sharp 0px corners, every accent and every CTA in the same persimmon. Built for editorial sites, indie magazines, and brands that want one disciplined color move and zero decoration.

editorialduotonewarmminimalbold
Duotone.app
ProductPricingDocsAbout
Sign inGet started
editorial · duotone · warm

Build with Duotone Press.

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

Limepress Fintech

Lime-bright fintech with weight-900 display at 0.85 line-height — billboard-density typography, dark-green-on-lime pill CTAs, ring-shadow depth.

fintechboldwarmplayful
Limepress.app
ProductPricingDocsAbout
Sign inGet started
fintech · bold · warm

Build with Limepress Fintech.

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