design.md
Back to directory
editorial · minimal · light · magazine

Kinfolk Stone.

Wabi-sabi calm. Warm stone and oat tones, asymmetric editorial layout, crimson hairline accent, classical serif lyrics. Slow, considered, quietly luxurious.

01 · Preview

The kitchen sink.

Kinfolk.app
ProductPricingDocsAbout
Sign inGet started
editorial · minimal · light

Build with Kinfolk Stone.

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
#2A2724
secondary
#8C857B
tertiary
#9B2C2C
neutral
#F1ECE0
surface
#FAF6EC
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
1px
md
2px
lg
3px
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.

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: "Kinfolk Stone"
3description: "Wabi-sabi calm. Warm stone and oat tones, asymmetric editorial layout, crimson hairline accent, classical serif lyrics. Slow, considered, quietly luxurious."
4tags: [editorial, minimal, light, magazine]
5colors:
6  primary:   "#2A2724"
7  secondary: "#8C857B"
8  tertiary:  "#9B2C2C"
9  neutral:   "#F1ECE0"
10  surface:   "#FAF6EC"
11typography:
12  display: "Cormorant Garamond"
13  body:    "Source Serif 4"
14  mono:    "IBM Plex Mono"
15  scale:
16    hero: "5rem / 1.05 / 300 / -0.02em"
17    h1:   "3rem / 1.1 / 400 / -0.015em"
18    h2:   "1.5rem / 1.4 / 400 / 0"
19    body: "1.0625rem / 1.7 / 400 / 0.005em"
20radius:
21  sm: 1px
22  md: 2px
23  lg: 3px
24shadows:
25borders:
26  card:    "1px solid rgba(140, 133, 123, 0.28)"
27  divider: "rgba(140, 133, 123, 0.40)"
28buttons:
29  primary:
30    background: #2A2724
31    color: #FAF6EC
32    border: none
33    shape: rounded
34    padding: 13px 26px
35    font: body / 400 / 0.9375rem / 0.04em
36  secondary:
37    background: #FAF6EC
38    color: #9B2C2C
39    border: 1px solid #9B2C2C
40    shape: rounded
41    padding: 13px 26px
42    font: body / 400 / 0.9375rem / 0.04em
43  outline:
44    background: transparent
45    color: #2A2724
46    border: 1px solid rgba(140, 133, 123, 0.45)
47    shape: rounded
48    padding: 13px 26px
49    font: body / 400 / 0.9375rem / 0.04em
50  ghost:
51    background: transparent
52    color: #9B2C2C
53    border: none
54    shape: rounded
55    padding: 10px 4px
56    font: display / 400 / 1.0625rem / 0
57    hover: underline
58charts:
59  variant: line
60  stroke_width: 1
61  gridlines: false
62  highlight: last
63  dot_marker: true
64  axis_color: "#8C857B"
65  palette: ["#2A2724"]
66fonts_url: "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500&family=IBM+Plex+Mono:wght@400;500&display=swap"
67dependencies: ["lucide-react"]
68---
69 
70# Kinfolk Stone
71 
72## AI Build Instructions
73 
74> **Read this section before writing any code.** The rules below
75> are non-negotiable. Every value used in the UI must come from this
76> file's frontmatter — never substitute, approximate, or invent new
77> colors, fonts, radii, or shadows. If a value is missing, ask the
78> user before adding one.
79 
80### 1 · Your role
81 
82You are building UI for a project that has adopted **Kinfolk Stone** as its
83design system. Treat `DESIGN.md` as the single source of truth.
84Your job is to translate the user's product requirements into
85components and pages that look like they were designed by the same
86person who authored this file.
87 
88### 2 · Token compliance
89 
90- Pull every color, font family, radius, shadow, and spacing value
91  from the frontmatter at the top of this file.
92- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
93  hard-code hex values that bypass the system.
94- When a token can be expressed as a CSS variable, declare it once
95  in your global stylesheet and reference it everywhere downstream.
96- The Google Fonts `<link>` is provided in the Typography section.
97  Add it to `<head>` before any component renders.
98 
99### 3 · Component recipes
100 
101Use these recipes verbatim when building the corresponding component.
102 
103#### Buttons
104 
105Four variants are defined. Pick one — never blend variants or invent a fifth.
106 
107- **Primary** — rounded shape, bg `#2A2724`, text `#FAF6EC`, padding `13px 26px`, weight `400`.
108- **Secondary** — rounded shape, bg `#FAF6EC`, text `#9B2C2C`, border `1px solid #9B2C2C`, padding `13px 26px`, weight `400`.
109- **Outline** — rounded shape, text `#2A2724`, border `1px solid rgba(140, 133, 123, 0.45)`, padding `13px 26px`, weight `400`.
110- **Ghost** — rounded shape, text `#9B2C2C`, padding `10px 4px`, weight `400`.
111 
112Reach for **primary** as the single dominant CTA per screen.
113**Secondary** for the supporting action. **Outline** for tertiary
114actions in toolbars. **Ghost** for inline links and table actions.
115 
116#### Cards
117 
118- Background: `#FAF6EC`
119- Border: `1px solid rgba(140, 133, 123, 0.28)`
120- Radius: `radius.lg` (`3px`)
121- Internal padding: `20px` for compact cards, `24–28px` for content cards.
122 
123#### Charts
124 
125- Bar/line variant: `line`
126- No gridlines — let the bars/lines carry the data.
127- Highlight strategy: `last` — emphasize a single bar/point per chart.
128- Use the declared palette in order: `#2A2724`.
129 
130#### Typography pairings
131 
132- **Display (`Cormorant Garamond`)** — h1, h2, hero headlines, brand wordmarks.
133- **Body (`Source Serif 4`)** — paragraphs, labels, button text, form inputs.
134- **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables.
135 
136### 4 · Hard constraints
137 
138Never do any of the following without explicit instruction from the user:
139 
140- Introduce a new color, font, radius, or shadow that isn't declared above.
141- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
142- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
143- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
144- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
145 
146### 5 · Before you finish — verify
147 
148Run through this checklist for every screen you produce:
149 
150- [ ] Every color used appears in the Colors table above.
151- [ ] Headlines use the display font; body copy uses the body font.
152- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
153- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
154- [ ] Cards and dividers use the declared border + shadow tokens.
155- [ ] No values were invented; if you needed something missing, you stopped and asked.
156 
157---
158 
159## Overview
160Kinfolk Stone is a system for slow reading. The page is **warm oat #F1ECE0**, the cards are **cream #FAF6EC**, and the ink is **stone #2A2724** — a deep brown-grey that has never met pure black. The accent is **crimson #9B2C2C**, used as a 1px hairline border or a single dot on a chart. Never as a fill, never as a CTA background.
161 
162Typography is editorial through and through: Cormorant Garamond for display (classical, light, generous), Source Serif 4 for body (slow, leaded at 1.7), IBM Plex Mono for footnotes. Buttons are nearly-square. Nothing rounds.
163 
164## Material
165- **Page** is warm oat — slightly green-tinted so it reads as natural fibre, not bleached paper.
166- **Cards** are a half-shade lighter (#FAF6EC), separated by a **1px sand hairline at 28%** — felt as a margin rule, never as a border.
167- **No drop-shadows anywhere.** Depth in this system is achieved by paper colour alone.
168 
169## Typography
170| Role | Font | Size | Weight | Leading | Tracking |
171|------|------|------|--------|---------|----------|
172| Hero | Cormorant Garamond | 5rem | 300 | 1.05 | -0.02em |
173| H1 | Cormorant Garamond | 3rem | 400 | 1.10 | -0.015em |
174| H2 | Source Serif 4 | 1.5rem | 400 | 1.40 | 0 |
175| Body | Source Serif 4 | 1.0625rem | 400 | **1.70** | +0.005em |
176| Caption | IBM Plex Mono | 0.8125rem | 400 | 1.55 | +0.06em |
177 
178The hero is **weight 300** — light is correct here. Body leading is **1.70**, non-negotiable.
179 
180## Color
181- **Stone #2A2724** — primary ink. Warmer than black; sits gently on oat.
182- **Sand #8C857B** — captions, dividers, axis labels. Always low-contrast.
183- **Crimson #9B2C2C** — emphasis only. As a border, an underline, a dot. Never a fill larger than 4px².
184- **Cream #FAF6EC** — card surface.
185- **Oat #F1ECE0** — page.
186 
187## Buttons
188Restraint is the entire idea.
189 
190- **Primary** — stone fill, cream text, **3px radius**, body serif at +4% tracking. The button is a sentence, not a billboard.
191- **Secondary** — cream tile with **1px crimson hairline border**, crimson serif label. The editorial "read more."
192- **Outline** — sand hairline at 45%, stone label. For tertiary calls and chrome.
193- **Ghost** — display Cormorant *italic* in crimson, hover underline. The system's most expressive button.
194 
195All buttons sit on **3px radius**. We never round more.
196 
197## Layout
198Asymmetry is encouraged: a 60/40 column split, a single hero pulled hard to the left margin, captions anchored 12% from the gutter. The white space is what the reader pays for.
199 
200## Charts & Data
201A **single 1px stone line** over warm paper. **No gridlines.** A **single crimson dot** on the latest value — that is the only colour on the chart. Axis labels in sand.
202 
203## Do's and Don'ts
204- ✅ Use weight 300 on display sizes. Lightness is part of the calm.
205- ✅ Hold body leading at 1.70. Tightening it kills the slowness.
206- ✅ Use crimson as ink, never as a fill larger than a dot or a border.
207- ✅ Asymmetric columns. Centre everything and you have killed the magazine.
208- ❌ No drop-shadows. Ever.
209- ❌ No pure black. Ever. The system is warm; pure black is cold.
210- ❌ No display serif on body — Cormorant is for hero/H1 only. Body is Source Serif.
211- ❌ No pill buttons. 3px max.
212 
213---
214 
215## Tokens
216 
217> Generated from the same source the live preview renders from.
218> Treat the values below as the contract — never substitute approximations.
219 
220### Colors
221 
222| Role      | Value |
223|-----------|-------|
224| primary   | `#2A2724` |
225| secondary | `#8C857B` |
226| tertiary  | `#9B2C2C` |
227| neutral   | `#F1ECE0` |
228| surface   | `#FAF6EC` |
229 
230### Typography
231 
232- **Display:** Cormorant Garamond
233- **Body:** Source Serif 4
234- **Mono:** IBM Plex Mono
235 
236| Role | size / leading / weight / tracking |
237|------|------------------------------------|
238| Hero | 5rem / 1.05 / 300 / -0.02em |
239| H1   | 3rem / 1.1 / 400 / -0.015em |
240| H2   | 1.5rem / 1.4 / 400 / 0 |
241| Body | 1.0625rem / 1.7 / 400 / 0.005em |
242 
243### Radius
244 
245- sm: `1px`
246- md: `2px`
247- lg: `3px`
248 
249### Shadows
250 
251 
252### Borders
253 
254- **card:** `1px solid rgba(140, 133, 123, 0.28)`
255- **divider:** `rgba(140, 133, 123, 0.40)`
256 
257### Buttons
258 
259Four variants, each fully tokenized. The preview renders from these exact values.
260 
261#### Primary
262 
263| Property | Value |
264|----------|-------|
265| shape | `rounded` |
266| background | `#2A2724` |
267| color | `#FAF6EC` |
268| border | `none` |
269| padding | `13px 26px` |
270| fontFamily | `body` |
271| fontWeight | `400` |
272| fontSize | `0.9375rem` |
273| tracking | `0.04em` |
274 
275#### Secondary
276 
277| Property | Value |
278|----------|-------|
279| shape | `rounded` |
280| background | `#FAF6EC` |
281| color | `#9B2C2C` |
282| border | `1px solid #9B2C2C` |
283| padding | `13px 26px` |
284| fontFamily | `body` |
285| fontWeight | `400` |
286| fontSize | `0.9375rem` |
287| tracking | `0.04em` |
288 
289#### Outline
290 
291| Property | Value |
292|----------|-------|
293| shape | `rounded` |
294| background | `transparent` |
295| color | `#2A2724` |
296| border | `1px solid rgba(140, 133, 123, 0.45)` |
297| padding | `13px 26px` |
298| fontFamily | `body` |
299| fontWeight | `400` |
300| fontSize | `0.9375rem` |
301| tracking | `0.04em` |
302 
303#### Ghost
304 
305| Property | Value |
306|----------|-------|
307| shape | `rounded` |
308| background | `transparent` |
309| color | `#9B2C2C` |
310| border | `none` |
311| padding | `10px 4px` |
312| fontFamily | `display` |
313| fontWeight | `400` |
314| fontSize | `1.0625rem` |
315| tracking | `0` |
316| hoverHint | `underline` |
317 
318### Charts
319 
320| Property | Value |
321|----------|-------|
322| variant | `line` |
323| strokeWidth | `1` |
324| gridlines | `false` |
325| highlight | `last` |
326| dotMarker | `true` |
327| axisColor | `#8C857B` |
328| palette | `#2A2724` |
329 
330---
331 
332## Pro tokens
333 
334> Production-fidelity tokens. States, density, motion, elevation,
335> content rules and a measured WCAG contract — derived from the
336> resting tokens unless explicitly authored.
337 
338### States
339 
340#### Button
341 
342- **hover** — bg: `rgba(155, 44, 44, 0.92)`, shadow: `0 4px 20px -8px rgba(155, 44, 44, 0.4)`
343- **focus** — outline: `1.5px solid #9B2C2C`, outline-offset: `4px`
344- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
345- **disabled** — opacity: `0.45`
346- **loading** — opacity: `0.7`
347- **selected** — bg: `#2A2724`, color: `#FAF6EC`
348 
349#### Input
350 
351- **hover** — border: `1px solid #2A2724`
352- **focus** — border: `1px solid #9B2C2C`, shadow: `0 1px 0 0 #9B2C2C`
353- **disabled** — opacity: `0.45`
354- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
355 
356#### Card
357 
358- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
359- **selected** — border: `1px solid #2A2724`
360 
361#### Tab
362 
363- **hover** — color: `#2A2724`
364- **focus** — outline: `1.5px solid #9B2C2C`, outline-offset: `3px`
365- **selected** — color: `#9B2C2C`, border: `0 0 2px 0 solid #9B2C2C`
366 
367### Density
368 
369| Mode | padding × | row × | body | radius × | Use for |
370|------|-----------|-------|------|----------|---------|
371| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
372| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
373| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
374 
375### Motion
376 
377**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
378 
379```css
380transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
381```
382 
383| Token | Value |
384|-------|-------|
385| duration.instant | `80ms` |
386| duration.fast | `180ms` |
387| duration.base | `320ms` |
388| duration.slow | `500ms` |
389| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
390| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
391| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
392| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
393 
394### Elevation
395 
396Five-level scale, system-specific recipe.
397 
398| Level | Shadow | Recipe |
399|-------|--------|--------|
400| level0 | `none` | Hairline only — typical editorial resting state. |
401| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
402| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
403| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
404| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
405 
406### Content
407 
408- **measure:** `60ch` (max line length for body prose)
409- **paragraph spacing:** `1.5em`
410- **list indent:** `1.75em`
411- **list gap:** `0.55em`
412- **link:** color `#9B2C2C`, underline `always`
413- **blockquote:** border `4px solid #9B2C2C`, padding `0.4em 0 0.4em 1.5em`
414- **code:** background `rgba(42, 39, 36, 0.06)`, color `#2A2724`
415 
416### Accessibility (WCAG 2.1)
417 
418**Overall:** AA-Large
419 
420| Pair | Ratio | Required | Grade | Suggested fix |
421|------|-------|----------|-------|---------------|
422| Body text on surface | 13.76:1 | AA | AAA | — |
423| Body text on canvas | 12.6:1 | AA | AAA | — |
424| Muted text on surface | 3.38:1 | AA | AA-Large | `#777067` → 4.53:1 (AA) |
425| Accent on surface | 6.97:1 | AA-Large | AA | — |
426| Accent on canvas | 6.38:1 | AA-Large | AA | — |
427
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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500&family=IBM+Plex+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: ['"Cormorant Garamond"', 'serif'],
        sans:    ['"Source Serif 4"', 'sans-serif'],
        mono:    ['"IBM Plex Mono"', 'monospace'],
      },
      colors: {
        primary:   '#2A2724',
        secondary: '#8C857B',
        accent:    '#9B2C2C',
        neutral:   '#F1ECE0',
        surface:   '#FAF6EC',
      },
      borderRadius: {
        sm: '1px',
        md: '2px',
        lg: '3px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Linear Orbit

Hairline-thin product workspace. Cool off-white surfaces, Inter Display with tight tracking, a single indigo accent, every divider 1px at 6% ink. Engineered calm.

developerminimalpremiumsaasmodern
Linear.app
ProductPricingDocsAbout
Sign inGet started
developer · minimal · premium

Build with Linear Orbit.

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

Atlas Display

Design-agency oversized grotesque. 8rem condensed display sans with -5% tracking — the type itself is the layout. Off-white canvas, one molten-orange accent, hairline grid, asymmetric columns. Hits hard the moment it loads.

agencydisplayboldeditorialmodern
Atlas.app
ProductPricingDocsAbout
Sign inGet started→
agency · display · bold

Build with Atlas Display.

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