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.
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.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
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: Lora14 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: 2px22 md: 3px23 lg: 4px24shadows:25 card: "0 1px 0 rgba(31, 42, 30, 0.06)"26 button: none27borders:28 card: "1px solid rgba(31, 42, 30, 0.16)"29 divider: "rgba(31, 42, 30, 0.10)"30buttons:31 primary:32 background: #1F2A1E33 color: #F2EDE034 border: 1px solid #1F2A1E35 shape: rounded36 padding: 13px 24px37 font: display / 500 / 1rem / 0.01em38 secondary:39 background: #F8F4E940 color: #1F2A1E41 border: 1px solid #1F2A1E42 shape: rounded43 padding: 13px 24px44 font: display / 500 / 1rem / 0.01em45 outline:46 background: transparent47 color: #B7553A48 border: 1px solid #B7553A49 shape: rounded50 padding: 12px 22px51 font: display / 500 / 0.9375rem / 0.02em52 uppercase: true53 ghost:54 background: transparent55 color: #B7553A56 border: none57 shape: rounded58 padding: 10px 4px59 font: display / 500 / 1rem / 0.01em60 hover: underline61charts:62 variant: line63 stroke_width: 1.564 gridlines: false65 highlight: last66 dot_marker: true67 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 Press74 75## AI Build Instructions76 77> **Read this section before writing any code.** The rules below78> are non-negotiable. Every value used in the UI must come from this79> file's frontmatter — never substitute, approximate, or invent new80> colors, fonts, radii, or shadows. If a value is missing, ask the81> user before adding one.82 83### 1 · Your role84 85You are building UI for a project that has adopted **Botanical Press** as its86design system. Treat `DESIGN.md` as the single source of truth.87Your job is to translate the user's product requirements into88components and pages that look like they were designed by the same89person who authored this file.90 91### 2 · Token compliance92 93- Pull every color, font family, radius, shadow, and spacing value94 from the frontmatter at the top of this file.95- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never96 hard-code hex values that bypass the system.97- When a token can be expressed as a CSS variable, declare it once98 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 recipes103 104Use these recipes verbatim when building the corresponding component.105 106#### Buttons107 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 tertiary117actions in toolbars. **Ghost** for inline links and table actions.118 119#### Cards120 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#### Charts128 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 pairings135 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 constraints141 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 — verify151 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## Overview164Botanical 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## Color169- **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## Typography178**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## Buttons189All 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## Cards199Bone-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 & Data202A 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 Stamps205The 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'ts213- ✅ 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## Tokens225 226> Generated from the same source the live preview renders from.227> Treat the values below as the contract — never substitute approximations.228 229### Colors230 231| Role | Value |232|-----------|-------|233| primary | `#1F2A1E` |234| secondary | `#7A8472` |235| tertiary | `#B7553A` |236| neutral | `#F2EDE0` |237| surface | `#F8F4E9` |238 239### Typography240 241- **Display:** Cormorant Garamond242- **Body:** Lora243- **Mono:** IBM Plex Mono244 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### Radius253 254- sm: `2px`255- md: `3px`256- lg: `4px`257 258### Shadows259 260- **card:** `0 1px 0 rgba(31, 42, 30, 0.06)`261- **button:** `none`262 263### Borders264 265- **card:** `1px solid rgba(31, 42, 30, 0.16)`266- **divider:** `rgba(31, 42, 30, 0.10)`267 268### Buttons269 270Four variants, each fully tokenized. The preview renders from these exact values.271 272#### Primary273 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#### Secondary287 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#### Outline301 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#### Ghost316 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### Charts331 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 # 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.<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" />npm install lucide-react// tailwind.config.jsexport 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', }, }, },};Luxury productivity. Deep purple hero against pristine white, non-standard variable weight 460/540, ultra-tight 0.96 leading, warm cream CTAs, lavender as the only accent.
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.
Design-agency editorial: a single oversized Bodoni Moda display at 7rem, a single ink, an off-white canvas. The signature is the radical scale gap — hero 7rem, body 1rem, nothing in between except a mono eyebrow.
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.