minimal · warm · premium · audio

Whisper Studio.

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

01 · Preview

The kitchen sink.

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

01 · Color

Palette

primary

#000000

secondary

#4E4E4E

tertiary

#777169

neutral

#F5F5F5

surface

#FFFFFF

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

8px

md

12px

lg

20px

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: "Whisper Studio"
3description: "Near-white canvas with warm stone undertones, ethereal light-weight display type, and whisper-soft multi-layer shadows."
4tags: [minimal, warm, premium, audio]
5colors:
6  primary:   "#000000"
7  secondary: "#4E4E4E"
8  tertiary:  "#777169"
9  neutral:   "#F5F5F5"
10  surface:   "#FFFFFF"
11typography:
12  display: "Familjen Grotesk"
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "3rem / 1.08 / 300 / -0.96px"
17    h1:   "2.25rem / 1.17 / 300 / 0"
18    h2:   "1.5rem / 1.2 / 300 / 0"
19    body: "1.125rem / 1.55 / 400 / 0.18px"
20radius:
21  sm: 8px
22  md: 12px
23  lg: 20px
24  pill: 9999px
25shadows:
26  card:   "rgba(0,0,0,0.06) 0 0 0 1px, rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.04) 0 2px 4px"
27  button: "rgba(78, 50, 23, 0.04) 0 6px 16px, rgba(0,0,0,0.4) 0 0 1px"
28buttons:
29  primary:
30    background: #1A1A1A
31    color: #FAFAF7
32    border: none
33    shape: pill
34    padding: 10px 18px
35    font: 500
36  secondary:
37    background: #FAFAF7
38    color: #1A1A1A
39    border: 1px solid #E8E5DD
40    shape: pill
41    padding: 10px 18px
42    font: 500
43  outline:
44    background: transparent
45    color: #1A1A1A
46    border: 1px solid #1A1A1A
47    shape: pill
48    padding: 10px 18px
49    font: 500
50  ghost:
51    background: transparent
52    color: #6B6B6B
53    border: none
54    shape: pill
55    padding: 10px 14px
56    font: 500
57    hover: underline
58charts:
59  variant: "thin-bars"
60  stroke_width: 1
61  fill_opacity: 0.04
62  bar_gap: 16px
63  highlight: single
64  dot_marker: false
65fonts_url: "https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@300;400;500;700&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400&display=swap"
66dependencies: ["lucide-react"]
67---
68 
69# Whisper Studio
70 
71## AI Build Instructions
72 
73> **Read this section before writing any code.** The rules below
74> are non-negotiable. Every value used in the UI must come from this
75> file's frontmatter — never substitute, approximate, or invent new
76> colors, fonts, radii, or shadows. If a value is missing, ask the
77> user before adding one.
78 
79### 1 · Your role
80 
81You are building UI for a project that has adopted **Whisper Studio** as its
82design system. Treat `DESIGN.md` as the single source of truth.
83Your job is to translate the user's product requirements into
84components and pages that look like they were designed by the same
85person who authored this file.
86 
87### 2 · Token compliance
88 
89- Pull every color, font family, radius, shadow, and spacing value
90  from the frontmatter at the top of this file.
91- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
92  hard-code hex values that bypass the system.
93- When a token can be expressed as a CSS variable, declare it once
94  in your global stylesheet and reference it everywhere downstream.
95- The Google Fonts `<link>` is provided in the Typography section.
96  Add it to `<head>` before any component renders.
97 
98### 3 · Component recipes
99 
100Use these recipes verbatim when building the corresponding component.
101 
102#### Buttons
103 
104Four variants are defined. Pick one — never blend variants or invent a fifth.
105 
106- **Primary** — pill shape, bg `#1A1A1A`, text `#FAFAF7`, padding `10px 18px`, weight `500`.
107- **Secondary** — pill shape, bg `#FAFAF7`, text `#1A1A1A`, border `1px solid #E8E5DD`, padding `10px 18px`, weight `500`.
108- **Outline** — pill shape, text `#1A1A1A`, border `1px solid #1A1A1A`, padding `10px 18px`, weight `500`.
109- **Ghost** — pill shape, text `#6B6B6B`, padding `10px 14px`, weight `500`.
110 
111Reach for **primary** as the single dominant CTA per screen.
112**Secondary** for the supporting action. **Outline** for tertiary
113actions in toolbars. **Ghost** for inline links and table actions.
114 
115#### Cards
116 
117- Background: `#FFFFFF`
118- Shadow: `rgba(0,0,0,0.06) 0 0 0 1px, rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.04) 0 2px 4px`
119- Radius: `radius.lg` (`20px`)
120- Internal padding: `20px` for compact cards, `24–28px` for content cards.
121 
122#### Charts
123 
124- Bar/line variant: `thin-bars`
125- Highlight strategy: `single` — emphasize a single bar/point per chart.
126 
127#### Typography pairings
128 
129- **Display (`Familjen Grotesk`)** — h1, h2, hero headlines, brand wordmarks.
130- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
131- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
132 
133### 4 · Hard constraints
134 
135Never do any of the following without explicit instruction from the user:
136 
137- Introduce a new color, font, radius, or shadow that isn't declared above.
138- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
139- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
140- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
141- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
142 
143### 5 · Before you finish — verify
144 
145Run through this checklist for every screen you produce:
146 
147- [ ] Every color used appears in the Colors table above.
148- [ ] Headlines use the display font; body copy uses the body font.
149- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
150- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
151- [ ] Cards and dividers use the declared border + shadow tokens.
152- [ ] No values were invented; if you needed something missing, you stopped and asked.
153 
154---
155 
156## 1. Atmosphere
157 
158A near-white canvas where typography and whisper-soft shadows do the heavy lifting. Surfaces barely exist — they float above the page with the lightest possible touch. Warm stone undertones (`#F5F2EF`, `#777169`) prevent the purity from feeling clinical; this is restraint with body heat, not refrigerator-light minimalism.
159 
160The signature move: light-weight display type. Where most systems shout in bold, Whisper Studio uses **weight 300** to create intrigue through restraint. Body text uses **positive letter-spacing (+0.14 to +0.18px)** for an airy reading rhythm.
161 
162## 2. Palette
163 
164### Ink
165- `#000000` — primary text, headings, dark pill buttons
166- `#4E4E4E` — secondary text, descriptions
167- `#777169` — tertiary text, captions, decorative underlines
168 
169### Surface
170- `#FFFFFF` — primary canvas, cards, button backgrounds
171- `#F5F5F5` — secondary surface, subtle section breaks
172- `rgba(245, 242, 239, 0.8)` — **warm stone** — the signature CTA tint
173 
174### Lines
175- `#E5E5E5` — explicit borders
176- `rgba(0, 0, 0, 0.05)` — hairline section dividers
177- `rgba(147, 197, 253, 0.5)` — focus ring
178 
179## 3. Typography
180 
181| Role | Font | Size | Weight | Tracking |
182|------|------|------|--------|----------|
183| Hero | Familjen Grotesk | 48px | 300 | -0.96px |
184| Section | Familjen Grotesk | 36px | 300 | 0 |
185| Card title | Familjen Grotesk | 32px | 300 | 0 |
186| Body | Inter | 18px | 400 | +0.18px |
187| UI | Inter | 16px | 400 | +0.16px |
188| Nav | Inter | 15px | 500 | +0.15px |
189| Caps CTA | Inter | 14px | 700 | +0.7px, uppercase |
190| Code | JetBrains Mono | 13px | 400 | 0 |
191 
192**Light is the hero weight.** Display type at weight 300 is non-negotiable — bold display breaks the system. Body uses positive tracking for airy readability.
193 
194## 4. Shadow Stack
195 
196The most distinctive element. Every shadow is sub-0.1 opacity. Cards combine **inset edges + outline rings + soft elevation**, layered:
197 
198- **Level 0 (inset edge)** — `rgba(0,0,0,0.075) 0 0 0 0.5px inset` — defines surface boundary from inside
199- **Level 1 (outline ring)** — `rgba(0,0,0,0.06) 0 0 0 1px, rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.04) 0 2px 4px` — shadow-as-border for cards
200- **Level 2 (card lift)** — `rgba(0,0,0,0.4) 0 0 1px, rgba(0,0,0,0.04) 0 4px 4px` — pill buttons, prominent cards
201- **Level 3 (warm lift)** — `rgba(78, 50, 23, 0.04) 0 6px 16px` — featured CTAs only
202 
203**Shadows have color, not just darkness.** The warm CTA shadow uses brown (`rgba(78, 50, 23, ...)`) instead of neutral black — this is the system's hidden warmth.
204 
205## 5. Buttons
206 
207- **Primary pill** — black background, white text, `9999px` radius, padding `10px 14px`. The page's main action.
208- **Ghost pill** — white background, black text, `9999px` radius, level-2 shadow. Secondary action.
209- **Warm stone pill** — `rgba(245,242,239,0.8)` background, asymmetric padding (`12px 20px 12px 14px`), `30px` radius, level-3 warm shadow. The signature — featured CTAs and hero actions only.
210- **Caps button** — Inter 14px weight 700, uppercase, +0.7px tracking. For specific bold labels.
211 
212## 6. Cards
213 
214White background, **20px radius**, level-1 outline-ring shadow. Padding 24px. Cards are *not* pills — keep the radius generous but rectangular.
215 
216## 7. Spacing & Layout
217 
218- Base unit: **8px**
219- Scale: `1, 3, 4, 8, 9, 10, 11, 12, 16, 18, 20, 24, 28, 32, 40`
220- Section spacing: **120px** vertical between major sections — premium-modern generosity
221- Container max: **1200px**
222 
223## 8. Radius Scale
224 
225`2 / 4 / 8 / 12 / 20 / 24 / 30 / 9999` — `30px` is reserved for the warm stone pill. Pill (`9999px`) for primary buttons. Cards use 20–24px.
226 
227## 9. Icons
228 
229`lucide-react` only. Stroke width `1.5`. Default 20px, 16px in dense UI, 24px on primary actions. Icons inherit text color — never tint them.
230 
231## 10. Do's and Don'ts
232 
233✅ **Do**
234- Use Familjen Grotesk weight 300 for all display — the lightness *is* the brand
235- Layer shadows: inset edge + outline ring + soft elevation, all sub-0.1 opacity
236- Apply positive letter-spacing (+0.14 to +0.18px) to body text
237- Use 9999px radius for primary buttons (never on cards)
238- Use the warm stone pill for *one* hero CTA per page
239- Tint shadows warm (`rgba(78, 50, 23, ...)`) on featured elements
240 
241❌ **Don't**
242- Use bold display weight — it breaks the ethereal quality
243- Use heavy shadows (>0.1 opacity) — whisper-soft only
244- Apply pill radius to cards or surfaces — pills are buttons only
245- Apply negative letter-spacing to body
246- Make buttons opaque and heavy — translucent stone is the signature
247- Introduce brand colors — the palette is achromatic with warm undertones
248 
249---
250 
251## Tokens
252 
253> Generated from the same source the live preview renders from.
254> Treat the values below as the contract — never substitute approximations.
255 
256### Colors
257 
258| Role      | Value |
259|-----------|-------|
260| primary   | `#000000` |
261| secondary | `#4E4E4E` |
262| tertiary  | `#777169` |
263| neutral   | `#F5F5F5` |
264| surface   | `#FFFFFF` |
265 
266### Typography
267 
268- **Display:** Familjen Grotesk
269- **Body:** Inter
270- **Mono:** JetBrains Mono
271 
272| Role | size / leading / weight / tracking |
273|------|------------------------------------|
274| Hero | 3rem / 1.08 / 300 / -0.96px |
275| H1   | 2.25rem / 1.17 / 300 / 0 |
276| H2   | 1.5rem / 1.2 / 300 / 0 |
277| Body | 1.125rem / 1.55 / 400 / 0.18px |
278 
279### Radius
280 
281- sm: `8px`
282- md: `12px`
283- lg: `20px`
284- pill: `9999px`
285 
286### Shadows
287 
288- **card:** `rgba(0,0,0,0.06) 0 0 0 1px, rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.04) 0 2px 4px`
289- **button:** `rgba(78, 50, 23, 0.04) 0 6px 16px, rgba(0,0,0,0.4) 0 0 1px`
290 
291### Buttons
292 
293Four variants, each fully tokenized. The preview renders from these exact values.
294 
295#### Primary
296 
297| Property | Value |
298|----------|-------|
299| shape | `pill` |
300| background | `#1A1A1A` |
301| color | `#FAFAF7` |
302| border | `none` |
303| padding | `10px 18px` |
304| fontWeight | `500` |
305 
306#### Secondary
307 
308| Property | Value |
309|----------|-------|
310| shape | `pill` |
311| background | `#FAFAF7` |
312| color | `#1A1A1A` |
313| border | `1px solid #E8E5DD` |
314| padding | `10px 18px` |
315| fontWeight | `500` |
316 
317#### Outline
318 
319| Property | Value |
320|----------|-------|
321| shape | `pill` |
322| background | `transparent` |
323| color | `#1A1A1A` |
324| border | `1px solid #1A1A1A` |
325| padding | `10px 18px` |
326| fontWeight | `500` |
327 
328#### Ghost
329 
330| Property | Value |
331|----------|-------|
332| shape | `pill` |
333| background | `transparent` |
334| color | `#6B6B6B` |
335| border | `none` |
336| padding | `10px 14px` |
337| fontWeight | `500` |
338| hoverHint | `underline` |
339 
340### Charts
341 
342| Property | Value |
343|----------|-------|
344| variant | `thin-bars` |
345| strokeWidth | `1` |
346| fillOpacity | `0.04` |
347| barGap | `16px` |
348| highlight | `single` |
349| dotMarker | `false` |
350

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

