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

Pierre Dev.

Dev-tool dark. Near-black canvas, hairline grid, mono-forward display type, one signal-cyan accent. The aesthetic of a precision instrument — built for developer platforms and infra consoles.

01 · Preview

The kitchen sink.

Pierre.app
ProductPricingDocsAbout
Sign inGet started→
dark · developer · minimal

Build with Pierre Dev.

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
#5EE9FF
secondary
#7B8794
tertiary
#A6B0BC
neutral
#0A0B0D
surface
#101216
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

Primary→SecondaryOutlineGhostText 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
4px
md
6px
lg
8px
pill
999px
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: "Pierre Dev"
3description: "Dev-tool dark. Near-black canvas, hairline grid, mono-forward display type, one signal-cyan accent. The aesthetic of a precision instrument — built for developer platforms and infra consoles."
4tags: [dark, developer, minimal, modern, premium]
5colors:
6  primary:   "#5EE9FF"
7  secondary: "#7B8794"
8  tertiary:  "#A6B0BC"
9  neutral:   "#0A0B0D"
10  surface:   "#101216"
11typography:
12  display: "JetBrains Mono"
13  body:    Geist
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.25rem / 1 / 500 / -0.04em"
17    h1:   "2.5rem / 1.05 / 500 / -0.035em"
18    h2:   "1.375rem / 1.3 / 500 / -0.015em"
19    body: "0.9375rem / 1.6 / 400 / -0.003em"
20radius:
21  sm: 4px
22  md: 6px
23  lg: 8px
24shadows:
25  card:   "0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 0 rgba(255, 255, 255, 0.02) inset"
26  button: "0 0 0 1px rgba(94, 233, 255, 0.20), 0 0 24px -8px rgba(94, 233, 255, 0.35)"
27borders:
28  card:    "1px solid rgba(255, 255, 255, 0.06)"
29  divider: "rgba(255, 255, 255, 0.06)"
30buttons:
31  primary:
32    background: #0F1418
33    color: #5EE9FF
34    border: 1px solid #5EE9FF
35    shape: sharp
36    padding: 11px 22px
37    font: mono / 500 / 0.8125rem / 0.02em
38    shadow: 0 0 0 1px rgba(94, 233, 255, 0.20), 0 0 24px -8px rgba(94, 233, 255, 0.35)
39    suffix: arrow
40  secondary:
41    background: transparent
42    color: #E4E7EB
43    border: 1px solid rgba(255, 255, 255, 0.10)
44    shape: sharp
45    padding: 11px 22px
46    font: mono / 500 / 0.8125rem / 0.02em
47  outline:
48    background: transparent
49    color: #7B8794
50    border: 1px dashed rgba(255, 255, 255, 0.14)
51    shape: sharp
52    padding: 10px 20px
53    font: mono / 500 / 0.8125rem / 0.02em
54  ghost:
55    background: transparent
56    color: #5EE9FF
57    border: none
58    shape: sharp
59    padding: 10px 4px
60    font: mono / 500 / 0.8125rem / 0.02em
61    hover: underline
62charts:
63  variant: stepped
64  stroke_width: 1.5
65  gridlines: true
66  highlight: last
67  dot_marker: true
68  axis_color: "#4A5560"
69  palette: ["#5EE9FF", "#7B8794", "#A6B0BC"]
70fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap"
71dependencies: ["lucide-react"]
72---
73 
74# Pierre Dev
75 
76## AI Build Instructions
77 
78> **Read this section before writing any code.** The rules below
79> are non-negotiable. Every value used in the UI must come from this
80> file's frontmatter — never substitute, approximate, or invent new
81> colors, fonts, radii, or shadows. If a value is missing, ask the
82> user before adding one.
83 
84### 1 · Your role
85 
86You are building UI for a project that has adopted **Pierre Dev** as its
87design system. Treat `DESIGN.md` as the single source of truth.
88Your job is to translate the user's product requirements into
89components and pages that look like they were designed by the same
90person who authored this file.
91 
92### 2 · Token compliance
93 
94- Pull every color, font family, radius, shadow, and spacing value
95  from the frontmatter at the top of this file.
96- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
97  hard-code hex values that bypass the system.
98- When a token can be expressed as a CSS variable, declare it once
99  in your global stylesheet and reference it everywhere downstream.
100- The Google Fonts `<link>` is provided in the Typography section.
101  Add it to `<head>` before any component renders.
102 
103### 3 · Component recipes
104 
105Use these recipes verbatim when building the corresponding component.
106 
107#### Buttons
108 
109Four variants are defined. Pick one — never blend variants or invent a fifth.
110 
111- **Primary** — sharp shape, bg `#0F1418`, text `#5EE9FF`, border `1px solid #5EE9FF`, padding `11px 22px`, weight `500`, shadow `0 0 0 1px rgba(94, 233, 255, 0.20), 0 0 24px -8px rgba(94, 233, 255, 0.35)`.
112- **Secondary** — sharp shape, text `#E4E7EB`, border `1px solid rgba(255, 255, 255, 0.10)`, padding `11px 22px`, weight `500`.
113- **Outline** — sharp shape, text `#7B8794`, border `1px dashed rgba(255, 255, 255, 0.14)`, padding `10px 20px`, weight `500`.
114- **Ghost** — sharp shape, text `#5EE9FF`, padding `10px 4px`, weight `500`.
115 
116Reach for **primary** as the single dominant CTA per screen.
117**Secondary** for the supporting action. **Outline** for tertiary
118actions in toolbars. **Ghost** for inline links and table actions.
119 
120#### Cards
121 
122- Background: `#101216`
123- Border: `1px solid rgba(255, 255, 255, 0.06)`
124- Shadow: `0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 0 rgba(255, 255, 255, 0.02) inset`
125- Radius: `radius.lg` (`8px`)
126- Internal padding: `20px` for compact cards, `24–28px` for content cards.
127 
128#### Tabs
129 
130Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill.
131 
132#### Charts
133 
134- Bar/line variant: `stepped`
135- Highlight strategy: `last` — emphasize a single bar/point per chart.
136- Use the declared palette in order: `#5EE9FF`, `#7B8794`, `#A6B0BC`.
137 
138#### Typography pairings
139 
140- **Display (`JetBrains Mono`)** — h1, h2, hero headlines, brand wordmarks.
141- **Body (`Geist`)** — paragraphs, labels, button text, form inputs.
142- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
143 
144### 4 · Hard constraints
145 
146Never do any of the following without explicit instruction from the user:
147 
148- Introduce a new color, font, radius, or shadow that isn't declared above.
149- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
150- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
151- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
152- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
153 
154### 5 · Before you finish — verify
155 
156Run through this checklist for every screen you produce:
157 
158- [ ] Every color used appears in the Colors table above.
159- [ ] Headlines use the display font; body copy uses the body font.
160- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
161- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
162- [ ] Cards and dividers use the declared border + shadow tokens.
163- [ ] No values were invented; if you needed something missing, you stopped and asked.
164 
165---
166 
167## Overview
168Pierre Dev is a dev-tool dark system. Near-black canvas, mono display type, hairlines instead of shadows, and a single signal-cyan accent for active states.
169 
170It is meant for developer platforms — observability dashboards, infra consoles, deploy UIs, terminal-adjacent products. The aesthetic borrows the discipline of a precision instrument: nothing is decorative, every line is information.
171 
172## Color
173- **Canvas #0A0B0D** — near-black page.
174- **Surface #101216** — barely-raised card.
175- **Signal Cyan #5EE9FF** — the only chromatic accent. Active links, primary CTA outline, the chart line, the cursor.
176- **Graphite scale #7B8794 / #A6B0BC** — secondary and tertiary text.
177- **Hairlines at rgba(255,255,255,0.06)** — the system's only structural element. Use them anywhere a divider would be.
178 
179The cyan must remain rare — apply it to one element per region, never decoratively.
180 
181## Typography
182- **Display: JetBrains Mono 500** at 4.25rem with -4% tracking.
183- **Body: Geist 400** at 0.9375rem with 1.6 leading.
184- **Mono is the display face.** The "this was written by someone who writes code" signal is the entire point.
185 
186| Role | Font | Size | Weight | Tracking |
187|------|------|------|--------|----------|
188| Hero | JetBrains Mono | 4.25rem | 500 | -0.04em |
189| H1 | JetBrains Mono | 2.5rem | 500 | -0.035em |
190| H2 | JetBrains Mono | 1.375rem | 500 | -0.015em |
191| Body | Geist | 0.9375rem | 400 | -0.003em / 1.6 |
192 
193## Geometry
194- **Radii: 4 / 6 / 8.** Sharp-modern. No pills, no soft corners.
195- **Spacing: strict 4px subgrid.** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96.
196- **Borders: 1px hairlines** at 6% white. Replace shadows with hairline halos.
197 
198## Buttons
199- **Primary** — dark surface, cyan hairline, cyan label, soft cyan outer glow. The single "action" moment.
200- **Secondary** — bare hairline against canvas. Light label.
201- **Outline** — 1px dashed hairline, graphite label. For tertiary actions only.
202- **Ghost** — bare cyan label, hover underline.
203 
204All four are sharp (4px radius). Mono labels at 0.8125rem with +2% tracking — they read as commands.
205 
206## Cards
207Surface at #101216 with a 1px hairline halo (6% white) and a 1px inner top-edge highlight (2% white). Radius 8px. Cards never lift; depth is communicated by the hairline alone.
208 
209## Charts & Data
210Stepped line in signal cyan, 1.5px stroke, faint graphite gridlines. End-of-line cyan dot. The chart should read as a terminal plot, not a marketing graphic.
211 
212## Do's and Don'ts
213- ✅ Cyan appears once per region — primary CTA, active link, chart line. Never decoratively.
214- ✅ All structure is hairlines. Replace every shadow you'd reach for with a 1px halo.
215- ✅ Mono on display, sans on body — never the other way around.
216- ✅ Stick to the 4px subgrid. Off-grid spacing reads as careless.
217- ❌ No drop shadows. No soft corners. No gradients.
218- ❌ No second chromatic accent. The system is mono + cyan, period.
219- ❌ No marketing-style icons or illustrations. If a glyph appears, it should look like terminal output.
220 
221---
222 
223## Tokens
224 
225> Generated from the same source the live preview renders from.
226> Treat the values below as the contract — never substitute approximations.
227 
228### Colors
229 
230| Role      | Value |
231|-----------|-------|
232| primary   | `#5EE9FF` |
233| secondary | `#7B8794` |
234| tertiary  | `#A6B0BC` |
235| neutral   | `#0A0B0D` |
236| surface   | `#101216` |
237 
238### Typography
239 
240- **Display:** JetBrains Mono
241- **Body:** Geist
242- **Mono:** JetBrains Mono
243 
244| Role | size / leading / weight / tracking |
245|------|------------------------------------|
246| Hero | 4.25rem / 1 / 500 / -0.04em |
247| H1   | 2.5rem / 1.05 / 500 / -0.035em |
248| H2   | 1.375rem / 1.3 / 500 / -0.015em |
249| Body | 0.9375rem / 1.6 / 400 / -0.003em |
250 
251### Radius
252 
253- sm: `4px`
254- md: `6px`
255- lg: `8px`
256 
257### Shadows
258 
259- **card:** `0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 0 rgba(255, 255, 255, 0.02) inset`
260- **button:** `0 0 0 1px rgba(94, 233, 255, 0.20), 0 0 24px -8px rgba(94, 233, 255, 0.35)`
261 
262### Borders
263 
264- **card:** `1px solid rgba(255, 255, 255, 0.06)`
265- **divider:** `rgba(255, 255, 255, 0.06)`
266 
267### Buttons
268 
269Four variants, each fully tokenized. The preview renders from these exact values.
270 
271#### Primary
272 
273| Property | Value |
274|----------|-------|
275| shape | `sharp` |
276| background | `#0F1418` |
277| color | `#5EE9FF` |
278| border | `1px solid #5EE9FF` |
279| padding | `11px 22px` |
280| fontFamily | `mono` |
281| fontWeight | `500` |
282| fontSize | `0.8125rem` |
283| tracking | `0.02em` |
284| shadow | `0 0 0 1px rgba(94, 233, 255, 0.20), 0 0 24px -8px rgba(94, 233, 255, 0.35)` |
285| suffix | `arrow` |
286 
287#### Secondary
288 
289| Property | Value |
290|----------|-------|
291| shape | `sharp` |
292| background | `transparent` |
293| color | `#E4E7EB` |
294| border | `1px solid rgba(255, 255, 255, 0.10)` |
295| padding | `11px 22px` |
296| fontFamily | `mono` |
297| fontWeight | `500` |
298| fontSize | `0.8125rem` |
299| tracking | `0.02em` |
300 
301#### Outline
302 
303| Property | Value |
304|----------|-------|
305| shape | `sharp` |
306| background | `transparent` |
307| color | `#7B8794` |
308| border | `1px dashed rgba(255, 255, 255, 0.14)` |
309| padding | `10px 20px` |
310| fontFamily | `mono` |
311| fontWeight | `500` |
312| fontSize | `0.8125rem` |
313| tracking | `0.02em` |
314 
315#### Ghost
316 
317| Property | Value |
318|----------|-------|
319| shape | `sharp` |
320| background | `transparent` |
321| color | `#5EE9FF` |
322| border | `none` |
323| padding | `10px 4px` |
324| fontFamily | `mono` |
325| fontWeight | `500` |
326| fontSize | `0.8125rem` |
327| tracking | `0.02em` |
328| hoverHint | `underline` |
329 
330### Charts
331 
332| Property | Value |
333|----------|-------|
334| variant | `stepped` |
335| strokeWidth | `1.5` |
336| gridlines | `true` |
337| highlight | `last` |
338| dotMarker | `true` |
339| axisColor | `#4A5560` |
340| palette | `#5EE9FF`, `#7B8794`, `#A6B0BC` |
341 
342---
343 
344## Pro tokens
345 
346> Production-fidelity tokens. States, density, motion, elevation,
347> content rules and a measured WCAG contract — derived from the
348> resting tokens unless explicitly authored.
349 
350### States
351 
352#### Button
353 
354- **hover** — bg: `rgba(166, 176, 188, 0.15)`, color: `#A6B0BC`, border: `1px solid #A6B0BC`
355- **focus** — outline: `1px dashed #A6B0BC`, outline-offset: `2px`
356- **active** — bg: `#A6B0BC`, color: `#101216`
357- **disabled** — opacity: `0.35`
358- **loading** — opacity: `0.6`
359- **selected** — bg: `#A6B0BC`, color: `#101216`
360 
361#### Input
362 
363- **hover** — border: `1px solid rgba(166, 176, 188, 0.5)`
364- **focus** — bg: `rgba(166, 176, 188, 0.05)`, border: `1px solid #A6B0BC`
365- **disabled** — opacity: `0.35`
366- **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444`
367 
368#### Card
369 
370- **hover** — border: `1px solid #A6B0BC`
371- **selected** — bg: `rgba(166, 176, 188, 0.05)`, border: `1px solid #A6B0BC`
372- **dragging** — opacity: `0.7`
373 
374#### Tab
375 
376- **hover** — color: `#A6B0BC`
377- **focus** — outline: `1px dashed #A6B0BC`, outline-offset: `1px`
378- **selected** — bg: `rgba(166, 176, 188, 0.1)`, color: `#A6B0BC`
379 
380### Density
381 
382| Mode | padding × | row × | body | radius × | Use for |
383|------|-----------|-------|------|----------|---------|
384| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
385| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
386| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
387 
388### Motion
389 
390**Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms.
391 
392```css
393transition: all 120ms linear;
394```
395 
396| Token | Value |
397|-------|-------|
398| duration.instant | `0ms` |
399| duration.fast | `60ms` |
400| duration.base | `120ms` |
401| duration.slow | `200ms` |
402| easing.standard | `linear` |
403| easing.decelerate | `linear` |
404| easing.accelerate | `linear` |
405| easing.spring | `steps(2, end)` |
406 
407### Elevation
408 
409Five-level scale, system-specific recipe.
410 
411| Level | Shadow | Recipe |
412|-------|--------|--------|
413| level0 | `none` | Flat — the stroke carries the hierarchy. |
414| level1 | `none` | Border tone lifts the surface. |
415| level2 | `0 0 0 1px rgba(166, 176, 188, 0.5)` | Ring outline — popover. |
416| level3 | `0 0 0 1px #A6B0BC, 0 12px 32px -16px rgba(166, 176, 188, 0.4)` | Sheet with accent ring + glow. |
417| level4 | `0 0 0 1px #A6B0BC, 0 24px 64px -20px rgba(166, 176, 188, 0.5)` | Modal with accent ring + glow. |
418 
419### Content
420 
421- **measure:** `78ch` (max line length for body prose)
422- **paragraph spacing:** `1em`
423- **list indent:** `1.25em`
424- **list gap:** `0.35em`
425- **link:** color `#A6B0BC`, underline `always`
426- **blockquote:** border `1px solid rgba(166, 176, 188, 0.5)`, padding `0.7em 1em`
427- **code:** background `rgba(166, 176, 188, 0.12)`, color `#A6B0BC`
428 
429### Accessibility (WCAG 2.1)
430 
431**Overall:** AA
432 
433| Pair | Ratio | Required | Grade | Suggested fix |
434|------|-------|----------|-------|---------------|
435| Body text on surface | 13.01:1 | AA | AAA | — |
436| Body text on canvas | 13.67:1 | AA | AAA | — |
437| Muted text on surface | 5.12:1 | AA | AA | — |
438| Accent on surface | 8.53:1 | AA-Large | AAA | — |
439| Accent on canvas | 8.96:1 | AA-Large | AAA | — |
440
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=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: ['"JetBrains Mono"', 'serif'],
        sans:    ['"Geist"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#5EE9FF',
        secondary: '#7B8794',
        accent:    '#A6B0BC',
        neutral:   '#0A0B0D',
        surface:   '#101216',
      },
      borderRadius: {
        sm: '4px',
        md: '6px',
        lg: '8px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Console Paper

Coding-vibe on warm paper. Mono everywhere — display, body, captions — with a single muted terracotta accent. Hairlines instead of shadows, strict 4px subgrid. Developer discipline without the dark canvas.

developerminimallightpapertechnical
Console.app
ProductPricingDocsAbout
Sign inGet started→
developer · minimal · light

Build with Console Paper.

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

Token Mesh

Crypto without the neon cliché. Dark slate surfaces, Geist sans for prose and Geist Mono with tabular numerals for every figure, a single cool mint accent reserved for positive deltas. Built for crypto exchanges, DeFi dashboards, and on-chain analytics that want to look serious — no glow, no purple-blue gradient, no rocket emoji.

cryptofintechdarkminimalmodern
Token.app
ProductPricingDocsAbout
Sign inGet started
crypto · fintech · dark

Build with Token Mesh.

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