design.md
Back to directory
legal · editorial · premium · warm · serif

Chambers Counsel.

A law firm that earns trust through restraint. Deep oxford-navy ink on warm parchment, EB Garamond at oversized scale for partner names and case headings, Inter for body, a single muted gold-leaf accent reserved for case-number tags and verified-citation marks. Built for law firms, chambers, advisory practices, and policy institutes where gravitas is the brand.

01 · Preview

The kitchen sink.

Chambers.app
ProductPricingDocsAbout
Sign inGet started
legal · editorial · premium

Build with Chambers Counsel.

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
#1A2540
secondary
#6A6657
tertiary
#1A2540
neutral
#E9E2CF
surface
#F3ECD8
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
1px
md
2px
lg
3px
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.

ArchetypeEditorial

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

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
1---
2name: "Chambers Counsel"
3description: "A law firm that earns trust through restraint. Deep oxford-navy ink on warm parchment, EB Garamond at oversized scale for partner names and case headings, Inter for body, a single muted gold-leaf accent reserved for case-number tags and verified-citation marks. Built for law firms, chambers, advisory practices, and policy institutes where gravitas is the brand."
4tags: [legal, editorial, premium, warm, serif]
5colors:
6  primary:   "#1a2540"
7  secondary: "#6a6657"
8  tertiary:  "#1a2540"
9  neutral:   "#e9e2cf"
10  surface:   "#f3ecd8"
11typography:
12  display: "EB Garamond"
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "7rem / 0.95 / 400 / -0.04em"
17    h1:   "4rem / 1.05 / 400 / -0.025em"
18    h2:   "1.875rem / 1.22 / 500 / -0.012em"
19    body: "1.0625rem / 1.7 / 400 / -0.005em"
20radius:
21  sm: 1px
22  md: 2px
23  lg: 3px
24  pill: 9999px
25shadows:
26  card:   none
27  button: none
28borders:
29  card:    "1px solid rgba(26,37,64,0.12)"
30  divider: rgba(26,37,64,0.16)
31buttons:
32  primary:
33    background: #1a2540
34    color: #f3ecd8
35    border: none
36    shape: sharp
37    padding: 13px 26px
38    font: 500 / 0.8125rem / 0.18em
39    uppercase: true
40  secondary:
41    background: transparent
42    color: #1a2540
43    border: 1px solid #1a2540
44    shape: sharp
45    padding: 13px 26px
46    font: 500 / 0.8125rem / 0.18em
47    uppercase: true
48  outline:
49    background: transparent
50    color: #1a2540
51    border: 1px solid rgba(26,37,64,0.20)
52    shape: sharp
53    padding: 13px 26px
54    font: 500 / 0.8125rem / 0.18em
55    uppercase: true
56  ghost:
57    background: transparent
58    color: #6a6657
59    border: none
60    shape: sharp
61    padding: 13px 18px
62    font: 500 / 0.8125rem / 0.18em
63    uppercase: true
64charts:
65  variant: "thin-bars"
66  stroke_width: 1
67  fill_opacity: 0
68  gridlines: false
69  bar_gap: 18px
70  highlight: single
71  dot_marker: false
72fonts_url: "https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
73dependencies: ["lucide-react"]
74---
75 
76# Chambers Counsel
77 
78## AI Build Instructions
79 
80> **Read this section before writing any code.** The rules below
81> are non-negotiable. Every value used in the UI must come from this
82> file's frontmatter — never substitute, approximate, or invent new
83> colors, fonts, radii, or shadows. If a value is missing, ask the
84> user before adding one.
85 
86### 1 · Your role
87 
88You are building UI for a project that has adopted **Chambers Counsel** as its
89design system. Treat `DESIGN.md` as the single source of truth.
90Your job is to translate the user's product requirements into
91components and pages that look like they were designed by the same
92person who authored this file.
93 
94### 2 · Token compliance
95 
96- Pull every color, font family, radius, shadow, and spacing value
97  from the frontmatter at the top of this file.
98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
99  hard-code hex values that bypass the system.
100- When a token can be expressed as a CSS variable, declare it once
101  in your global stylesheet and reference it everywhere downstream.
102- The Google Fonts `<link>` is provided in the Typography section.
103  Add it to `<head>` before any component renders.
104 
105### 3 · Component recipes
106 
107Use these recipes verbatim when building the corresponding component.
108 
109#### Buttons
110 
111Four variants are defined. Pick one — never blend variants or invent a fifth.
112 
113- **Primary** — sharp shape, bg `#1a2540`, text `#f3ecd8`, padding `13px 26px`, weight `500`, uppercased.
114- **Secondary** — sharp shape, text `#1a2540`, border `1px solid #1a2540`, padding `13px 26px`, weight `500`, uppercased.
115- **Outline** — sharp shape, text `#1a2540`, border `1px solid rgba(26,37,64,0.20)`, padding `13px 26px`, weight `500`, uppercased.
116- **Ghost** — sharp shape, text `#6a6657`, padding `13px 18px`, weight `500`, uppercased.
117 
118Reach for **primary** as the single dominant CTA per screen.
119**Secondary** for the supporting action. **Outline** for tertiary
120actions in toolbars. **Ghost** for inline links and table actions.
121 
122#### Cards
123 
124- Background: `#f3ecd8`
125- Border: `1px solid rgba(26,37,64,0.12)`
126- Shadow: `none`
127- Radius: `radius.lg` (`3px`)
128- Internal padding: `20px` for compact cards, `24–28px` for content cards.
129 
130#### Tabs
131 
132Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
133 
134#### Charts
135 
136- Bar/line variant: `thin-bars`
137- No gridlines — let the bars/lines carry the data.
138- Highlight strategy: `single` — emphasize a single bar/point per chart.
139 
140#### Typography pairings
141 
142- **Display (`EB Garamond`)** — h1, h2, hero headlines, brand wordmarks.
143- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
144- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
145 
146### 4 · Hard constraints
147 
148Never do any of the following without explicit instruction from the user:
149 
150- Introduce a new color, font, radius, or shadow that isn't declared above.
151- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
152- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
153- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
154- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
155 
156### 5 · Before you finish — verify
157 
158Run through this checklist for every screen you produce:
159 
160- [ ] Every color used appears in the Colors table above.
161- [ ] Headlines use the display font; body copy uses the body font.
162- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
163- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
164- [ ] Cards and dividers use the declared border + shadow tokens.
165- [ ] No values were invented; if you needed something missing, you stopped and asked.
166 
167---
168 
169## 1. Atmosphere
170 
171Chambers Counsel is a law firm that earns trust through restraint. The page surface is warm parchment `#f3ecd8` — the color of a quality letterhead, never bright white. Partner names and case headings run in EB Garamond at 112px, weight 400 — the calm classical serif giving every name the weight of a court ruling without any heaviness. Body sits in Inter at 17px on a 1.7 leading. UI labels run in Inter 500 with extreme 0.18em uppercase tracking — the engraved-brass-plate caption voice. The single accent is muted gold-leaf `#a08648` that appears only on case-number tags, verified-citation marks, and the footnote dagger — the marks of authority, never decoration.
172 
173The discipline is in the proportion: massive EB Garamond on warm parchment, generous negative space, and one gold-leaf mark per page that reads as a notarized seal.
174 
175**Signature moves**
176- EB Garamond 400 at 112px for partner/case names — calm classical serif, gravitas through scale
177- Warm parchment surface `#f3ecd8` — never white, never beige
178- Gold-leaf `#a08648` exclusively on case-number tags + verified citations + footnote daggers
179- All UI labels uppercase 0.18em tracking — the engraved-brass-plate voice
180- Sharp 1-3px radius — almost zero, brass-plate precision
181- Section padding 200px desktop — the air IS the chambers
182 
183## 2. Palette
184 
185### Surfaces
186- **Parchment** `#f3ecd8` — page background (warm letterhead)
187- **Parchment Lift** `#e9e2cf` — secondary surfaces, footer
188- **Hairline** `rgba(26,37,64,0.12)` — every divider
189 
190### Ink
191- **Oxford Navy** `#1a2540` — text, headings, primary CTA fill
192- **Ink 50** `#6a6657` — secondary text, mono captions
193 
194### Accent
195- **Gold Leaf** `#a08648` — case-number tags, verified citations, footnote daggers
196- That is the only color in the system.
197 
198## 3. Typography
199 
200| Role | Font | Size | Weight | Leading | Tracking |
201|------|------|------|--------|---------|----------|
202| Partner Name (Hero) | EB Garamond | 112px | 400 | 0.95 | -0.04em |
203| H1 | EB Garamond | 64px | 400 | 1.05 | -0.025em |
204| H2 | EB Garamond | 30px | 500 | 1.22 | -0.012em |
205| Pull Quote | EB Garamond (italic) | 26px | 400 | 1.32 | -0.01em |
206| Body | Inter | 17px | 400 | 1.7 | -0.005em |
207| UI / Button | Inter | 13px | 500 | 1.4 | 0.18em uppercase |
208| Caption / Date | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase |
209| Case Number | JetBrains Mono | 13px | 500 | 1.0 | 0.04em tabular-nums |
210 
211EB Garamond at 400 only — the classical proportion breaks at any heavier weight. Italic reserved for case quotations and pull quotes.
212 
213## 4. Buttons
214 
215### Primary (Oxford Navy — Engage Counsel only)
216```css
217background: #1a2540;
218color: #f3ecd8;
219padding: 13px 26px;
220border-radius: 2px;
221text-transform: uppercase;
222letter-spacing: 0.18em;
223font-weight: 500;
224```
225 
226The 0.18em tracking is wider than typical UI — that is the engraved-brass-plate voice carried into the engagement gesture. Reads as a notarized seal, not a CTA button.
227 
228### Secondary (Navy Outline)
229- Transparent, 1px solid navy, navy text — same near-sharp shape, same wide tracking
230 
231### Outline & Ghost
232- Outline: transparent, 1px hairline at 20% navy
233- Ghost: no border, ink-50 uppercase, hover underlines
234 
235## 5. Cards
236 
237```css
238background: #f3ecd8;
239border: 1px solid rgba(26,37,64,0.12);
240border-radius: 3px;
241box-shadow: none;
242```
243 
244NO shadows, NO inset highlights. Practice-area cards lift to parchment-lift surface with a 1px navy top border (3px wide) — the only chrome.
245 
246## 6. Charts
247 
248Thin precise bars (3px wide, 18px gap). One bar in gold-leaf, others in 18% navy. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts are reserved for case-outcome breakdowns and read as exhibits.
249 
250## 7. Tabs
251 
252Underline 1px in navy for the active state. Inactive tabs are ink-50 in uppercase 0.18em. The active label is set in EB Garamond italic at the same size — that is the rhythm change, not a color shift.
253 
254## 8. Spacing
255 
256- Base 8px
257- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200, 280`
258- Section padding: 200px desktop, 96px mobile — the air IS the chambers
259 
260## 9. Do's & don'ts
261 
262✅ **Do**
263- Use EB Garamond at 400 only — anything heavier breaks the classical proportion
264- Hold the warm parchment surface — white reads as web app, beige reads as old textbook
265- Reserve gold-leaf for case-number tags + verified citations + footnote daggers exclusively
266- Use 0.18em uppercase tracking on every UI label — the engraved-brass-plate voice
267 
268❌ **Don't**
269- Use stock photos of pillars or scales of justice — the typography earns the gravitas
270- Use EB Garamond at 600+ — bold breaks the classical proportion
271- Use a second accent — gold-leaf alone, on three specific marks
272- Use any radius beyond 3px — corners must read as brass-plate, not pill
273 
274---
275 
276## Tokens
277 
278> Generated from the same source the live preview renders from.
279> Treat the values below as the contract — never substitute approximations.
280 
281### Colors
282 
283| Role      | Value |
284|-----------|-------|
285| primary   | `#1a2540` |
286| secondary | `#6a6657` |
287| tertiary  | `#1a2540` |
288| neutral   | `#e9e2cf` |
289| surface   | `#f3ecd8` |
290 
291### Typography
292 
293- **Display:** EB Garamond
294- **Body:** Inter
295- **Mono:** JetBrains Mono
296 
297| Role | size / leading / weight / tracking |
298|------|------------------------------------|
299| Hero | 7rem / 0.95 / 400 / -0.04em |
300| H1   | 4rem / 1.05 / 400 / -0.025em |
301| H2   | 1.875rem / 1.22 / 500 / -0.012em |
302| Body | 1.0625rem / 1.7 / 400 / -0.005em |
303 
304### Radius
305 
306- sm: `1px`
307- md: `2px`
308- lg: `3px`
309- pill: `9999px`
310 
311### Shadows
312 
313- **card:** `none`
314- **button:** `none`
315 
316### Borders
317 
318- **card:** `1px solid rgba(26,37,64,0.12)`
319- **divider:** `rgba(26,37,64,0.16)`
320 
321### Buttons
322 
323Four variants, each fully tokenized. The preview renders from these exact values.
324 
325#### Primary
326 
327| Property | Value |
328|----------|-------|
329| shape | `sharp` |
330| background | `#1a2540` |
331| color | `#f3ecd8` |
332| border | `none` |
333| padding | `13px 26px` |
334| fontWeight | `500` |
335| fontSize | `0.8125rem` |
336| tracking | `0.18em` |
337| uppercase | `true` |
338 
339#### Secondary
340 
341| Property | Value |
342|----------|-------|
343| shape | `sharp` |
344| background | `transparent` |
345| color | `#1a2540` |
346| border | `1px solid #1a2540` |
347| padding | `13px 26px` |
348| fontWeight | `500` |
349| fontSize | `0.8125rem` |
350| tracking | `0.18em` |
351| uppercase | `true` |
352 
353#### Outline
354 
355| Property | Value |
356|----------|-------|
357| shape | `sharp` |
358| background | `transparent` |
359| color | `#1a2540` |
360| border | `1px solid rgba(26,37,64,0.20)` |
361| padding | `13px 26px` |
362| fontWeight | `500` |
363| fontSize | `0.8125rem` |
364| tracking | `0.18em` |
365| uppercase | `true` |
366 
367#### Ghost
368 
369| Property | Value |
370|----------|-------|
371| shape | `sharp` |
372| background | `transparent` |
373| color | `#6a6657` |
374| border | `none` |
375| padding | `13px 18px` |
376| fontWeight | `500` |
377| fontSize | `0.8125rem` |
378| tracking | `0.18em` |
379| uppercase | `true` |
380 
381### Charts
382 
383| Property | Value |
384|----------|-------|
385| variant | `thin-bars` |
386| strokeWidth | `1` |
387| fillOpacity | `0` |
388| gridlines | `false` |
389| barGap | `18px` |
390| highlight | `single` |
391| dotMarker | `false` |
392 
393---
394 
395## Pro tokens
396 
397> Production-fidelity tokens. States, density, motion, elevation,
398> content rules and a measured WCAG contract — derived from the
399> resting tokens unless explicitly authored.
400 
401### States
402 
403#### Button
404 
405- **hover** — bg: `rgba(26, 37, 64, 0.92)`, shadow: `0 4px 20px -8px rgba(26, 37, 64, 0.4)`
406- **focus** — outline: `1.5px solid #1a2540`, outline-offset: `4px`
407- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
408- **disabled** — opacity: `0.45`
409- **loading** — opacity: `0.7`
410- **selected** — bg: `#1a2540`, color: `#f3ecd8`
411 
412#### Input
413 
414- **hover** — border: `1px solid #1a2540`
415- **focus** — border: `1px solid #1a2540`, shadow: `0 1px 0 0 #1a2540`
416- **disabled** — opacity: `0.45`
417- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
418 
419#### Card
420 
421- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
422- **selected** — border: `1px solid #1a2540`
423 
424#### Tab
425 
426- **hover** — color: `#1a2540`
427- **focus** — outline: `1.5px solid #1a2540`, outline-offset: `3px`
428- **selected** — color: `#1a2540`, border: `0 0 2px 0 solid #1a2540`
429 
430### Density
431 
432| Mode | padding × | row × | body | radius × | Use for |
433|------|-----------|-------|------|----------|---------|
434| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
435| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
436| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
437 
438### Motion
439 
440**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
441 
442```css
443transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
444```
445 
446| Token | Value |
447|-------|-------|
448| duration.instant | `80ms` |
449| duration.fast | `180ms` |
450| duration.base | `320ms` |
451| duration.slow | `500ms` |
452| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
453| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
454| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
455| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
456 
457### Elevation
458 
459Five-level scale, system-specific recipe.
460 
461| Level | Shadow | Recipe |
462|-------|--------|--------|
463| level0 | `none` | Hairline only — typical editorial resting state. |
464| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
465| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
466| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
467| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
468 
469### Content
470 
471- **measure:** `60ch` (max line length for body prose)
472- **paragraph spacing:** `1.5em`
473- **list indent:** `1.75em`
474- **list gap:** `0.55em`
475- **link:** color `#1a2540`, underline `always`
476- **blockquote:** border `4px solid #1a2540`, padding `0.4em 0 0.4em 1.5em`
477- **code:** background `rgba(26, 37, 64, 0.06)`, color `#1a2540`
478 
479### Accessibility (WCAG 2.1)
480 
481**Overall:** AA
482 
483| Pair | Ratio | Required | Grade | Suggested fix |
484|------|-------|----------|-------|---------------|
485| Body text on surface | 12.87:1 | AA | AAA | — |
486| Body text on canvas | 11.75:1 | AA | AAA | — |
487| Muted text on surface | 4.88:1 | AA | AA | — |
488| Accent on surface | 12.87:1 | AA-Large | AAA | — |
489| Accent on canvas | 11.75:1 | AA-Large | AAA | — |
490
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=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"EB Garamond"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1a2540',
        secondary: '#6a6657',
        accent:    '#1a2540',
        neutral:   '#e9e2cf',
        surface:   '#f3ecd8',
      },
      borderRadius: {
        sm: '1px',
        md: '2px',
        lg: '3px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Solflare Bloom

A low-sun grainy gradient that runs deep ember to marigold with real fractal-noise grain. Cream surface, Inter Tight display in heavy 800, generous slabs of negative space, and the gradient burns through exactly the primary CTA, the featured tile, and the active chart bar. A warm, restrained bloom — never sunset cliché.

grainygradientwarmmodernlight
Solflare.app
ProductPricingDocsAbout
Sign inGet started
grainy · gradient · warm

Build with Solflare Bloom.

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

Whisper Studio

Near-white canvas with warm stone undertones, ethereal light-weight display type, and whisper-soft multi-layer shadows.

minimalwarmpremiumaudio
Whisper.app
ProductPricingDocsAbout
Sign inGet started
minimal · warm · premium

Build with Whisper Studio.

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