Install dependencies

bash

npm install lucide-react

Tailwind config

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Familjen Grotesk"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#000000',
        secondary: '#4E4E4E',
        accent:    '#777169',
        neutral:   '#F5F5F5',
        surface:   '#FFFFFF',
      },
      borderRadius: {
        sm: '8px',
        md: '12px',
        lg: '20px',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Gazette Broadside

A maximalist editorial broadside that earns every inch with prose. Sage-grey paper surface, Old Standard TT at extreme display scale for headlines, drop-caps that span eight body lines, full-bleed pull-quote slabs in oversized serif italic, Inter for navigation, a single muted burgundy accent reserved for the editor's mark and the issue-number tag. Built for long-form magazines, opinion sections, and editorial publishers who lead with words at oversized scale.

editorialpremiumwarmserifbold

Gazette.app

ProductPricingDocsAbout

Sign inGet started

editorial · premium · warm

Build with Gazette Broadside.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

Argent Machined

Cool brushed silver on a slate canvas. The metallic surface appears only on the primary CTA and one hero badge — everywhere else is graphite ink and quiet steel hairlines. Premium hardware, machined.

metallicpremiumcoolminimalhardware

Argent.app

ProductPricingDocsAbout

Sign inGet started

metallic · premium · cool

Build with Argent Machined.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational