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 · 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

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=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

// 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',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Acid Chrome

Liquid chrome and oil-slick iridescence on onyx — holographic gradients, polished metal CTAs, and prismatic accents. Y2K reborn as molten metal, not neon. Chrome is the color.

darkfuturisticpremiumy2kmodern

Acid.app

ProductPricingDocsAbout

Sign inGet started