design.md
Back to directory
minimal · warm · light · premium

Soft Linen.

Warm linen canvas with abundant whitespace, gently rounded corners, and a single sage accent. Calm, airy, considered. Nothing shouts.

01 · Preview

The kitchen sink.

Soft.app
ProductPricingDocsAbout
Sign inGet started
minimal · warm · light

Build with Soft Linen.

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
#2A2823
secondary
#8B8678
tertiary
#7A8B6F
neutral
#F6F2EA
surface
#FBF8F2
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
18px
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.

ArchetypeSoft

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: "Soft Linen"
3description: "Warm linen canvas with abundant whitespace, gently rounded corners, and a single sage accent. Calm, airy, considered. Nothing shouts."
4tags: [minimal, warm, light, premium]
5colors:
6  primary:   "#2A2823"
7  secondary: "#8B8678"
8  tertiary:  "#7A8B6F"
9  neutral:   "#F6F2EA"
10  surface:   "#FBF8F2"
11typography:
12  display: Fraunces
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.75rem / 1.05 / 400 / -0.025em"
17    h1:   "2.75rem / 1.1 / 400 / -0.02em"
18    h2:   "1.5rem / 1.3 / 500 / -0.01em"
19    body: "1.0625rem / 1.65 / 400 / -0.005em"
20radius:
21  sm: 8px
22  md: 12px
23  lg: 18px
24  pill: 9999px
25shadows:
26  card:   "0 1px 2px rgba(42, 40, 35, 0.04)"
27  button: none
28borders:
29  card:    "1px solid rgba(42, 40, 35, 0.08)"
30  divider: "rgba(42, 40, 35, 0.06)"
31buttons:
32  primary:
33    background: #2A2823
34    color: #F6F2EA
35    border: 1px solid #2A2823
36    shape: rounded
37    padding: 13px 26px
38    font: 500 / 0.9375rem / -0.005em
39  secondary:
40    background: #FBF8F2
41    color: #2A2823
42    border: 1px solid rgba(42, 40, 35, 0.14)
43    shape: rounded
44    padding: 13px 26px
45    font: 500 / 0.9375rem / -0.005em
46  outline:
47    background: transparent
48    color: #7A8B6F
49    border: 1px solid #7A8B6F
50    shape: rounded
51    padding: 12px 24px
52    font: 500 / 0.9375rem / -0.005em
53  ghost:
54    background: transparent
55    color: #7A8B6F
56    border: none
57    shape: rounded
58    padding: 11px 6px
59    font: 500 / 0.9375rem / -0.005em
60    hover: underline
61charts:
62  variant: line
63  stroke_width: 1.75
64  gridlines: false
65  highlight: last
66  dot_marker: true
67  axis_color: "#8B8678"
68  palette: ["#7A8B6F", "#2A2823", "#8B8678"]
69fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:wght@300;400;500;600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"
70dependencies: ["lucide-react"]
71---
72 
73# Soft Linen
74 
75## AI Build Instructions
76 
77> **Read this section before writing any code.** The rules below
78> are non-negotiable. Every value used in the UI must come from this
79> file's frontmatter — never substitute, approximate, or invent new
80> colors, fonts, radii, or shadows. If a value is missing, ask the
81> user before adding one.
82 
83### 1 · Your role
84 
85You are building UI for a project that has adopted **Soft Linen** as its
86design system. Treat `DESIGN.md` as the single source of truth.
87Your job is to translate the user's product requirements into
88components and pages that look like they were designed by the same
89person who authored this file.
90 
91### 2 · Token compliance
92 
93- Pull every color, font family, radius, shadow, and spacing value
94  from the frontmatter at the top of this file.
95- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
96  hard-code hex values that bypass the system.
97- When a token can be expressed as a CSS variable, declare it once
98  in your global stylesheet and reference it everywhere downstream.
99- The Google Fonts `<link>` is provided in the Typography section.
100  Add it to `<head>` before any component renders.
101 
102### 3 · Component recipes
103 
104Use these recipes verbatim when building the corresponding component.
105 
106#### Buttons
107 
108Four variants are defined. Pick one — never blend variants or invent a fifth.
109 
110- **Primary** — rounded shape, bg `#2A2823`, text `#F6F2EA`, border `1px solid #2A2823`, padding `13px 26px`, weight `500`.
111- **Secondary** — rounded shape, bg `#FBF8F2`, text `#2A2823`, border `1px solid rgba(42, 40, 35, 0.14)`, padding `13px 26px`, weight `500`.
112- **Outline** — rounded shape, text `#7A8B6F`, border `1px solid #7A8B6F`, padding `12px 24px`, weight `500`.
113- **Ghost** — rounded shape, text `#7A8B6F`, padding `11px 6px`, weight `500`.
114 
115Reach for **primary** as the single dominant CTA per screen.
116**Secondary** for the supporting action. **Outline** for tertiary
117actions in toolbars. **Ghost** for inline links and table actions.
118 
119#### Cards
120 
121- Background: `#FBF8F2`
122- Border: `1px solid rgba(42, 40, 35, 0.08)`
123- Shadow: `0 1px 2px rgba(42, 40, 35, 0.04)`
124- Radius: `radius.lg` (`18px`)
125- Internal padding: `20px` for compact cards, `24–28px` for content cards.
126 
127#### Charts
128 
129- Bar/line variant: `line`
130- No gridlines — let the bars/lines carry the data.
131- Highlight strategy: `last` — emphasize a single bar/point per chart.
132- Use the declared palette in order: `#7A8B6F`, `#2A2823`, `#8B8678`.
133 
134#### Typography pairings
135 
136- **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks.
137- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
138- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
139 
140### 4 · Hard constraints
141 
142Never do any of the following without explicit instruction from the user:
143 
144- Introduce a new color, font, radius, or shadow that isn't declared above.
145- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
146- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
147- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
148- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
149 
150### 5 · Before you finish — verify
151 
152Run through this checklist for every screen you produce:
153 
154- [ ] Every color used appears in the Colors table above.
155- [ ] Headlines use the display font; body copy uses the body font.
156- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
157- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
158- [ ] Cards and dividers use the declared border + shadow tokens.
159- [ ] No values were invented; if you needed something missing, you stopped and asked.
160 
161---
162 
163## Overview
164Soft Linen is the visual language of a quiet morning — warm cream paper, abundant air, and a single quiet sage accent. The system is built around **whitespace as the primary material**: sections breathe at 160px+ vertical rhythm, body copy sits at 1.65 leading, and every surface is a half-shade away from the next. Nothing competes for attention because nothing needs to.
165 
166This is for product pages that want to feel slow on purpose — wellness brands, considered SaaS, slow-publishing journals, premium hospitality.
167 
168## Color
169- **Charcoal #2A2823** — primary text. Warm enough to never read as cold black on linen.
170- **Stone #8B8678** — captions, meta, axis labels.
171- **Sage #7A8B6F** — the single accent. Outline buttons, ghost links, chart lines. Used **once or twice per screen**, never as a fill.
172- **Linen #F6F2EA** — page canvas. Warm off-white.
173- **Surface #FBF8F2** — card stock, a half-shade brighter than the page.
174 
175**No second accent exists.** Sage carries the entire chromatic load.
176 
177## Typography
178- **Display: Fraunces** at 4.75rem / 400, -2.5% tracking. Warm modern serif with optical-size grace.
179- **Body: Inter** at 1.0625rem with **1.65 leading**. The leading is non-negotiable.
180 
181| Role | Font | Size | Weight | Tracking |
182|------|------|------|--------|----------|
183| Hero | Fraunces | 4.75rem | 400 | -0.025em |
184| H1 | Fraunces | 2.75rem | 400 | -0.02em |
185| H2 | Inter | 1.5rem | 500 | -0.01em |
186| Body | Inter | 1.0625rem | 400 | -0.005em / 1.65 |
187 
188## Whitespace Rhythm
189Soft Linen is defined by its breathing room. Apply this rhythm:
190- **Section gap: 160px** (mobile 96px) between major page sections.
191- **Card padding: 32px–40px**. Never below 24px.
192- **Heading-to-body gap: 24px** minimum.
193- **Inter-paragraph: 16px**.
194 
195If a section feels comfortable, double its vertical padding. The system is built for over-spacing.
196 
197## Buttons
198All four are gently rounded (12–18px), soft and round but never pill-shaped except for the optional pill variant.
199 
200- **Primary** — warm charcoal fill, linen label, no shadow. Quiet authority.
201- **Secondary** — linen surface with a 14% stone hairline.
202- **Outline** — transparent with a 1px sage border. The accent appears here.
203- **Ghost** — bare sage label, hover underline.
204 
205**No drop shadows on buttons.** The form is the gesture.
206 
207## Cards
208Surface tile, **1px stone border at 8%**, a single 1px shadow at 4%. Radius is **18px**. Cards never lift more than that hairline shadow — the page-flat read is the system.
209 
210## Charts & Data
211A single 1.75px sage line over the linen canvas. **No gridlines, no fills.** A small sage dot at the latest reading. Axis labels in stone.
212 
213## Do's and Don'ts
214- ✅ Whitespace is the material. Over-space; never crowd.
215- ✅ Fraunces 400 for display — never 600+. Heavy weights kill the warmth.
216- ✅ Sage appears once or twice per screen, never as a fill.
217- ✅ 1.65 body leading minimum. Reading-first.
218- ❌ No drop shadows beyond a 4% hairline.
219- ❌ No second accent color. Sage is alone.
220- ❌ No tight section padding. The breathing room IS the design.
221- ❌ No pill buttons except for chrome — primary is gently rounded, not capsule.
222 
223---
224 
225## Tokens
226 
227> Generated from the same source the live preview renders from.
228> Treat the values below as the contract — never substitute approximations.
229 
230### Colors
231 
232| Role      | Value |
233|-----------|-------|
234| primary   | `#2A2823` |
235| secondary | `#8B8678` |
236| tertiary  | `#7A8B6F` |
237| neutral   | `#F6F2EA` |
238| surface   | `#FBF8F2` |
239 
240### Typography
241 
242- **Display:** Fraunces
243- **Body:** Inter
244- **Mono:** JetBrains Mono
245 
246| Role | size / leading / weight / tracking |
247|------|------------------------------------|
248| Hero | 4.75rem / 1.05 / 400 / -0.025em |
249| H1   | 2.75rem / 1.1 / 400 / -0.02em |
250| H2   | 1.5rem / 1.3 / 500 / -0.01em |
251| Body | 1.0625rem / 1.65 / 400 / -0.005em |
252 
253### Radius
254 
255- sm: `8px`
256- md: `12px`
257- lg: `18px`
258- pill: `9999px`
259 
260### Shadows
261 
262- **card:** `0 1px 2px rgba(42, 40, 35, 0.04)`
263- **button:** `none`
264 
265### Borders
266 
267- **card:** `1px solid rgba(42, 40, 35, 0.08)`
268- **divider:** `rgba(42, 40, 35, 0.06)`
269 
270### Buttons
271 
272Four variants, each fully tokenized. The preview renders from these exact values.
273 
274#### Primary
275 
276| Property | Value |
277|----------|-------|
278| shape | `rounded` |
279| background | `#2A2823` |
280| color | `#F6F2EA` |
281| border | `1px solid #2A2823` |
282| padding | `13px 26px` |
283| fontWeight | `500` |
284| fontSize | `0.9375rem` |
285| tracking | `-0.005em` |
286 
287#### Secondary
288 
289| Property | Value |
290|----------|-------|
291| shape | `rounded` |
292| background | `#FBF8F2` |
293| color | `#2A2823` |
294| border | `1px solid rgba(42, 40, 35, 0.14)` |
295| padding | `13px 26px` |
296| fontWeight | `500` |
297| fontSize | `0.9375rem` |
298| tracking | `-0.005em` |
299 
300#### Outline
301 
302| Property | Value |
303|----------|-------|
304| shape | `rounded` |
305| background | `transparent` |
306| color | `#7A8B6F` |
307| border | `1px solid #7A8B6F` |
308| padding | `12px 24px` |
309| fontWeight | `500` |
310| fontSize | `0.9375rem` |
311| tracking | `-0.005em` |
312 
313#### Ghost
314 
315| Property | Value |
316|----------|-------|
317| shape | `rounded` |
318| background | `transparent` |
319| color | `#7A8B6F` |
320| border | `none` |
321| padding | `11px 6px` |
322| fontWeight | `500` |
323| fontSize | `0.9375rem` |
324| tracking | `-0.005em` |
325| hoverHint | `underline` |
326 
327### Charts
328 
329| Property | Value |
330|----------|-------|
331| variant | `line` |
332| strokeWidth | `1.75` |
333| gridlines | `false` |
334| highlight | `last` |
335| dotMarker | `true` |
336| axisColor | `#8B8678` |
337| palette | `#7A8B6F`, `#2A2823`, `#8B8678` |
338 
339---
340 
341## Pro tokens
342 
343> Production-fidelity tokens. States, density, motion, elevation,
344> content rules and a measured WCAG contract — derived from the
345> resting tokens unless explicitly authored.
346 
347### States
348 
349#### Button
350 
351- **hover** — shadow: `0 8px 24px -10px rgba(122, 139, 111, 0.35)`, transform: `translateY(-1px)`, filter: `brightness(1.02)`
352- **focus** — outline: `2px solid rgba(122, 139, 111, 0.4)`, outline-offset: `3px`
353- **active** — transform: `translateY(0) scale(0.98)`
354- **disabled** — opacity: `0.4`, filter: `saturate(0.5)`
355- **loading** — opacity: `0.65`
356- **selected** — bg: `rgba(122, 139, 111, 0.18)`, color: `#7A8B6F`
357 
358#### Input
359 
360- **hover** — bg: `rgba(122, 139, 111, 0.03)`, border: `1px solid rgba(122, 139, 111, 0.4)`
361- **focus** — border: `1px solid rgba(122, 139, 111, 0.6)`, shadow: `0 0 0 4px rgba(122, 139, 111, 0.12)`
362- **disabled** — opacity: `0.4`
363- **error** — border: `1px solid rgba(244,114,182,0.7)`, shadow: `0 0 0 4px rgba(244,114,182,0.15)`
364 
365#### Card
366 
367- **hover** — shadow: `0 16px 40px -16px rgba(122, 139, 111, 0.3)`, transform: `translateY(-3px)`
368- **selected** — bg: `rgba(122, 139, 111, 0.04)`, border: `1px solid rgba(122, 139, 111, 0.5)`
369- **dragging** — transform: `scale(1.03) rotate(-0.8deg)`, opacity: `0.92`
370 
371#### Tab
372 
373- **hover** — bg: `rgba(122, 139, 111, 0.08)`, color: `#7A8B6F`
374- **focus** — outline: `2px solid rgba(122, 139, 111, 0.4)`, outline-offset: `2px`
375- **selected** — bg: `rgba(122, 139, 111, 0.16)`, color: `#7A8B6F`
376 
377### Density
378 
379| Mode | padding × | row × | body | radius × | Use for |
380|------|-----------|-------|------|----------|---------|
381| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
382| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
383| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
384 
385### Motion
386 
387**Signature — Soft fade.** Long, gentle transitions with a symmetric easing curve. Motion is calming, never intrusive.
388 
389```css
390transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
391```
392 
393| Token | Value |
394|-------|-------|
395| duration.instant | `120ms` |
396| duration.fast | `240ms` |
397| duration.base | `400ms` |
398| duration.slow | `600ms` |
399| easing.standard | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` |
400| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
401| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
402| easing.spring | `cubic-bezier(0.45, 1.4, 0.55, 1)` |
403 
404### Elevation
405 
406Five-level scale, system-specific recipe.
407 
408| Level | Shadow | Recipe |
409|-------|--------|--------|
410| level0 | `none` | Flat — the tone separates, not the shadow. |
411| level1 | `0 2px 6px -2px rgba(122, 139, 111, 0.12)` | Soft tinted lift. |
412| level2 | `0 8px 24px -10px rgba(122, 139, 111, 0.2)` | Floating card — pastel-tinted shadow. |
413| level3 | `0 16px 48px -16px rgba(122, 139, 111, 0.28)` | Sheet — visible tinted glow. |
414| level4 | `0 32px 80px -24px rgba(122, 139, 111, 0.4)` | Modal — tinted wash, scrim required. |
415 
416### Content
417 
418- **measure:** `64ch` (max line length for body prose)
419- **paragraph spacing:** `1.35em`
420- **list indent:** `1.5em`
421- **list gap:** `0.6em`
422- **link:** color `#7A8B6F`, underline `hover`
423- **blockquote:** border `2px solid rgba(122, 139, 111, 0.5)`, padding `0.9em 1.2em`
424- **code:** background `rgba(122, 139, 111, 0.1)`, color `#2A2823`
425 
426### Accessibility (WCAG 2.1)
427 
428**Overall:** AA-Large
429 
430| Pair | Ratio | Required | Grade | Suggested fix |
431|------|-------|----------|-------|---------------|
432| Body text on surface | 13.89:1 | AA | AAA | — |
433| Body text on canvas | 13.19:1 | AA | AAA | — |
434| Muted text on surface | 3.43:1 | AA | AA-Large | `#757165` → 4.6:1 (AA) |
435| Accent on surface | 3.45:1 | AA-Large | AA-Large | — |
436| Accent on canvas | 3.27:1 | AA-Large | AA-Large | — |
437
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:wght@300;400;500;600&family=Inter:wght@400;500;600&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: ['"Fraunces"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#2A2823',
        secondary: '#8B8678',
        accent:    '#7A8B6F',
        neutral:   '#F6F2EA',
        surface:   '#FBF8F2',
      },
      borderRadius: {
        sm: '8px',
        md: '12px',
        lg: '18px',
      },
    },
  },
};
06 · 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

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