developer · minimal · modern · saas · premium

Devshell Mono.

A developer console as a brand. Warm off-white, JetBrains Mono everywhere, a single cyan caret as the only accent. Every divider, label, and CTA aligns to a 4px mono baseline grid. Built to look like a terminal that's been art-directed.

01 · Preview

The kitchen sink.

Devshell.app

ProductPricingDocsAbout

Sign inGet started

developer · minimal · modern

Build with Devshell Mono.

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

#161514

secondary

#6B6862

tertiary

#161514

neutral

#F6F3EE

surface

#FBF8F3

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

2px

md

4px

lg

6px

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: "Devshell Mono"
3description: "A developer console as a brand. Warm off-white, JetBrains Mono everywhere, a single cyan caret as the only accent. Every divider, label, and CTA aligns to a 4px mono baseline grid. Built to look like a terminal that's been art-directed."
4tags: [developer, minimal, modern, saas, premium]
5colors:
6  primary:   "#161514"
7  secondary: "#6b6862"
8  tertiary:  "#161514"
9  neutral:   "#f6f3ee"
10  surface:   "#fbf8f3"
11typography:
12  display: "JetBrains Mono"
13  body:    "JetBrains Mono"
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "2.75rem / 1.15 / 500 / -0.02em"
17    h1:   "2rem / 1.2 / 500 / -0.015em"
18    h2:   "1.375rem / 1.3 / 500 / -0.01em"
19    body: "0.9375rem / 1.6 / 400 / 0"
20radius:
21  sm: 2px
22  md: 4px
23  lg: 6px
24  pill: 9999px
25shadows:
26  card:   "rgba(22,21,20,0.05) 0 0 0 1px"
27  button: none
28borders:
29  card:    "1px solid rgba(22,21,20,0.08)"
30  divider: rgba(22,21,20,0.08)
31buttons:
32  primary:
33    background: #161514
34    color: #fbf8f3
35    border: none
36    shape: sharp
37    padding: 9px 16px
38    font: 500 / 0.8125rem
39  secondary:
40    background: transparent
41    color: #161514
42    border: 1px solid rgba(22,21,20,0.18)
43    shape: sharp
44    padding: 9px 16px
45    font: 500 / 0.8125rem
46  outline:
47    background: transparent
48    color: #0e8f9c
49    border: 1px solid #0e8f9c
50    shape: sharp
51    padding: 9px 16px
52    font: 500 / 0.8125rem
53  ghost:
54    background: transparent
55    color: #6b6862
56    border: none
57    shape: sharp
58    padding: 9px 12px
59    font: 500 / 0.8125rem
60charts:
61  variant: "thin-bars"
62  stroke_width: 1.25
63  fill_opacity: 0.05
64  gridlines: true
65  bar_gap: 8px
66  highlight: single
67  dot_marker: false
68fonts_url: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Devshell Mono
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 **Devshell Mono** 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** — sharp shape, bg `#161514`, text `#fbf8f3`, padding `9px 16px`, weight `500`.
110- **Secondary** — sharp shape, text `#161514`, border `1px solid rgba(22,21,20,0.18)`, padding `9px 16px`, weight `500`.
111- **Outline** — sharp shape, text `#0e8f9c`, border `1px solid #0e8f9c`, padding `9px 16px`, weight `500`.
112- **Ghost** — sharp shape, text `#6b6862`, padding `9px 12px`, 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: `#fbf8f3`
121- Border: `1px solid rgba(22,21,20,0.08)`
122- Shadow: `rgba(22,21,20,0.05) 0 0 0 1px`
123- Radius: `radius.lg` (`6px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Tabs
127 
128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no 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 (`JetBrains Mono`)** — h1, h2, hero headlines, brand wordmarks.
138- **Body (`JetBrains Mono`)** — 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 
166Devshell Mono is a developer console treated as a brand. Everything — from the hero to the body to the navigation — runs in JetBrains Mono. The page is a warm off-white `#fbf8f3` (paper, not screen), text is near-black `#161514`, and the only accent is a deep cyan `#0e8f9c` that appears as a blinking caret in the hero, as the active tab marker, and as the outline color on secondary CTAs. Nothing else is colored.
167 
168The discipline is the 4px mono baseline: every line of text, every divider, every padding value snaps to a 4px grid. Cards have no shadow — only a 1px hairline at 8% ink. The result reads like a terminal that someone with a typography degree has been allowed to redesign.
169 
170**Signature moves**
171- Mono everywhere — display, body, UI, all JetBrains Mono
172- Warm paper background `#fbf8f3`, never cool grey, never pure white
173- Cyan `#0e8f9c` caret in the hero — a blinking `▍` is part of the brand
174- Sharp 2-4px radius on every surface — no pills except for status badges
175- Hairlines at 8% ink as the only divider, no shadow, no fill
176 
177## 2. Palette
178 
179### Core
180- **Ink** `#161514` — text, headings, primary CTA fill
181- **Paper** `#fbf8f3` — page, modals
182- **Paper Lift** `#f6f3ee` — secondary surfaces
183- **Hairline** `rgba(22,21,20,0.08)` — every divider, every card edge
184 
185### Accent
186- **Cyan** `#0e8f9c` — caret, active tab, outline CTA
187- **Cyan Soft** `rgba(14,143,156,0.10)` — focus ring, hovered tab background
188 
189### Semantic (mono labels only)
190- Success `#3a8c5c` · Warn `#b88a2a` · Error `#c4493a`
191- Used only as the dot prefix on status badges, never as fill
192 
193## 3. Typography
194 
195| Role | Font | Size | Weight | Leading | Tracking |
196|------|------|------|--------|---------|----------|
197| Hero | JetBrains Mono | 44px | 500 | 1.15 | -0.02em |
198| H1 | JetBrains Mono | 32px | 500 | 1.2 | -0.015em |
199| H2 | JetBrains Mono | 22px | 500 | 1.3 | -0.01em |
200| Body | JetBrains Mono | 15px | 400 | 1.6 | 0 |
201| UI / Label | JetBrains Mono | 12px | 500 | 1.0 | 0.04em |
202| Comment | JetBrains Mono | 13px | 400 | 1.5 | 0 italic |
203 
204Three weights only: 400 / 500 / 700. Italics are reserved for inline "comments" — meta text rendered as if it were a code comment (`// since 2024`). Negative tracking compresses headlines so the mono doesn't read as flabby.
205 
206## 4. Buttons
207 
208### Primary (Ink)
209```css
210background: #161514;
211color: #fbf8f3;
212padding: 9px 16px;
213border-radius: 2px;
214font-family: "JetBrains Mono";
215font-weight: 500;
216```
217 
218### Secondary (Hairline)
219- Transparent, 1px ink hairline at 18%, ink text
220- Same padding as primary
221 
222### Outline (Cyan)
223- Transparent, 1px cyan border, cyan text — for "View source" / "Open in shell" actions
224 
225### Ghost
226- Transparent, mono 500, ink-secondary color. Hover: 4% ink wash.
227 
228## 5. Cards
229 
230- Background `#fbf8f3` (or `#f6f3ee` for elevated)
231- 1px hairline at 8% ink, no shadow
232- Radius 4px (6px for featured)
233- Internal padding 16px / 24px — always a multiple of 4px
234- Optional: a 1px ink top border to mark "shell output" cards
235 
236## 6. Charts
237 
238Thin precise bars (4px wide, 8px gap). One bar in cyan, the rest in 18% ink. Dashed gridlines at 6% ink. Y-axis labels in mono uppercase 12px. Line charts run at 1.25px in cyan with a 5% fill — no dot markers, the line ends in a small cyan caret `▍` instead. The chart is shell output dressed up.
239 
240## 7. Tabs
241 
242Underline 1.5px in cyan for the active state. Inactive tabs are mono 500 at ink-secondary. Tab labels are lowercase — `overview`, `logs`, `settings` — never title-case, reinforcing the shell command feel.
243 
244## 8. Spacing
245 
246- Base 4px (matches the mono baseline)
247- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64`
248- Section padding: 64px desktop, 32px mobile
249 
250## 9. Do's & don'ts
251 
252✅ **Do**
253- Use mono everywhere — proportional sans is forbidden in this system
254- Keep the warm paper background — cool grey breaks the shell-on-paper feel
255- Use the cyan caret in the hero — the blinking `▍` IS the brand mark
256- Lowercase all tab labels and code-style metadata
257 
258❌ **Don't**
259- Use any sans-serif for body or display — mono is total
260- Add a second accent — cyan is alone, status colors only as 8px dots
261- Use radius above 6px — pill is reserved for status badges
262- Use shadows — hairlines only, always
263 
264---
265 
266## Tokens
267 
268> Generated from the same source the live preview renders from.
269> Treat the values below as the contract — never substitute approximations.
270 
271### Colors
272 
273| Role      | Value |
274|-----------|-------|
275| primary   | `#161514` |
276| secondary | `#6b6862` |
277| tertiary  | `#161514` |
278| neutral   | `#f6f3ee` |
279| surface   | `#fbf8f3` |
280 
281### Typography
282 
283- **Display:** JetBrains Mono
284- **Body:** JetBrains Mono
285- **Mono:** JetBrains Mono
286 
287| Role | size / leading / weight / tracking |
288|------|------------------------------------|
289| Hero | 2.75rem / 1.15 / 500 / -0.02em |
290| H1   | 2rem / 1.2 / 500 / -0.015em |
291| H2   | 1.375rem / 1.3 / 500 / -0.01em |
292| Body | 0.9375rem / 1.6 / 400 / 0 |
293 
294### Radius
295 
296- sm: `2px`
297- md: `4px`
298- lg: `6px`
299- pill: `9999px`
300 
301### Shadows
302 
303- **card:** `rgba(22,21,20,0.05) 0 0 0 1px`
304- **button:** `none`
305 
306### Borders
307 
308- **card:** `1px solid rgba(22,21,20,0.08)`
309- **divider:** `rgba(22,21,20,0.08)`
310 
311### Buttons
312 
313Four variants, each fully tokenized. The preview renders from these exact values.
314 
315#### Primary
316 
317| Property | Value |
318|----------|-------|
319| shape | `sharp` |
320| background | `#161514` |
321| color | `#fbf8f3` |
322| border | `none` |
323| padding | `9px 16px` |
324| fontWeight | `500` |
325| fontSize | `0.8125rem` |
326 
327#### Secondary
328 
329| Property | Value |
330|----------|-------|
331| shape | `sharp` |
332| background | `transparent` |
333| color | `#161514` |
334| border | `1px solid rgba(22,21,20,0.18)` |
335| padding | `9px 16px` |
336| fontWeight | `500` |
337| fontSize | `0.8125rem` |
338 
339#### Outline
340 
341| Property | Value |
342|----------|-------|
343| shape | `sharp` |
344| background | `transparent` |
345| color | `#0e8f9c` |
346| border | `1px solid #0e8f9c` |
347| padding | `9px 16px` |
348| fontWeight | `500` |
349| fontSize | `0.8125rem` |
350 
351#### Ghost
352 
353| Property | Value |
354|----------|-------|
355| shape | `sharp` |
356| background | `transparent` |
357| color | `#6b6862` |
358| border | `none` |
359| padding | `9px 12px` |
360| fontWeight | `500` |
361| fontSize | `0.8125rem` |
362 
363### Charts
364 
365| Property | Value |
366|----------|-------|
367| variant | `thin-bars` |
368| strokeWidth | `1.25` |
369| fillOpacity | `0.05` |
370| gridlines | `true` |
371| barGap | `8px` |
372| highlight | `single` |
373| dotMarker | `false` |
374

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=JetBrains+Mono:wght@400;500;700&display=swap" />

Install dependencies

bash

npm install lucide-react

Tailwind config

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"JetBrains Mono"', 'serif'],
        sans:    ['"JetBrains Mono"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#161514',
        secondary: '#6b6862',
        accent:    '#161514',
        neutral:   '#f6f3ee',
        surface:   '#fbf8f3',
      },
      borderRadius: {
        sm: '2px',
        md: '4px',
        lg: '6px',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Voidstage

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

darkpremiumdesign-toolcinematic

Voidstage.app

ProductPricingDocsAbout

Sign inGet started

dark · premium · design-tool

Build with Voidstage.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

Liquid Metal

Dark graphite glassmorphism — heavy 48px backdrop blur on near-opaque graphite panes, hairline pewter borders, and brushed-silver text accents. No color, no glow, no aurora. Just clean machined glass over a flat charcoal canvas with subtle metallic gradients on display type.

darkglassminimalpremiummodern

Liquid.app

ProductPricingDocsAbout

Sign inGet started

dark · glass · minimal

Build with Liquid Metal.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational