/
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 · 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
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=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',
      },
    },
  },
};
05 · Keep browsing

Try another system.

Arcade Night

Esports broadcast in dark mode. Near-black surfaces, sharp display serif paired with a square mono, knife-edge corners, a single high-voltage lime accent. Built for tournaments and launch events.

darkgamingeventboldpremium
Arcade.app
ProductPricingDocsAbout
Sign inGet started
dark · gaming · event

Build with Arcade Night.

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

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.

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