design.md
Back to directory
dark · premium · design-tool · cinematic

Voidstage.

Pure black void canvas, geometric medium-weight display with extreme negative tracking, frosted glass pills, and a single electric blue accent.

01 · Preview

The kitchen sink.

Voidstage.app
ProductPricingDocsAbout
Sign inGet started
dark · premium · design-tool

Build with Voidstage.

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
#FFFFFF
secondary
#A6A6A6
tertiary
#0099FF
neutral
#000000
surface
#090909
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
5px
md
8px
lg
12px
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.

ArchetypeDark Luxury

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: Voidstage
3description: "Pure black void canvas, geometric medium-weight display with extreme negative tracking, frosted glass pills, and a single electric blue accent."
4tags: [dark, premium, "design-tool", cinematic]
5colors:
6  primary:   "#ffffff"
7  secondary: "#a6a6a6"
8  tertiary:  "#0099ff"
9  neutral:   "#000000"
10  surface:   "#090909"
11typography:
12  display: Geist
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.5rem / 0.85 / 500 / -3.6px"
17    h1:   "3.875rem / 0.95 / 500 / -2.5px"
18    h2:   "2rem / 1.13 / 500 / -1px"
19    body: "0.9375rem / 1.3 / 400 / -0.01px"
20radius:
21  sm: 5px
22  md: 8px
23  lg: 12px
24  pill: 9999px
25shadows:
26  card:   "rgba(0,153,255,0.15) 0 0 0 1px, rgba(0,0,0,0.25) 0 10px 30px"
27  button: "rgba(0,153,255,0.15) 0 0 0 1px"
28buttons:
29  primary:
30    background: #FFFFFF
31    color: #000000
32    border: none
33    shape: pill
34    padding: 10px 22px
35    font: display / 500 / -0.01em
36  secondary:
37    background: rgba(255,255,255,0.08)
38    color: #FFFFFF
39    border: 1px solid rgba(255,255,255,0.16)
40    shape: pill
41    padding: 10px 22px
42    font: display / 500 / -0.01em
43  outline:
44    background: transparent
45    color: #FFFFFF
46    border: 1px solid rgba(255,255,255,0.4)
47    shape: pill
48    padding: 10px 22px
49    font: display / 500 / -0.01em
50  ghost:
51    background: transparent
52    color: rgba(255,255,255,0.6)
53    border: none
54    shape: pill
55    padding: 10px 14px
56    font: display / 500 / -0.01em
57charts:
58  variant: dots
59  stroke_width: 1
60  fill_opacity: 0
61  bar_gap: 10px
62  highlight: all
63  dot_marker: true
64fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400&display=swap"
65dependencies: ["lucide-react"]
66---
67 
68# Voidstage
69 
70## AI Build Instructions
71 
72> **Read this section before writing any code.** The rules below
73> are non-negotiable. Every value used in the UI must come from this
74> file's frontmatter — never substitute, approximate, or invent new
75> colors, fonts, radii, or shadows. If a value is missing, ask the
76> user before adding one.
77 
78### 1 · Your role
79 
80You are building UI for a project that has adopted **Voidstage** as its
81design system. Treat `DESIGN.md` as the single source of truth.
82Your job is to translate the user's product requirements into
83components and pages that look like they were designed by the same
84person who authored this file.
85 
86### 2 · Token compliance
87 
88- Pull every color, font family, radius, shadow, and spacing value
89  from the frontmatter at the top of this file.
90- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
91  hard-code hex values that bypass the system.
92- When a token can be expressed as a CSS variable, declare it once
93  in your global stylesheet and reference it everywhere downstream.
94- The Google Fonts `<link>` is provided in the Typography section.
95  Add it to `<head>` before any component renders.
96 
97### 3 · Component recipes
98 
99Use these recipes verbatim when building the corresponding component.
100 
101#### Buttons
102 
103Four variants are defined. Pick one — never blend variants or invent a fifth.
104 
105- **Primary** — pill shape, bg `#FFFFFF`, text `#000000`, padding `10px 22px`, weight `500`.
106- **Secondary** — pill shape, bg `rgba(255,255,255,0.08)`, text `#FFFFFF`, border `1px solid rgba(255,255,255,0.16)`, padding `10px 22px`, weight `500`.
107- **Outline** — pill shape, text `#FFFFFF`, border `1px solid rgba(255,255,255,0.4)`, padding `10px 22px`, weight `500`.
108- **Ghost** — pill shape, text `rgba(255,255,255,0.6)`, padding `10px 14px`, weight `500`.
109 
110Reach for **primary** as the single dominant CTA per screen.
111**Secondary** for the supporting action. **Outline** for tertiary
112actions in toolbars. **Ghost** for inline links and table actions.
113 
114#### Cards
115 
116- Background: `#090909`
117- Shadow: `rgba(0,153,255,0.15) 0 0 0 1px, rgba(0,0,0,0.25) 0 10px 30px`
118- Radius: `radius.lg` (`12px`)
119- Internal padding: `20px` for compact cards, `24–28px` for content cards.
120 
121#### Charts
122 
123- Bar/line variant: `dots`
124- Highlight strategy: `all` — emphasize a single bar/point per chart.
125 
126#### Typography pairings
127 
128- **Display (`Geist`)** — h1, h2, hero headlines, brand wordmarks.
129- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
130- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
131 
132### 4 · Hard constraints
133 
134Never do any of the following without explicit instruction from the user:
135 
136- Introduce a new color, font, radius, or shadow that isn't declared above.
137- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
138- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
139- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
140- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
141 
142### 5 · Before you finish — verify
143 
144Run through this checklist for every screen you produce:
145 
146- [ ] Every color used appears in the Colors table above.
147- [ ] Headlines use the display font; body copy uses the body font.
148- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
149- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
150- [ ] Cards and dividers use the declared border + shadow tokens.
151- [ ] No values were invented; if you needed something missing, you stopped and asked.
152 
153---
154 
155## 1. Atmosphere
156 
157Voidstage is a cinematic, tool-obsessed dark canvas — the confidence of a design tool built by designers who worship craft. The entire experience is drenched in pure black (`#000000`), not warm charcoal or cozy dark gray, but an absolute void that makes every element feel like it's floating in deep space. The product UI is the hero art; full-fidelity screenshots and interactive demos are embedded directly in the narrative.
158 
159The typography is the signature move. A geometric medium-weight display with aggressive negative tracking (as extreme as -5.5px on 110px headlines) creates words under pressure — compressed, kinetic, almost spring-loaded. Body type transitions to a refined neo-grotesque with extensive OpenType alternates, giving even small text a custom feel. The single accent — electric blue (`#0099ff`) — is deployed as link color, border, and ring shadow, a cold throughline against the warm-less black.
160 
161**Signature moves**
162- Pure `#000000` void canvas — never warm or gray-tinted
163- Geometric display at weight 500 only, with extreme negative tracking
164- Electric blue (`#0099ff`) as the sole accent — interactive only
165- Pill-shaped buttons (40–100px radius) — no sharp corners on interactive
166- Frosted glass surfaces using `rgba(255,255,255,0.1)` over dark
167- Blue ring shadows for card containment: `rgba(0,153,255,0.15) 0 0 0 1px`
168 
169## 2. Palette
170 
171### Primary
172- **Void Black** `#000000` — page canvas
173- **Pure White** `#ffffff` — heading text, button text on accent
174- **Electric Blue** `#0099ff` — links, borders, focus, accent
175 
176### Surface
177- Void `#000000` — page
178- Frosted `rgba(255,255,255,0.1)` — translucent button / glass
179- Frosted Hover `rgba(255,255,255,0.5)` — slightly more opaque
180- Near Black `#090909` — elevated dark surface, ring color
181 
182### Text
183- Pure White `#ffffff` — headings, high-emphasis
184- Muted Silver `#a6a6a6` — body, descriptions
185- Ghost White `rgba(255,255,255,0.6)` — placeholders, tertiary
186 
187### Glow
188- Blue Glow `rgba(0,153,255,0.15)` — focus ring shadow, halo
189- Default Link Blue `#0000ee` — sparingly in content areas
190 
191## 3. Typography
192 
193| Role | Size | Weight | Leading | Tracking |
194|------|------|--------|---------|----------|
195| Display Hero | 110px | 500 | 0.85 | -5.5px |
196| Section Display | 85px | 500 | 0.95 | -4.25px |
197| Section Heading | 62px | 500 | 1.00 | -3.1px |
198| Feature Heading | 32px | 500 | 1.13 | -1px |
199| Card Title | 24px | 400 | 1.30 | -0.01px |
200| Body L | 18px | 400 | 1.30 | -0.01px |
201| Body | 15px | 400 | 1.30 | -0.01px |
202| Nav / UI | 15px | 400 | 1.00 | -0.15px |
203| Caption | 14px | 400 | 1.40 | normal |
204| Label | 13px | 500 | 1.60 | normal |
205| Mono | 10.4px | 400 | 1.60 | normal |
206 
207**Compression is the personality.** Display weight is fixed at 500 — never bold, never regular. Ultra-tight line-heights (0.85) at display sizes mean letters nearly overlap vertically. Intentional density that rewards reading at arm's length.
208 
209## 4. Buttons
210 
211### Solid White Pill (Primary)
212```css
213background: #ffffff;
214color: #000000;
215padding: 10px 20px;
216border-radius: 9999px;
217```
218 
219### Frosted Pill
220- `rgba(255,255,255,0.1)` background, white text
221- Pill radius (40px+)
222- Glass effect on dark — translucent and ambient
223 
224### Ghost
225- No background, white text
226- Hover reveals subtle frosted background
227 
228## 5. Cards
229 
230- **Dark surface card**: black or `#090909`, with `rgba(0,153,255,0.15) 0 0 0 1px` blue ring shadow, 10–15px radius
231- **Elevated card**: `rgba(255,255,255,0.1) 0 0.5px 0 0.5px` (top highlight) + `rgba(0,0,0,0.25) 0 10px 30px` (deep ambient)
232- Product screenshots: 8–12px radius, full-width within dark containers
233 
234## 6. Spacing
235 
236- Base: 8px
237- Scale: `1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 35`
238- Section vertical: 80–120px
239- Card internal: 15–30px
240 
241## 7. Radius scale
242 
243`1 / 5–7 / 8 / 10–12 / 15–20 / 30–40 / 100` — pill (100px+) is reserved for primary CTAs and tags. Cards stay at 10–15px.
244 
245## 8. Depth & elevation
246 
247| Level | Treatment | Use |
248|-------|-----------|-----|
249| 0 | Pure black, no shadow | Page background |
250| 1 | `rgba(0,153,255,0.15) 0 0 0 1px` | Card borders, blue ring |
251| 2 | `#090909 0 0 0 2px` | Subtle near-black containment |
252| 3 | White edge highlight + deep ambient | Elevated cards, floating |
253 
254**Inverted elevation.** Instead of darker shadows on lighter backgrounds, Voidstage uses blue-tinted ring shadows for containment, white edge highlights to simulate light hitting the top edge, and deep ambient shadows for true floating. There is no glassmorphism blur — translucency is achieved through simple rgba opacity.
255 
256## 9. Do's & don'ts
257 
258✅ **Do**
259- Use pure black (`#000000`) — never charcoal or warm dark
260- Apply extreme negative tracking on display (-3px to -5.5px)
261- Keep all buttons pill-shaped (40px+ radius)
262- Reserve electric blue (`#0099ff`) for interactive accents only
263- Apply blue ring shadows for card containment
264 
265❌ **Don't**
266- Use warm dark backgrounds (`#1a1a1a`, `#2d2d2d`)
267- Use bold (700+) on display — medium 500 only
268- Introduce a second accent color — single accent system
269- Use squared corners on interactive elements
270- Add decorative imagery — the product is the illustration
271 
272---
273 
274## Tokens
275 
276> Generated from the same source the live preview renders from.
277> Treat the values below as the contract — never substitute approximations.
278 
279### Colors
280 
281| Role      | Value |
282|-----------|-------|
283| primary   | `#ffffff` |
284| secondary | `#a6a6a6` |
285| tertiary  | `#0099ff` |
286| neutral   | `#000000` |
287| surface   | `#090909` |
288 
289### Typography
290 
291- **Display:** Geist
292- **Body:** Inter
293- **Mono:** JetBrains Mono
294 
295| Role | size / leading / weight / tracking |
296|------|------------------------------------|
297| Hero | 4.5rem / 0.85 / 500 / -3.6px |
298| H1   | 3.875rem / 0.95 / 500 / -2.5px |
299| H2   | 2rem / 1.13 / 500 / -1px |
300| Body | 0.9375rem / 1.3 / 400 / -0.01px |
301 
302### Radius
303 
304- sm: `5px`
305- md: `8px`
306- lg: `12px`
307- pill: `9999px`
308 
309### Shadows
310 
311- **card:** `rgba(0,153,255,0.15) 0 0 0 1px, rgba(0,0,0,0.25) 0 10px 30px`
312- **button:** `rgba(0,153,255,0.15) 0 0 0 1px`
313 
314### Buttons
315 
316Four variants, each fully tokenized. The preview renders from these exact values.
317 
318#### Primary
319 
320| Property | Value |
321|----------|-------|
322| shape | `pill` |
323| background | `#FFFFFF` |
324| color | `#000000` |
325| border | `none` |
326| padding | `10px 22px` |
327| fontFamily | `display` |
328| fontWeight | `500` |
329| tracking | `-0.01em` |
330 
331#### Secondary
332 
333| Property | Value |
334|----------|-------|
335| shape | `pill` |
336| background | `rgba(255,255,255,0.08)` |
337| color | `#FFFFFF` |
338| border | `1px solid rgba(255,255,255,0.16)` |
339| padding | `10px 22px` |
340| fontFamily | `display` |
341| fontWeight | `500` |
342| tracking | `-0.01em` |
343 
344#### Outline
345 
346| Property | Value |
347|----------|-------|
348| shape | `pill` |
349| background | `transparent` |
350| color | `#FFFFFF` |
351| border | `1px solid rgba(255,255,255,0.4)` |
352| padding | `10px 22px` |
353| fontFamily | `display` |
354| fontWeight | `500` |
355| tracking | `-0.01em` |
356 
357#### Ghost
358 
359| Property | Value |
360|----------|-------|
361| shape | `pill` |
362| background | `transparent` |
363| color | `rgba(255,255,255,0.6)` |
364| border | `none` |
365| padding | `10px 14px` |
366| fontFamily | `display` |
367| fontWeight | `500` |
368| tracking | `-0.01em` |
369 
370### Charts
371 
372| Property | Value |
373|----------|-------|
374| variant | `dots` |
375| strokeWidth | `1` |
376| fillOpacity | `0` |
377| barGap | `10px` |
378| highlight | `all` |
379| dotMarker | `true` |
380 
381---
382 
383## Pro tokens
384 
385> Production-fidelity tokens. States, density, motion, elevation,
386> content rules and a measured WCAG contract — derived from the
387> resting tokens unless explicitly authored.
388 
389### States
390 
391#### Button
392 
393- **hover** — shadow: `0 0 24px -4px rgba(0, 153, 255, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)`
394- **focus** — outline: `1.5px solid #0099ff`, outline-offset: `3px`
395- **active** — transform: `translateY(1px)`, filter: `brightness(0.92)`
396- **disabled** — opacity: `0.35`, filter: `saturate(0.4)`
397- **loading** — opacity: `0.6`
398- **selected** — bg: `#0099ff`, color: `#0A0A0A`
399 
400#### Input
401 
402- **hover** — border: `1px solid rgba(0, 153, 255, 0.5)`
403- **focus** — border: `1px solid #0099ff`, shadow: `0 0 0 3px rgba(0, 153, 255, 0.2)`
404- **disabled** — opacity: `0.35`
405- **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)`
406 
407#### Card
408 
409- **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(0, 153, 255, 0.18)`, transform: `translateY(-2px)`
410- **selected** — border: `1px solid #0099ff`, shadow: `0 0 0 1px #0099ff`
411- **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85`
412 
413#### Tab
414 
415- **hover** — color: `#0099ff`
416- **focus** — outline: `1.5px solid #0099ff`, outline-offset: `2px`
417- **selected** — color: `#0099ff`, border: `0 0 1.5px 0 solid #0099ff`
418 
419### Density
420 
421| Mode | padding × | row × | body | radius × | Use for |
422|------|-----------|-------|------|----------|---------|
423| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
424| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
425| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
426 
427### Motion
428 
429**Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele.
430 
431```css
432transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1);
433```
434 
435| Token | Value |
436|-------|-------|
437| duration.instant | `100ms` |
438| duration.fast | `180ms` |
439| duration.base | `280ms` |
440| duration.slow | `450ms` |
441| easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` |
442| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
443| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
444| easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` |
445 
446### Elevation
447 
448Five-level scale, system-specific recipe.
449 
450| Level | Shadow | Recipe |
451|-------|--------|--------|
452| level0 | `none` | Flat — Hairline mit Accent-Hauch. |
453| level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. |
454| level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. |
455| level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(0, 153, 255, 0.25)` | Sheet — Accent-Halo. |
456| level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(0, 153, 255, 0.4)` | Modal — voller Accent-Rim, dramatisch. |
457 
458### Content
459 
460- **measure:** `66ch` (max line length for body prose)
461- **paragraph spacing:** `1.3em`
462- **list indent:** `1.5em`
463- **list gap:** `0.5em`
464- **link:** color `#0099ff`, underline `hover`
465- **blockquote:** border `2px solid #0099ff`, padding `0.8em 1.2em`
466- **code:** background `rgba(0, 153, 255, 0.12)`, color `#0099ff`
467 
468### Accessibility (WCAG 2.1)
469 
470**Overall:** AA
471 
472| Pair | Ratio | Required | Grade | Suggested fix |
473|------|-------|----------|-------|---------------|
474| Body text on surface | 19.91:1 | AA | AAA | — |
475| Body text on canvas | 21:1 | AA | AAA | — |
476| Muted text on surface | 8.18:1 | AA | AAA | — |
477| Accent on surface | 6.64:1 | AA-Large | AA | — |
478| Accent on canvas | 7:1 | AA-Large | AAA | — |
479
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=Geist:wght@400;500;600&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Geist"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#ffffff',
        secondary: '#a6a6a6',
        accent:    '#0099ff',
        neutral:   '#000000',
        surface:   '#090909',
      },
      borderRadius: {
        sm: '5px',
        md: '8px',
        lg: '12px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Studio Margaux

A design-studio identity built on asymmetric oversized typography. Cream surfaces, Fraunces at extreme display scale paired with Inter Tight for body, an inked black block reserved for the studio mark and the single primary CTA, and an italic serif accent line that breaks every layout. Built for design agencies, art-direction portfolios, and creative studios that lead with type instead of imagery.

editorialagencywarmpremiumasymmetric
Studio.app
ProductPricingDocsAbout
Sign inGet started
editorial · agency · warm

Build with Studio Margaux.

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

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.

developerdarkminimalmoderntechnical
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