editorial · soft · warm · minimal · premium

Peony Zine.

A printed quarterly that happens to live on the web. Soft blush-bone surfaces, Fraunces 600 italic display headlines, Geist Mono for marginalia, a single deep plum accent on drop caps and pull-quote bars. Built for journals, newsletters, and slow-content brands that want warmth without preciousness.

01 · Preview

The kitchen sink.

Peony.app

ProductPricingDocsAbout

Sign inGet started

editorial · soft · warm

Build with Peony Zine.

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

#2A1F24

secondary

#7A6B71

tertiary

#2A1F24

neutral

#F3E9E6

surface

#FAF2EE

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

10px

lg

16px

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

DESIGN.md

markdown

1---
2name: "Peony Zine"
3description: "A printed quarterly that happens to live on the web. Soft blush-bone surfaces, Fraunces 600 italic display headlines, Geist Mono for marginalia, a single deep plum accent on drop caps and pull-quote bars. Built for journals, newsletters, and slow-content brands that want warmth without preciousness."
4tags: [editorial, soft, warm, minimal, premium]
5colors:
6  primary:   "#2a1f24"
7  secondary: "#7a6b71"
8  tertiary:  "#2a1f24"
9  neutral:   "#f3e9e6"
10  surface:   "#faf2ee"
11typography:
12  display: Fraunces
13  body:    Inter
14  mono:    "Geist Mono"
15  scale:
16    hero: "5rem / 0.98 / 600 / -0.03em"
17    h1:   "3rem / 1.06 / 600 / -0.025em"
18    h2:   "1.875rem / 1.2 / 500 / -0.018em"
19    body: "1.0625rem / 1.7 / 400 / -0.005em"
20radius:
21  sm: 4px
22  md: 10px
23  lg: 16px
24  pill: 9999px
25shadows:
26  card:   "rgba(42,31,36,0.04) 0 1px 2px"
27  button: none
28borders:
29  card:    "1px solid rgba(42,31,36,0.08)"
30  divider: rgba(42,31,36,0.10)
31buttons:
32  primary:
33    background: #2a1f24
34    color: #faf2ee
35    border: none
36    shape: rounded
37    padding: 12px 22px
38    font: 500 / 0.875rem
39  secondary:
40    background: #f3e9e6
41    color: #2a1f24
42    border: 1px solid rgba(42,31,36,0.10)
43    shape: rounded
44    padding: 12px 22px
45    font: 500 / 0.875rem
46  outline:
47    background: transparent
48    color: #2a1f24
49    border: 1px solid rgba(42,31,36,0.18)
50    shape: rounded
51    padding: 12px 22px
52    font: 500 / 0.875rem
53  ghost:
54    background: transparent
55    color: #7a6b71
56    border: none
57    shape: rounded
58    padding: 12px 16px
59    font: 500 / 0.875rem
60charts:
61  variant: "thin-bars"
62  stroke_width: 1.25
63  fill_opacity: 0.06
64  gridlines: false
65  bar_gap: 14px
66  highlight: single
67  dot_marker: true
68fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Peony Zine
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 **Peony Zine** 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 `#2a1f24`, text `#faf2ee`, padding `12px 22px`, weight `500`.
110- **Secondary** — rounded shape, bg `#f3e9e6`, text `#2a1f24`, border `1px solid rgba(42,31,36,0.10)`, padding `12px 22px`, weight `500`.
111- **Outline** — rounded shape, text `#2a1f24`, border `1px solid rgba(42,31,36,0.18)`, padding `12px 22px`, weight `500`.
112- **Ghost** — rounded shape, text `#7a6b71`, padding `12px 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: `#faf2ee`
121- Border: `1px solid rgba(42,31,36,0.08)`
122- Shadow: `rgba(42,31,36,0.04) 0 1px 2px`
123- Radius: `radius.lg` (`16px`)
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 (`Geist 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 
167Peony Zine is a printed quarterly that happens to live on the web. The page surface is soft blush-bone `#faf2ee` — closer to uncoated cream stock than to white. Headlines run in Fraunces 600 italic at 80px, the soft-cornered serif giving the page a hand-set quality without tipping into preciousness. Body sits in Inter at 17px on a generous 1.7 leading. Marginalia, page numbers, and dateline run in Geist Mono uppercase. The single accent is deep plum `#5b2440` — used only on drop caps and the 2px bar to the left of pull quotes.
168 
169The discipline is in the warmth: blush over white, plum over magenta, italic display over upright bold.
170 
171**Signature moves**
172- Fraunces 600 italic for the hero — the soft optical-sized italic IS the voice
173- Soft blush-bone surface `#faf2ee` (not white, not pink)
174- Plum accent `#5b2440` only on drop caps + a 2px pull-quote bar — never as a fill
175- Pull quotes set in Fraunces 500 italic at 28px with a 2px plum left bar
176- Marginalia in Geist Mono uppercase 0.10em — page numbers, datelines, footnote refs
177 
178## 2. Palette
179 
180### Surfaces
181- **Blush Bone** `#faf2ee` — page background (warm cream)
182- **Blush Lift** `#f3e9e6` — secondary surfaces, secondary button
183- **Hairline** `rgba(42,31,36,0.08)` — every divider
184 
185### Ink
186- **Ink** `#2a1f24` — text, headings (warm near-black, never grey)
187- **Ink 50** `#7a6b71` — secondary text, mono marginalia
188 
189### Accent
190- **Plum** `#5b2440` — drop caps, pull-quote bar, chart highlight
191- **Plum Soft** `rgba(91,36,64,0.12)` — focus ring, hovered tab background
192 
193## 3. Typography
194 
195| Role | Font | Size | Weight | Leading | Tracking |
196|------|------|------|--------|---------|----------|
197| Hero | Fraunces (italic) | 80px | 600 | 0.98 | -0.03em |
198| H1 | Fraunces | 48px | 600 | 1.06 | -0.025em |
199| H2 | Fraunces | 30px | 500 | 1.2 | -0.018em |
200| Pull Quote | Fraunces (italic) | 28px | 500 | 1.3 | -0.015em |
201| Body | Inter | 17px | 400 | 1.7 | -0.005em |
202| UI | Inter | 13px | 500 | 1.4 | 0 |
203| Marginalia | Geist Mono | 11px | 500 | 1.0 | 0.10em uppercase |
204 
205Fraunces uses optical sizing — at 80px the italic glyphs open up into something almost calligraphic. Hold the italic to display only; body must be upright Inter.
206 
207## 4. Buttons
208 
209### Primary (Ink Plum)
210```css
211background: #2a1f24;
212color: #faf2ee;
213padding: 12px 22px;
214border-radius: 10px;
215font-weight: 500;
216```
217 
218### Secondary (Blush Lift)
219- `#f3e9e6` background, 1px hairline at 10% ink, ink text — same shape, same padding
220 
221### Outline & Ghost
222- Outline: transparent, 1px hairline at 18% ink
223- Ghost: no border, ink-50, hover underlines
224 
225## 5. Cards
226 
227```css
228background: #faf2ee;
229border: 1px solid rgba(42,31,36,0.08);
230border-radius: 16px;
231box-shadow: rgba(42,31,36,0.04) 0 1px 2px;
232```
233 
234The single 1px shadow is the maximum lift. Featured cards swap to blush-lift surface and add a 2px plum left bar — borrowed from the pull-quote treatment.
235 
236## 6. Charts
237 
238Thin precise bars (4px wide, 14px gap). One bar in plum, others in 18% ink. NO gridlines. Line charts at 1.25px ink with a 6% plum fill, ending in a plum dot marker. Y-axis labels in Geist Mono uppercase 11px set in the left margin.
239 
240## 7. Tabs
241 
242Underline 1.5px in plum for the active state. Inactive tabs are ink-50 in Inter 500. Hover = plum-soft background wash. Tabs sit on a 1px hairline baseline.
243 
244## 8. Spacing
245 
246- Base 4px
247- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128`
248- Section padding: 96px desktop, 48px mobile
249 
250## 9. Do's & don'ts
251 
252✅ **Do**
253- Use Fraunces italic 600 at 80px for the hero — the optical-sized italic is the brand
254- Hold the blush-bone surface `#faf2ee` — white kills the warmth, pink reads as gendered
255- Reserve plum for drop caps + the 2px pull-quote bar + chart highlight
256- Set marginalia in Geist Mono uppercase 0.10em — that's the printed-page voice
257 
258❌ **Don't**
259- Use Fraunces italic in body — italic is reserved for display + pull quotes
260- Add a second accent — plum alone, on three specific gestures
261- Use sharp 0px radius — soft 10-16px is the zine voice (rounded paper, not posters)
262- Use shadows beyond the 1px lift — the page is paper, not glass
263 
264---
265 
266## Tokens
267 
268> Generated from the same source the live preview renders from.
269> Treat the values below as the contract — never substitute approximations.
270 
271### Colors
272 
273| Role      | Value |
274|-----------|-------|
275| primary   | `#2a1f24` |
276| secondary | `#7a6b71` |
277| tertiary  | `#2a1f24` |
278| neutral   | `#f3e9e6` |
279| surface   | `#faf2ee` |
280 
281### Typography
282 
283- **Display:** Fraunces
284- **Body:** Inter
285- **Mono:** Geist Mono
286 
287| Role | size / leading / weight / tracking |
288|------|------------------------------------|
289| Hero | 5rem / 0.98 / 600 / -0.03em |
290| H1   | 3rem / 1.06 / 600 / -0.025em |
291| H2   | 1.875rem / 1.2 / 500 / -0.018em |
292| Body | 1.0625rem / 1.7 / 400 / -0.005em |
293 
294### Radius
295 
296- sm: `4px`
297- md: `10px`
298- lg: `16px`
299- pill: `9999px`
300 
301### Shadows
302 
303- **card:** `rgba(42,31,36,0.04) 0 1px 2px`
304- **button:** `none`
305 
306### Borders
307 
308- **card:** `1px solid rgba(42,31,36,0.08)`
309- **divider:** `rgba(42,31,36,0.10)`
310 
311### Buttons
312 
313Four variants, each fully tokenized. The preview renders from these exact values.
314 
315#### Primary
316 
317| Property | Value |
318|----------|-------|
319| shape | `rounded` |
320| background | `#2a1f24` |
321| color | `#faf2ee` |
322| border | `none` |
323| padding | `12px 22px` |
324| fontWeight | `500` |
325| fontSize | `0.875rem` |
326 
327#### Secondary
328 
329| Property | Value |
330|----------|-------|
331| shape | `rounded` |
332| background | `#f3e9e6` |
333| color | `#2a1f24` |
334| border | `1px solid rgba(42,31,36,0.10)` |
335| padding | `12px 22px` |
336| fontWeight | `500` |
337| fontSize | `0.875rem` |
338 
339#### Outline
340 
341| Property | Value |
342|----------|-------|
343| shape | `rounded` |
344| background | `transparent` |
345| color | `#2a1f24` |
346| border | `1px solid rgba(42,31,36,0.18)` |
347| padding | `12px 22px` |
348| fontWeight | `500` |
349| fontSize | `0.875rem` |
350 
351#### Ghost
352 
353| Property | Value |
354|----------|-------|
355| shape | `rounded` |
356| background | `transparent` |
357| color | `#7a6b71` |
358| border | `none` |
359| padding | `12px 16px` |
360| fontWeight | `500` |
361| fontSize | `0.875rem` |
362 
363### Charts
364 
365| Property | Value |
366|----------|-------|
367| variant | `thin-bars` |
368| strokeWidth | `1.25` |
369| fillOpacity | `0.06` |
370| gridlines | `false` |
371| barGap | `14px` |
372| highlight | `single` |
373| dotMarker | `true` |
374

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=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" />

Install dependencies

bash

npm install lucide-react

Tailwind config

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Fraunces"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"Geist Mono"', 'monospace'],
      },
      colors: {
        primary:   '#2a1f24',
        secondary: '#7a6b71',
        accent:    '#2a1f24',
        neutral:   '#f3e9e6',
        surface:   '#faf2ee',
      },
      borderRadius: {
        sm: '4px',
        md: '10px',
        lg: '16px',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Gunmetal Forge

Dark brushed metallic. Anthracite canvas with cool brushed-steel CTAs catching a polished top-edge highlight under directional light. Premium hardware in dark theme — pro tools, audio, automotive.

metallicdarkpremiumhardwaremodern

Gunmetal.app

ProductPricingDocsAbout

Sign inGet started

metallic · dark · premium

Build with Gunmetal Forge.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

Mallow SaaS

A soft modern SaaS surface with the warmth of a marshmallow. Cream-mallow page background, butter-soft cards with generous radius, Manrope for UI and DM Mono for figures, a single muted lavender accent reserved for the primary CTA and the active sidebar item. Built for early-stage product pages, friendly B2C dashboards, and onboarding flows that need to feel approachable without going saccharine.

saaswarmminimalmodernpremium

Mallow.app

ProductPricingDocsAbout

Sign inGet started

saas · warm · minimal

Build with Mallow SaaS.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational