design.md
Back to directory
editorial · minimal · premium · warm · modern

Linen Press.

Warm bone minimalism with a serif voice. Fraunces display headlines paired with Inter body, a single cognac accent reserved for active states, and generous hairline-only chrome. The quiet end of editorial — built for studios, journals, and brands that whisper.

01 · Preview

The kitchen sink.

Linen.app
ProductPricingDocsAbout
Sign inGet started
editorial · minimal · premium

Build with Linen Press.

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
#1D1A16
secondary
#6E6760
tertiary
#1D1A16
neutral
#EFE9DF
surface
#F7F2E8
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
8px
lg
14px
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: "Linen Press"
3description: "Warm bone minimalism with a serif voice. Fraunces display headlines paired with Inter body, a single cognac accent reserved for active states, and generous hairline-only chrome. The quiet end of editorial — built for studios, journals, and brands that whisper."
4tags: [editorial, minimal, premium, warm, modern]
5colors:
6  primary:   "#1d1a16"
7  secondary: "#6e6760"
8  tertiary:  "#1d1a16"
9  neutral:   "#efe9df"
10  surface:   "#f7f2e8"
11typography:
12  display: Fraunces
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.25rem / 1 / 400 / -0.03em"
17    h1:   "2.75rem / 1.08 / 400 / -0.025em"
18    h2:   "1.75rem / 1.2 / 500 / -0.015em"
19    body: "1.0625rem / 1.65 / 400 / -0.005em"
20radius:
21  sm: 4px
22  md: 8px
23  lg: 14px
24  pill: 9999px
25shadows:
26  card:   "rgba(29,26,22,0.04) 0 1px 2px"
27  button: none
28borders:
29  card:    "1px solid rgba(29,26,22,0.08)"
30  divider: rgba(29,26,22,0.10)
31buttons:
32  primary:
33    background: #1d1a16
34    color: #f7f2e8
35    border: none
36    shape: rounded
37    padding: 11px 22px
38    font: 500 / 0.875rem
39  secondary:
40    background: #efe9df
41    color: #1d1a16
42    border: 1px solid rgba(29,26,22,0.10)
43    shape: rounded
44    padding: 11px 22px
45    font: 500 / 0.875rem
46  outline:
47    background: transparent
48    color: #1d1a16
49    border: 1px solid rgba(29,26,22,0.18)
50    shape: rounded
51    padding: 11px 22px
52    font: 500 / 0.875rem
53  ghost:
54    background: transparent
55    color: #6e6760
56    border: none
57    shape: rounded
58    padding: 11px 16px
59    font: 500 / 0.875rem
60charts:
61  variant: "thin-bars"
62  stroke_width: 1.25
63  fill_opacity: 0.04
64  gridlines: false
65  bar_gap: 14px
66  highlight: single
67  dot_marker: true
68fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Linen Press
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 **Linen Press** 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 `#1d1a16`, text `#f7f2e8`, padding `11px 22px`, weight `500`.
110- **Secondary** — rounded shape, bg `#efe9df`, text `#1d1a16`, border `1px solid rgba(29,26,22,0.10)`, padding `11px 22px`, weight `500`.
111- **Outline** — rounded shape, text `#1d1a16`, border `1px solid rgba(29,26,22,0.18)`, padding `11px 22px`, weight `500`.
112- **Ghost** — rounded shape, text `#6e6760`, padding `11px 16px`, 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: `#f7f2e8`
121- Border: `1px solid rgba(29,26,22,0.08)`
122- Shadow: `rgba(29,26,22,0.04) 0 1px 2px`
123- Radius: `radius.lg` (`14px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Tabs
127 
128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
129 
130#### Charts
131 
132- Bar/line variant: `thin-bars`
133- No gridlines — let the bars/lines carry the data.
134- Highlight strategy: `single` — emphasize a single bar/point per chart.
135 
136#### Typography pairings
137 
138- **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks.
139- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
140- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
141 
142### 4 · Hard constraints
143 
144Never do any of the following without explicit instruction from the user:
145 
146- Introduce a new color, font, radius, or shadow that isn't declared above.
147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
151 
152### 5 · Before you finish — verify
153 
154Run through this checklist for every screen you produce:
155 
156- [ ] Every color used appears in the Colors table above.
157- [ ] Headlines use the display font; body copy uses the body font.
158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
160- [ ] Cards and dividers use the declared border + shadow tokens.
161- [ ] No values were invented; if you needed something missing, you stopped and asked.
162 
163---
164 
165## 1. Atmosphere
166 
167Linen Press is the quiet end of editorial. Headlines run in Fraunces 400 with optical sizing, set on a warm bone surface (`#f7f2e8`) that reads closer to uncoated paper than to white. Body sits in Inter at 17px on a 1.65 leading. Chrome is hairlines at 8% ink — no shadows, no decorative borders, no gradients. The single accent is a cognac `#a35828` that appears only on the active tab underline and the focus ring. Everything else is ink on bone.
168 
169The discipline is in the restraint: serif display + sans body, one accent on one element, and surfaces that shift only by hairline.
170 
171**Signature moves**
172- Fraunces 400 with optical sizing for hero — never bold, never italic in the hero
173- Warm bone surface `#f7f2e8` — never white, never grey
174- Single cognac accent `#a35828` reserved for the active tab underline and focus
175- Hairline-only chrome — no shadows on cards
176- Underline tabs only — pills feel too playful for this voice
177 
178## 2. Palette
179 
180### Surfaces
181- **Bone** `#f7f2e8` — page background
182- **Bone Lift** `#efe9df` — secondary card surface, secondary button
183- **Hairline** `rgba(29,26,22,0.08)` — every divider, every card edge
184 
185### Ink
186- **Ink** `#1d1a16` — text, headings, primary CTA fill
187- **Ink 60** `#6e6760` — secondary text
188 
189### Accent
190- **Cognac** `#a35828` — active tab underline, focus ring, chart highlight
191- **Cognac Soft** `rgba(163,88,40,0.14)` — hovered tab background
192 
193## 3. Typography
194 
195| Role | Font | Size | Weight | Leading | Tracking |
196|------|------|------|--------|---------|----------|
197| Hero | Fraunces | 68px | 400 | 1.0 | -0.03em |
198| H1 | Fraunces | 44px | 400 | 1.08 | -0.025em |
199| H2 | Fraunces | 28px | 500 | 1.2 | -0.015em |
200| Body | Inter | 17px | 400 | 1.65 | -0.005em |
201| UI | Inter | 13px | 500 | 1.4 | 0 |
202| Caption | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase |
203 
204Fraunces only at 400 / 500 — anything heavier breaks the quiet voice. Inter handles all UI weight.
205 
206## 4. Buttons
207 
208### Primary (Ink)
209```css
210background: #1d1a16;
211color: #f7f2e8;
212padding: 11px 22px;
213border-radius: 8px;
214font-weight: 500;
215```
216 
217### Secondary (Bone Lift)
218- Bone-lift surface, 1px hairline at 10% ink, ink text — same shape, same padding
219 
220### Outline & Ghost
221- Outline: transparent, 1px ink hairline at 18%
222- Ghost: no border, ink-secondary, hover underlines
223 
224## 5. Cards
225 
226```css
227background: #f7f2e8;
228border: 1px solid rgba(29,26,22,0.08);
229border-radius: 14px;
230box-shadow: rgba(29,26,22,0.04) 0 1px 2px;
231```
232 
233That single 1px shadow is the maximum. Featured cards lift to bone-lift surface — no second shadow, no second border.
234 
235## 6. Charts
236 
237Thin precise bars (4px wide, 14px gap). One bar in cognac, others in 16% ink. NO gridlines. Line charts at 1.25px ink with a 4% fill, ending in a cognac dot marker. Y-axis labels in JetBrains Mono uppercase 11px.
238 
239## 7. Tabs
240 
241Underline only. Active = cognac 1.5px underline, ink text. Inactive = ink-secondary, no underline. Hover = cognac-soft background wash.
242 
243## 8. Spacing
244 
245- Base 4px
246- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96`
247- Section padding: 96px desktop, 48px mobile
248 
249## 9. Do's & don'ts
250 
251✅ **Do**
252- Use Fraunces 400 for the hero — the optical-sized weight is the voice
253- Hold the bone surface `#f7f2e8` — white kills the warmth
254- Reserve cognac for active state + focus + chart highlight only
255- Keep chrome to hairlines — shadows break the paper feel
256 
257❌ **Don't**
258- Use Fraunces bold or italic in the hero — too theatrical for this register
259- Add a second accent — cognac alone, on three specific surfaces
260- Use pill tabs — underline is the only correct treatment
261- Add card shadows beyond the 1px hairline lift
262 
263---
264 
265## Tokens
266 
267> Generated from the same source the live preview renders from.
268> Treat the values below as the contract — never substitute approximations.
269 
270### Colors
271 
272| Role      | Value |
273|-----------|-------|
274| primary   | `#1d1a16` |
275| secondary | `#6e6760` |
276| tertiary  | `#1d1a16` |
277| neutral   | `#efe9df` |
278| surface   | `#f7f2e8` |
279 
280### Typography
281 
282- **Display:** Fraunces
283- **Body:** Inter
284- **Mono:** JetBrains Mono
285 
286| Role | size / leading / weight / tracking |
287|------|------------------------------------|
288| Hero | 4.25rem / 1 / 400 / -0.03em |
289| H1   | 2.75rem / 1.08 / 400 / -0.025em |
290| H2   | 1.75rem / 1.2 / 500 / -0.015em |
291| Body | 1.0625rem / 1.65 / 400 / -0.005em |
292 
293### Radius
294 
295- sm: `4px`
296- md: `8px`
297- lg: `14px`
298- pill: `9999px`
299 
300### Shadows
301 
302- **card:** `rgba(29,26,22,0.04) 0 1px 2px`
303- **button:** `none`
304 
305### Borders
306 
307- **card:** `1px solid rgba(29,26,22,0.08)`
308- **divider:** `rgba(29,26,22,0.10)`
309 
310### Buttons
311 
312Four variants, each fully tokenized. The preview renders from these exact values.
313 
314#### Primary
315 
316| Property | Value |
317|----------|-------|
318| shape | `rounded` |
319| background | `#1d1a16` |
320| color | `#f7f2e8` |
321| border | `none` |
322| padding | `11px 22px` |
323| fontWeight | `500` |
324| fontSize | `0.875rem` |
325 
326#### Secondary
327 
328| Property | Value |
329|----------|-------|
330| shape | `rounded` |
331| background | `#efe9df` |
332| color | `#1d1a16` |
333| border | `1px solid rgba(29,26,22,0.10)` |
334| padding | `11px 22px` |
335| fontWeight | `500` |
336| fontSize | `0.875rem` |
337 
338#### Outline
339 
340| Property | Value |
341|----------|-------|
342| shape | `rounded` |
343| background | `transparent` |
344| color | `#1d1a16` |
345| border | `1px solid rgba(29,26,22,0.18)` |
346| padding | `11px 22px` |
347| fontWeight | `500` |
348| fontSize | `0.875rem` |
349 
350#### Ghost
351 
352| Property | Value |
353|----------|-------|
354| shape | `rounded` |
355| background | `transparent` |
356| color | `#6e6760` |
357| border | `none` |
358| padding | `11px 16px` |
359| fontWeight | `500` |
360| fontSize | `0.875rem` |
361 
362### Charts
363 
364| Property | Value |
365|----------|-------|
366| variant | `thin-bars` |
367| strokeWidth | `1.25` |
368| fillOpacity | `0.04` |
369| gridlines | `false` |
370| barGap | `14px` |
371| highlight | `single` |
372| dotMarker | `true` |
373 
374---
375 
376## Pro tokens
377 
378> Production-fidelity tokens. States, density, motion, elevation,
379> content rules and a measured WCAG contract — derived from the
380> resting tokens unless explicitly authored.
381 
382### States
383 
384#### Button
385 
386- **hover** — bg: `rgba(29, 26, 22, 0.92)`, shadow: `0 4px 20px -8px rgba(29, 26, 22, 0.4)`
387- **focus** — outline: `1.5px solid #1d1a16`, outline-offset: `4px`
388- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
389- **disabled** — opacity: `0.45`
390- **loading** — opacity: `0.7`
391- **selected** — bg: `#1d1a16`, color: `#f7f2e8`
392 
393#### Input
394 
395- **hover** — border: `1px solid #1d1a16`
396- **focus** — border: `1px solid #1d1a16`, shadow: `0 1px 0 0 #1d1a16`
397- **disabled** — opacity: `0.45`
398- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
399 
400#### Card
401 
402- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
403- **selected** — border: `1px solid #1d1a16`
404 
405#### Tab
406 
407- **hover** — color: `#1d1a16`
408- **focus** — outline: `1.5px solid #1d1a16`, outline-offset: `3px`
409- **selected** — color: `#1d1a16`, border: `0 0 2px 0 solid #1d1a16`
410 
411### Density
412 
413| Mode | padding × | row × | body | radius × | Use for |
414|------|-----------|-------|------|----------|---------|
415| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
416| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
417| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
418 
419### Motion
420 
421**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
422 
423```css
424transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
425```
426 
427| Token | Value |
428|-------|-------|
429| duration.instant | `80ms` |
430| duration.fast | `180ms` |
431| duration.base | `320ms` |
432| duration.slow | `500ms` |
433| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
434| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
435| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
436| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
437 
438### Elevation
439 
440Five-level scale, system-specific recipe.
441 
442| Level | Shadow | Recipe |
443|-------|--------|--------|
444| level0 | `none` | Hairline only — typical editorial resting state. |
445| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
446| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
447| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
448| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
449 
450### Content
451 
452- **measure:** `60ch` (max line length for body prose)
453- **paragraph spacing:** `1.5em`
454- **list indent:** `1.75em`
455- **list gap:** `0.55em`
456- **link:** color `#1d1a16`, underline `always`
457- **blockquote:** border `4px solid #1d1a16`, padding `0.4em 0 0.4em 1.5em`
458- **code:** background `rgba(29, 26, 22, 0.06)`, color `#1d1a16`
459 
460### Accessibility (WCAG 2.1)
461 
462**Overall:** AA
463 
464| Pair | Ratio | Required | Grade | Suggested fix |
465|------|-------|----------|-------|---------------|
466| Body text on surface | 15.53:1 | AA | AAA | — |
467| Body text on canvas | 14.35:1 | AA | AAA | — |
468| Muted text on surface | 4.99:1 | AA | AA | — |
469| Accent on surface | 15.53:1 | AA-Large | AAA | — |
470| Accent on canvas | 14.35:1 | AA-Large | AAA | — |
471
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=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&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: ['"Fraunces"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1d1a16',
        secondary: '#6e6760',
        accent:    '#1d1a16',
        neutral:   '#efe9df',
        surface:   '#f7f2e8',
      },
      borderRadius: {
        sm: '4px',
        md: '8px',
        lg: '14px',
      },
    },
  },
};
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

Cirrus Pane

Cool soft-glass system on a pale icy-blue canvas. True frosted cards at 18% white with 28px backdrop-blur, 160% saturate, 1px white hairline, inner top-edge gloss. One restrained slate-blue accent.

glasssoftcoolpremiumminimal
Cirrus.app
ProductPricingDocsAbout
Sign inGet started
glass · soft · cool

Build with Cirrus Pane.

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