design.md
Back to directory
minimal · paper · warm · premium · writing

Vellum Quiet.

Warm vellum paper canvas, humanist sans at quiet sizes, refined 6px corners, no shadows — only a faint warm hairline. One deep moss accent. Calibrated to feel like a well-set page in a notebook.

01 · Preview

The kitchen sink.

Vellum.app
ProductPricingDocsAbout
Sign inGet started
minimal · paper · warm

Build with Vellum Quiet.

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
#1F1B14
secondary
#7A7264
tertiary
#A89F90
neutral
#F4EEDF
surface
#FBF7EB
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
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.

ArchetypeMaterial

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: "Vellum Quiet"
3description: "Warm vellum paper canvas, humanist sans at quiet sizes, refined 6px corners, no shadows — only a faint warm hairline. One deep moss accent. Calibrated to feel like a well-set page in a notebook."
4tags: [minimal, paper, warm, premium, writing]
5colors:
6  primary:   "#1F1B14"
7  secondary: "#7A7264"
8  tertiary:  "#A89F90"
9  neutral:   "#F4EEDF"
10  surface:   "#FBF7EB"
11typography:
12  display: "Inter Tight"
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4rem / 1.08 / 500 / -0.03em"
17    h1:   "2.375rem / 1.12 / 500 / -0.025em"
18    h2:   "1.375rem / 1.35 / 500 / -0.012em"
19    body: "1.0625rem / 1.7 / 400 / -0.003em"
20radius:
21  sm: 4px
22  md: 6px
23  lg: 8px
24shadows:
25  card:   "0 0 0 1px rgba(31, 27, 20, 0.08)"
26  button: none
27borders:
28  card:    "1px solid rgba(31, 27, 20, 0.08)"
29  divider: "rgba(31, 27, 20, 0.12)"
30buttons:
31  primary:
32    background: #3E5A3A
33    color: #FBF7EB
34    border: 1px solid #3E5A3A
35    shape: rounded
36    padding: 12px 22px
37    font: 500 / 0.9375rem / -0.005em
38  secondary:
39    background: #FBF7EB
40    color: #1F1B14
41    border: 1px solid rgba(31, 27, 20, 0.16)
42    shape: rounded
43    padding: 12px 22px
44    font: 500 / 0.9375rem / -0.005em
45  outline:
46    background: transparent
47    color: #1F1B14
48    border: 1px solid rgba(31, 27, 20, 0.20)
49    shape: rounded
50    padding: 11px 21px
51    font: 500 / 0.9375rem / -0.005em
52  ghost:
53    background: transparent
54    color: #7A7264
55    border: none
56    shape: rounded
57    padding: 11px 4px
58    font: 500 / 0.9375rem / -0.005em
59    hover: underline
60charts:
61  variant: line
62  stroke_width: 1.5
63  gridlines: false
64  highlight: last
65  dot_marker: true
66  axis_color: "#7A7264"
67  palette: ["#3E5A3A"]
68fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Vellum Quiet
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 **Vellum Quiet** 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** — rounded shape, bg `#3E5A3A`, text `#FBF7EB`, border `1px solid #3E5A3A`, padding `12px 22px`, weight `500`.
110- **Secondary** — rounded shape, bg `#FBF7EB`, text `#1F1B14`, border `1px solid rgba(31, 27, 20, 0.16)`, padding `12px 22px`, weight `500`.
111- **Outline** — rounded shape, text `#1F1B14`, border `1px solid rgba(31, 27, 20, 0.20)`, padding `11px 21px`, weight `500`.
112- **Ghost** — rounded shape, text `#7A7264`, padding `11px 4px`, 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: `#FBF7EB`
121- Border: `1px solid rgba(31, 27, 20, 0.08)`
122- Shadow: `0 0 0 1px rgba(31, 27, 20, 0.08)`
123- Radius: `radius.lg` (`8px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Charts
127 
128- Bar/line variant: `line`
129- No gridlines — let the bars/lines carry the data.
130- Highlight strategy: `last` — emphasize a single bar/point per chart.
131- Use the declared palette in order: `#3E5A3A`.
132 
133#### Typography pairings
134 
135- **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks.
136- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
137- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
138 
139### 4 · Hard constraints
140 
141Never do any of the following without explicit instruction from the user:
142 
143- Introduce a new color, font, radius, or shadow that isn't declared above.
144- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
145- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
146- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
147- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
148 
149### 5 · Before you finish — verify
150 
151Run through this checklist for every screen you produce:
152 
153- [ ] Every color used appears in the Colors table above.
154- [ ] Headlines use the display font; body copy uses the body font.
155- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
156- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
157- [ ] Cards and dividers use the declared border + shadow tokens.
158- [ ] No values were invented; if you needed something missing, you stopped and asked.
159 
160---
161 
162## Overview
163Vellum Quiet is calibrated to feel like a well-set page in a notebook. The canvas is warm vellum (distinctly not-white). Type is one humanist sans (Inter Tight) used at refined, restrained sizes — the hero stops at 4rem rather than pushing to 7-8rem. There are no shadows; depth comes from a single warm hairline. One deep moss-green accent does the entire chromatic work.
164 
165For writing apps, indie publishers, slow-content platforms, knowledge tools, anything that should feel considered and quiet rather than clamoring for attention.
166 
167## Color
168- **Ink #1F1B14** — primary text. Deep ink with a warm bias so it sits on vellum naturally.
169- **Warm graphite #7A7264** — secondary text.
170- **Soft graphite #A89F90** — captions, axis labels.
171- **Vellum #F4EEDF** — page canvas. Warm paper, distinctly not-white.
172- **Surface #FBF7EB** — card surface, a notch lighter and warmer than canvas.
173- **Moss #3E5A3A** — the only chromatic accent. Primary CTA, links, chart line.
174 
175The accent is a deep, slightly desaturated moss — not bright, not olive. It sits in the warm-paper world without breaking it.
176 
177## Typography
178**Inter Tight for display, Inter for body.** Same family lineage, different optical sizes.
179 
180| Role | Font | Size | Weight | Tracking |
181|------|------|------|--------|----------|
182| Hero | Inter Tight | 4rem | 500 | -0.03em |
183| H1 | Inter Tight | 2.375rem | 500 | -0.025em |
184| H2 | Inter Tight | 1.375rem | 500 | -0.012em |
185| Body | Inter | 1.0625rem | 400 | -0.003em / 1.7 |
186 
187The whole system runs at weight 500 for display — never 600 or 700. The restraint is the brand.
188 
189## Geometry
190- **Radii: 4 / 6 / 8.** Refined, neither sharp nor soft.
191- **No shadows.** A 1px ink hairline at 8% opacity is the only depth signal.
192- **Section gap: 112px** desktop, 72px mobile.
193- **12-column grid** with 24px gutters.
194 
195## Buttons
196- **Primary** — solid moss green, vellum label.
197- **Secondary** — surface vellum, ink label, warm hairline at 16% opacity.
198- **Outline** — bare hairline at 20% opacity.
199- **Ghost** — bare warm-graphite label, hover underline.
200 
201All buttons sit at 12px / 22px padding with 6px corners. The button is small and considered — never a CTA shouting for clicks.
202 
203## Cards
204Surface vellum on canvas, 1px ink hairline at 8% opacity, 6px corners, **no shadow**. Padding 28-32px. The card depth comes from the hairline alone.
205 
206## Charts & Data
207Single moss-green line at 1.5px stroke, no gridlines, end-of-line dot marker. Axis labels in soft graphite at 11px Inter. The chart reads as a notation, not a marketing graphic.
208 
209## Do's and Don'ts
210- ✅ Vellum canvas, never pure white. The warmth is the system.
211- ✅ Hero stops at 4rem. The system never shouts.
212- ✅ Display weight 500, never higher.
213- ✅ One chromatic accent — moss. Used sparingly.
214- ❌ No drop shadows. Hairline is the only depth.
215- ❌ No second chromatic accent. Moss stands alone.
216- ❌ No oversized type. The whole identity rests on restraint.
217- ❌ No pill buttons. Refined 6px corners only.
218 
219---
220 
221## Tokens
222 
223> Generated from the same source the live preview renders from.
224> Treat the values below as the contract — never substitute approximations.
225 
226### Colors
227 
228| Role      | Value |
229|-----------|-------|
230| primary   | `#1F1B14` |
231| secondary | `#7A7264` |
232| tertiary  | `#A89F90` |
233| neutral   | `#F4EEDF` |
234| surface   | `#FBF7EB` |
235 
236### Typography
237 
238- **Display:** Inter Tight
239- **Body:** Inter
240- **Mono:** JetBrains Mono
241 
242| Role | size / leading / weight / tracking |
243|------|------------------------------------|
244| Hero | 4rem / 1.08 / 500 / -0.03em |
245| H1   | 2.375rem / 1.12 / 500 / -0.025em |
246| H2   | 1.375rem / 1.35 / 500 / -0.012em |
247| Body | 1.0625rem / 1.7 / 400 / -0.003em |
248 
249### Radius
250 
251- sm: `4px`
252- md: `6px`
253- lg: `8px`
254 
255### Shadows
256 
257- **card:** `0 0 0 1px rgba(31, 27, 20, 0.08)`
258- **button:** `none`
259 
260### Borders
261 
262- **card:** `1px solid rgba(31, 27, 20, 0.08)`
263- **divider:** `rgba(31, 27, 20, 0.12)`
264 
265### Buttons
266 
267Four variants, each fully tokenized. The preview renders from these exact values.
268 
269#### Primary
270 
271| Property | Value |
272|----------|-------|
273| shape | `rounded` |
274| background | `#3E5A3A` |
275| color | `#FBF7EB` |
276| border | `1px solid #3E5A3A` |
277| padding | `12px 22px` |
278| fontWeight | `500` |
279| fontSize | `0.9375rem` |
280| tracking | `-0.005em` |
281 
282#### Secondary
283 
284| Property | Value |
285|----------|-------|
286| shape | `rounded` |
287| background | `#FBF7EB` |
288| color | `#1F1B14` |
289| border | `1px solid rgba(31, 27, 20, 0.16)` |
290| padding | `12px 22px` |
291| fontWeight | `500` |
292| fontSize | `0.9375rem` |
293| tracking | `-0.005em` |
294 
295#### Outline
296 
297| Property | Value |
298|----------|-------|
299| shape | `rounded` |
300| background | `transparent` |
301| color | `#1F1B14` |
302| border | `1px solid rgba(31, 27, 20, 0.20)` |
303| padding | `11px 21px` |
304| fontWeight | `500` |
305| fontSize | `0.9375rem` |
306| tracking | `-0.005em` |
307 
308#### Ghost
309 
310| Property | Value |
311|----------|-------|
312| shape | `rounded` |
313| background | `transparent` |
314| color | `#7A7264` |
315| border | `none` |
316| padding | `11px 4px` |
317| fontWeight | `500` |
318| fontSize | `0.9375rem` |
319| tracking | `-0.005em` |
320| hoverHint | `underline` |
321 
322### Charts
323 
324| Property | Value |
325|----------|-------|
326| variant | `line` |
327| strokeWidth | `1.5` |
328| gridlines | `false` |
329| highlight | `last` |
330| dotMarker | `true` |
331| axisColor | `#7A7264` |
332| palette | `#3E5A3A` |
333 
334---
335 
336## Pro tokens
337 
338> Production-fidelity tokens. States, density, motion, elevation,
339> content rules and a measured WCAG contract — derived from the
340> resting tokens unless explicitly authored.
341 
342### States
343 
344#### Button
345 
346- **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)`
347- **focus** — outline: `2px solid rgba(168, 159, 144, 0.5)`, outline-offset: `2px`
348- **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)`
349- **disabled** — opacity: `0.4`, filter: `saturate(0.5)`
350- **loading** — opacity: `0.7`
351- **selected** — bg: `#A89F90`, color: `#FBF7EB`
352 
353#### Input
354 
355- **hover** — border: `1px solid rgba(168, 159, 144, 0.5)`
356- **focus** — border: `1.5px solid #A89F90`, shadow: `0 0 0 4px rgba(168, 159, 144, 0.15)`
357- **disabled** — bg: `rgba(31, 27, 20, 0.04)`, opacity: `0.4`
358- **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)`
359 
360#### Card
361 
362- **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)`
363- **selected** — bg: `rgba(168, 159, 144, 0.04)`, border: `1.5px solid #A89F90`
364- **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9`
365 
366#### Tab
367 
368- **hover** — bg: `rgba(168, 159, 144, 0.06)`, color: `#A89F90`
369- **focus** — outline: `2px solid rgba(168, 159, 144, 0.5)`, outline-offset: `2px`
370- **selected** — color: `#A89F90`, border: `0 0 2px 0 solid #A89F90`
371 
372### Density
373 
374| Mode | padding × | row × | body | radius × | Use for |
375|------|-----------|-------|------|----------|---------|
376| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
377| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
378| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
379 
380### Motion
381 
382**Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way.
383 
384```css
385transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);
386```
387 
388| Token | Value |
389|-------|-------|
390| duration.instant | `80ms` |
391| duration.fast | `160ms` |
392| duration.base | `240ms` |
393| duration.slow | `380ms` |
394| easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` |
395| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
396| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
397| easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` |
398 
399### Elevation
400 
401Five-level scale, system-specific recipe.
402 
403| Level | Shadow | Recipe |
404|-------|--------|--------|
405| level0 | `none` | Flat — hairline border separates. |
406| level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. |
407| level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. |
408| level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. |
409| level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. |
410 
411### Content
412 
413- **measure:** `68ch` (max line length for body prose)
414- **paragraph spacing:** `1.2em`
415- **list indent:** `1.5em`
416- **list gap:** `0.5em`
417- **link:** color `#A89F90`, underline `hover`
418- **blockquote:** border `3px solid rgba(168, 159, 144, 0.6)`, padding `0.5em 0 0.5em 1.25em`
419- **code:** background `rgba(31, 27, 20, 0.06)`, color `#1F1B14`
420 
421### Accessibility (WCAG 2.1)
422 
423**Overall:** FAIL
424 
425| Pair | Ratio | Required | Grade | Suggested fix |
426|------|-------|----------|-------|---------------|
427| Body text on surface | 16:1 | AA | AAA | — |
428| Body text on canvas | 14.81:1 | AA | AAA | — |
429| Muted text on surface | 4.44:1 | AA | AA-Large | `#746d5f` → 4.79:1 (AA) |
430| Accent on surface | 2.44:1 | AA-Large | FAIL | `#766c5c` → 4.82:1 (AA) |
431| Accent on canvas | 2.26:1 | AA-Large | FAIL | `#706758` → 4.81:1 (AA) |
432
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=Inter+Tight:wght@400;500;600&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Inter Tight"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1F1B14',
        secondary: '#7A7264',
        accent:    '#A89F90',
        neutral:   '#F4EEDF',
        surface:   '#FBF7EB',
      },
      borderRadius: {
        sm: '4px',
        md: '6px',
        lg: '8px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Studio Margaux

A design-studio identity built on asymmetric oversized typography. Cream surfaces, Fraunces at extreme display scale paired with Inter Tight for body, an inked black block reserved for the studio mark and the single primary CTA, and an italic serif accent line that breaks every layout. Built for design agencies, art-direction portfolios, and creative studios that lead with type instead of imagery.

editorialagencywarmpremiumasymmetric
Studio.app
ProductPricingDocsAbout
Sign inGet started
editorial · agency · warm

Build with Studio Margaux.

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

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.

developerminimalmodernsaaspremium
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