design.md
Back to directory
editorial · natural · warm · serif

Botanical Press.

Pressed-herbarium editorial — deep forest ink and oxidized terracotta on bone paper. Italic Cormorant display, generous leading, hairline rules, and a single warm spot color used like a botanist's annotation stamp.

01 · Preview

The kitchen sink.

Botanical.app
ProductPricingDocsAbout
Sign inGet started
editorial · natural · warm

Build with Botanical 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
#1F2A1E
secondary
#7A8472
tertiary
#B7553A
neutral
#F2EDE0
surface
#F8F4E9
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
2px
md
3px
lg
4px
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: "Botanical Press"
3description: "Pressed-herbarium editorial — deep forest ink and oxidized terracotta on bone paper. Italic Cormorant display, generous leading, hairline rules, and a single warm spot color used like a botanist's annotation stamp."
4tags: [editorial, natural, warm, serif]
5colors:
6  primary:   "#1F2A1E"
7  secondary: "#7A8472"
8  tertiary:  "#B7553A"
9  neutral:   "#F2EDE0"
10  surface:   "#F8F4E9"
11typography:
12  display: "Cormorant Garamond"
13  body:    Lora
14  mono:    "IBM Plex Mono"
15  scale:
16    hero: "5.25rem / 1 / 400 / -0.025em"
17    h1:   "3rem / 1.05 / 400 / -0.02em"
18    h2:   "1.5rem / 1.3 / 500 / 0"
19    body: "1.0625rem / 1.7 / 400 / 0"
20radius:
21  sm: 2px
22  md: 3px
23  lg: 4px
24shadows:
25  card:   "0 1px 0 rgba(31, 42, 30, 0.06)"
26  button: none
27borders:
28  card:    "1px solid rgba(31, 42, 30, 0.16)"
29  divider: "rgba(31, 42, 30, 0.10)"
30buttons:
31  primary:
32    background: #1F2A1E
33    color: #F2EDE0
34    border: 1px solid #1F2A1E
35    shape: rounded
36    padding: 13px 24px
37    font: display / 500 / 1rem / 0.01em
38  secondary:
39    background: #F8F4E9
40    color: #1F2A1E
41    border: 1px solid #1F2A1E
42    shape: rounded
43    padding: 13px 24px
44    font: display / 500 / 1rem / 0.01em
45  outline:
46    background: transparent
47    color: #B7553A
48    border: 1px solid #B7553A
49    shape: rounded
50    padding: 12px 22px
51    font: display / 500 / 0.9375rem / 0.02em
52    uppercase: true
53  ghost:
54    background: transparent
55    color: #B7553A
56    border: none
57    shape: rounded
58    padding: 10px 4px
59    font: display / 500 / 1rem / 0.01em
60    hover: underline
61charts:
62  variant: line
63  stroke_width: 1.5
64  gridlines: false
65  highlight: last
66  dot_marker: true
67  axis_color: "#7A8472"
68  palette: ["#B7553A", "#1F2A1E", "#7A8472"]
69fonts_url: "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Lora:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"
70dependencies: ["lucide-react"]
71---
72 
73# Botanical Press
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 **Botanical Press** 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 `#1F2A1E`, text `#F2EDE0`, border `1px solid #1F2A1E`, padding `13px 24px`, weight `500`.
111- **Secondary** — rounded shape, bg `#F8F4E9`, text `#1F2A1E`, border `1px solid #1F2A1E`, padding `13px 24px`, weight `500`.
112- **Outline** — rounded shape, text `#B7553A`, border `1px solid #B7553A`, padding `12px 22px`, weight `500`, uppercased.
113- **Ghost** — rounded shape, text `#B7553A`, padding `10px 4px`, 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: `#F8F4E9`
122- Border: `1px solid rgba(31, 42, 30, 0.16)`
123- Shadow: `0 1px 0 rgba(31, 42, 30, 0.06)`
124- Radius: `radius.lg` (`4px`)
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: `#B7553A`, `#1F2A1E`, `#7A8472`.
133 
134#### Typography pairings
135 
136- **Display (`Cormorant Garamond`)** — h1, h2, hero headlines, brand wordmarks.
137- **Body (`Lora`)** — paragraphs, labels, button text, form inputs.
138- **Mono (`IBM Plex 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
164Botanical Press is the visual language of a 19th-century pressed-flora archive — deep forest ink and oxidized terracotta annotations on warm bone paper. Every screen reads like a herbarium card: hairline rules, italic Cormorant display, generous leading, and a single warm spot color used the way a botanist would stamp a specimen number.
165 
166This system is for editorial product, slow content, journals, longform reading, naturalist brands, and anything that wants the calm authority of a museum collection card.
167 
168## Color
169- **Forest Ink #1F2A1E** — primary text and headings. Deep enough to read as black on bone, green enough to feel inked rather than printed.
170- **Oxidized Terracotta #B7553A** — the **only** accent. Used for annotations, outlines, ghost links, and chart highlights. Treat it like a stamp: rare, intentional, never decorative.
171- **Faded Sage #7A8472** — meta, captions, axis labels. The pencil tone.
172- **Bone #F2EDE0** — page paper. Warm off-white, never pure.
173- **Herbarium Card #F8F4E9** — surface for cards. A half-shade lighter than the page so the card lifts without floating.
174 
175**There is no blue, no purple, no cool gradient anywhere.** The palette is two pigments on paper.
176 
177## Typography
178**Cormorant Garamond italic** is the display voice — it gives the system its herbarium-label cadence. Body is **Lora** for warm, readable serif paragraphs. Generous leading (1.7 on body) is mandatory; this is reading-first design.
179 
180| Role | Font | Size | Weight | Style |
181|------|------|------|--------|-------|
182| Hero | Cormorant | 5.25rem | 400 | Italic |
183| H1 | Cormorant | 3rem | 400 | Italic |
184| H2 | Lora | 1.5rem | 500 | Roman |
185| Body | Lora | 1.0625rem | 400 | Roman, leading 1.7 |
186| Caption | IBM Plex Mono | 0.8125rem | 500 | Specimen-number voice |
187 
188## Buttons
189All four are rectangular with 2–4px radii — herbarium labels never have pill corners.
190 
191- **Primary** — forest ink fill, bone label, italic Cormorant. The botanist's stamp.
192- **Secondary** — herbarium-card surface with a 1px ink border. Italic display label.
193- **Outline** — transparent with a 1px terracotta hairline. Uppercase, +2% tracking. Used for annotation-style CTAs.
194- **Ghost** — italic terracotta label, no chrome, hover underline. For inline references.
195 
196**No shadows on any button.** The forest ink itself carries the weight.
197 
198## Cards
199Bone-card surface with a **1px forest-ink border at 16%** and a 1px hairline shadow at 6%. Cards lie flat. Radius is 4px. Never lift them with drop-shadow — the herbarium read depends on the page-flat plane.
200 
201## Charts & Data
202A single 1.5px terracotta line over the bone canvas with a small dot at the latest value. **No gridlines, no fills, no second color.** Axis labels in faded sage. Reads like a growth chart pencilled into the margin of a field notebook.
203 
204## Annotation Stamps
205The terracotta accent should appear once or twice per screen, used like a wax seal:
206- The single spot color on a chart line.
207- A small terracotta rule under a section number.
208- An italic terracotta caption beside a quoted figure.
209 
210Never use terracotta on body text. Never use it as a fill on cards. Its scarcity is what makes it read as authoritative.
211 
212## Do's and Don'ts
213- ✅ Cormorant italic for every display heading. The italic is non-negotiable.
214- ✅ Generous leading (1.6–1.7) on body. This is reading-first.
215- ✅ Hairline borders only — 1px forest ink at 16% or terracotta at 100%.
216- ✅ Treat terracotta like a stamp — once or twice per screen, never as decoration.
217- ❌ No drop shadows on cards or buttons. The page-flat read is the system.
218- ❌ No pill buttons. No radii above 4px.
219- ❌ No cool colors. No blue, no purple, no neutral grey.
220- ❌ No sans-serif display. Cormorant italic carries the voice.
221 
222---
223 
224## Tokens
225 
226> Generated from the same source the live preview renders from.
227> Treat the values below as the contract — never substitute approximations.
228 
229### Colors
230 
231| Role      | Value |
232|-----------|-------|
233| primary   | `#1F2A1E` |
234| secondary | `#7A8472` |
235| tertiary  | `#B7553A` |
236| neutral   | `#F2EDE0` |
237| surface   | `#F8F4E9` |
238 
239### Typography
240 
241- **Display:** Cormorant Garamond
242- **Body:** Lora
243- **Mono:** IBM Plex Mono
244 
245| Role | size / leading / weight / tracking |
246|------|------------------------------------|
247| Hero | 5.25rem / 1 / 400 / -0.025em |
248| H1   | 3rem / 1.05 / 400 / -0.02em |
249| H2   | 1.5rem / 1.3 / 500 / 0 |
250| Body | 1.0625rem / 1.7 / 400 / 0 |
251 
252### Radius
253 
254- sm: `2px`
255- md: `3px`
256- lg: `4px`
257 
258### Shadows
259 
260- **card:** `0 1px 0 rgba(31, 42, 30, 0.06)`
261- **button:** `none`
262 
263### Borders
264 
265- **card:** `1px solid rgba(31, 42, 30, 0.16)`
266- **divider:** `rgba(31, 42, 30, 0.10)`
267 
268### Buttons
269 
270Four variants, each fully tokenized. The preview renders from these exact values.
271 
272#### Primary
273 
274| Property | Value |
275|----------|-------|
276| shape | `rounded` |
277| background | `#1F2A1E` |
278| color | `#F2EDE0` |
279| border | `1px solid #1F2A1E` |
280| padding | `13px 24px` |
281| fontFamily | `display` |
282| fontWeight | `500` |
283| fontSize | `1rem` |
284| tracking | `0.01em` |
285 
286#### Secondary
287 
288| Property | Value |
289|----------|-------|
290| shape | `rounded` |
291| background | `#F8F4E9` |
292| color | `#1F2A1E` |
293| border | `1px solid #1F2A1E` |
294| padding | `13px 24px` |
295| fontFamily | `display` |
296| fontWeight | `500` |
297| fontSize | `1rem` |
298| tracking | `0.01em` |
299 
300#### Outline
301 
302| Property | Value |
303|----------|-------|
304| shape | `rounded` |
305| background | `transparent` |
306| color | `#B7553A` |
307| border | `1px solid #B7553A` |
308| padding | `12px 22px` |
309| fontFamily | `display` |
310| fontWeight | `500` |
311| fontSize | `0.9375rem` |
312| tracking | `0.02em` |
313| uppercase | `true` |
314 
315#### Ghost
316 
317| Property | Value |
318|----------|-------|
319| shape | `rounded` |
320| background | `transparent` |
321| color | `#B7553A` |
322| border | `none` |
323| padding | `10px 4px` |
324| fontFamily | `display` |
325| fontWeight | `500` |
326| fontSize | `1rem` |
327| tracking | `0.01em` |
328| hoverHint | `underline` |
329 
330### Charts
331 
332| Property | Value |
333|----------|-------|
334| variant | `line` |
335| strokeWidth | `1.5` |
336| gridlines | `false` |
337| highlight | `last` |
338| dotMarker | `true` |
339| axisColor | `#7A8472` |
340| palette | `#B7553A`, `#1F2A1E`, `#7A8472` |
341 
342---
343 
344## Pro tokens
345 
346> Production-fidelity tokens. States, density, motion, elevation,
347> content rules and a measured WCAG contract — derived from the
348> resting tokens unless explicitly authored.
349 
350### States
351 
352#### Button
353 
354- **hover** — bg: `rgba(183, 85, 58, 0.92)`, shadow: `0 4px 20px -8px rgba(183, 85, 58, 0.4)`
355- **focus** — outline: `1.5px solid #B7553A`, outline-offset: `4px`
356- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
357- **disabled** — opacity: `0.45`
358- **loading** — opacity: `0.7`
359- **selected** — bg: `#1F2A1E`, color: `#F8F4E9`
360 
361#### Input
362 
363- **hover** — border: `1px solid #1F2A1E`
364- **focus** — border: `1px solid #B7553A`, shadow: `0 1px 0 0 #B7553A`
365- **disabled** — opacity: `0.45`
366- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
367 
368#### Card
369 
370- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
371- **selected** — border: `1px solid #1F2A1E`
372 
373#### Tab
374 
375- **hover** — color: `#1F2A1E`
376- **focus** — outline: `1.5px solid #B7553A`, outline-offset: `3px`
377- **selected** — color: `#B7553A`, border: `0 0 2px 0 solid #B7553A`
378 
379### Density
380 
381| Mode | padding × | row × | body | radius × | Use for |
382|------|-----------|-------|------|----------|---------|
383| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
384| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
385| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
386 
387### Motion
388 
389**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
390 
391```css
392transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
393```
394 
395| Token | Value |
396|-------|-------|
397| duration.instant | `80ms` |
398| duration.fast | `180ms` |
399| duration.base | `320ms` |
400| duration.slow | `500ms` |
401| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
402| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
403| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
404| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
405 
406### Elevation
407 
408Five-level scale, system-specific recipe.
409 
410| Level | Shadow | Recipe |
411|-------|--------|--------|
412| level0 | `none` | Hairline only — typical editorial resting state. |
413| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
414| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
415| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
416| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
417 
418### Content
419 
420- **measure:** `60ch` (max line length for body prose)
421- **paragraph spacing:** `1.5em`
422- **list indent:** `1.75em`
423- **list gap:** `0.55em`
424- **link:** color `#B7553A`, underline `always`
425- **blockquote:** border `4px solid #B7553A`, padding `0.4em 0 0.4em 1.5em`
426- **code:** background `rgba(31, 42, 30, 0.06)`, color `#1F2A1E`
427 
428### Accessibility (WCAG 2.1)
429 
430**Overall:** AA-Large
431 
432| Pair | Ratio | Required | Grade | Suggested fix |
433|------|-------|----------|-------|---------------|
434| Body text on surface | 13.57:1 | AA | AAA | — |
435| Body text on canvas | 12.76:1 | AA | AAA | — |
436| Muted text on surface | 3.56:1 | AA | AA-Large | `#666e5f` → 4.82:1 (AA) |
437| Accent on surface | 4.37:1 | AA-Large | AA-Large | — |
438| Accent on canvas | 4.11:1 | AA-Large | AA-Large | — |
439
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,400;0,500;0,600;1,400;1,500&family=Lora:wght@400;500;600&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:    ['"Lora"', 'sans-serif'],
        mono:    ['"IBM Plex Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1F2A1E',
        secondary: '#7A8472',
        accent:    '#B7553A',
        neutral:   '#F2EDE0',
        surface:   '#F8F4E9',
      },
      borderRadius: {
        sm: '2px',
        md: '3px',
        lg: '4px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Studio Margaux

A design-studio identity built on asymmetric oversized typography. Cream surfaces, Fraunces at extreme display scale paired with Inter Tight for body, an inked black block reserved for the studio mark and the single primary CTA, and an italic serif accent line that breaks every layout. Built for design agencies, art-direction portfolios, and creative studios that lead with type instead of imagery.

editorialagencywarmpremiumasymmetric
Studio.app
ProductPricingDocsAbout
Sign inGet started
editorial · agency · warm

Build with Studio Margaux.

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

Slate Material

tonal-surface with a slate-blue seed — cool tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. The trustworthy B2B tonal-surface dialect.

saasmaterialminimalmoderntrustworthylightb2b
Slate.app
ProductPricingDocsAbout
Sign inGet started
saas · material · minimal

Build with Slate Material.

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