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

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=Geist:wght@400;500;600&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: ['"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',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Thesis Quarterly

An academic journal that lives well online. Cream-paper surfaces, Source Serif 4 for body running text, IBM Plex Mono for footnote numerals and citations, a single deep cobalt accent reserved for the active citation link. Built for research publications, scientific journals, and long-form scholarly content.

academiceditorialminimalpremiumwarm

Thesis.app

ProductPricingDocsAbout

Sign inGet started