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 · 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

03 · 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.

04 · 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

// 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',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Quiet Cobalt

Crystalline ice-white canvas, abundant whitespace, gently rounded corners, and a single deep cobalt accent. Ultra-clean modern SaaS with quiet confidence.

minimalsaaslightpremiummodern

Quiet.app

ProductPricingDocsAbout

Sign inGet started

minimal · saas · light

Build with Quiet Cobalt.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

Peony Zine

A printed quarterly that happens to live on the web. Soft blush-bone surfaces, Fraunces 600 italic display headlines, Geist Mono for marginalia, a single deep plum accent on drop caps and pull-quote bars. Built for journals, newsletters, and slow-content brands that want warmth without preciousness.

editorialsoftwarmminimalpremium

Peony.app

ProductPricingDocsAbout

Sign inGet started

editorial · soft · warm

Build with Peony Zine.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational