A warm off-white paper system that earns trust through quiet. Cream-paper surfaces, EB Garamond at oversized scale for headlines paired with Inter for UI, generous reading line-heights, a single forest-green accent reserved for verified marks and the primary CTA. Built for advisory firms, professional services, premium brands, and editorial sites that want quiet European authority.
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: "Hemlock Paper"3description: "A warm off-white paper system that earns trust through quiet. Cream-paper surfaces, EB Garamond at oversized scale for headlines paired with Inter for UI, generous reading line-heights, a single forest-green accent reserved for verified marks and the primary CTA. Built for advisory firms, professional services, premium brands, and editorial sites that want quiet European authority."4tags: [editorial, warm, premium, serif, minimal]5colors:6 primary: "#1c1a14"7 secondary: "#6b6759"8 tertiary: "#1c1a14"9 neutral: "#ebe4cf"10 surface: "#f3ecd6"11typography:12 display: "EB Garamond"13 body: Inter14 mono: "JetBrains Mono"15 scale:16 hero: "6.5rem / 0.98 / 400 / -0.035em"17 h1: "3.75rem / 1.06 / 400 / -0.022em"18 h2: "1.875rem / 1.22 / 500 / -0.012em"19 body: "1.0625rem / 1.72 / 400 / -0.005em"20radius:21 sm: 2px22 md: 3px23 lg: 4px24 pill: 9999px25shadows:26 card: none27 button: none28borders:29 card: "1px solid rgba(28,26,20,0.12)"30 divider: rgba(28,26,20,0.16)31buttons:32 primary:33 background: #24423234 color: #f3ecd635 border: none36 shape: sharp37 padding: 12px 24px38 font: 500 / 0.8125rem / 0.14em39 uppercase: true40 secondary:41 background: transparent42 color: #1c1a1443 border: 1px solid #1c1a1444 shape: sharp45 padding: 12px 24px46 font: 500 / 0.8125rem / 0.14em47 uppercase: true48 outline:49 background: transparent50 color: #1c1a1451 border: 1px solid rgba(28,26,20,0.18)52 shape: sharp53 padding: 12px 24px54 font: 500 / 0.8125rem / 0.14em55 uppercase: true56 ghost:57 background: transparent58 color: #6b675959 border: none60 shape: sharp61 padding: 12px 16px62 font: 500 / 0.8125rem / 0.14em63 uppercase: true64charts:65 variant: "thin-bars"66 stroke_width: 167 fill_opacity: 068 gridlines: false69 bar_gap: 12px70 highlight: single71 dot_marker: false72fonts_url: "https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"73dependencies: ["lucide-react"]74---75 76# Hemlock Paper77 78## AI Build Instructions79 80> **Read this section before writing any code.** The rules below81> are non-negotiable. Every value used in the UI must come from this82> file's frontmatter — never substitute, approximate, or invent new83> colors, fonts, radii, or shadows. If a value is missing, ask the84> user before adding one.85 86### 1 · Your role87 88You are building UI for a project that has adopted **Hemlock Paper** as its89design system. Treat `DESIGN.md` as the single source of truth.90Your job is to translate the user's product requirements into91components and pages that look like they were designed by the same92person who authored this file.93 94### 2 · Token compliance95 96- Pull every color, font family, radius, shadow, and spacing value97 from the frontmatter at the top of this file.98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never99 hard-code hex values that bypass the system.100- When a token can be expressed as a CSS variable, declare it once101 in your global stylesheet and reference it everywhere downstream.102- The Google Fonts `<link>` is provided in the Typography section.103 Add it to `<head>` before any component renders.104 105### 3 · Component recipes106 107Use these recipes verbatim when building the corresponding component.108 109#### Buttons110 111Four variants are defined. Pick one — never blend variants or invent a fifth.112 113- **Primary** — sharp shape, bg `#244232`, text `#f3ecd6`, padding `12px 24px`, weight `500`, uppercased.114- **Secondary** — sharp shape, text `#1c1a14`, border `1px solid #1c1a14`, padding `12px 24px`, weight `500`, uppercased.115- **Outline** — sharp shape, text `#1c1a14`, border `1px solid rgba(28,26,20,0.18)`, padding `12px 24px`, weight `500`, uppercased.116- **Ghost** — sharp shape, text `#6b6759`, padding `12px 16px`, weight `500`, uppercased.117 118Reach for **primary** as the single dominant CTA per screen.119**Secondary** for the supporting action. **Outline** for tertiary120actions in toolbars. **Ghost** for inline links and table actions.121 122#### Cards123 124- Background: `#f3ecd6`125- Border: `1px solid rgba(28,26,20,0.12)`126- Shadow: `none`127- Radius: `radius.lg` (`4px`)128- Internal padding: `20px` for compact cards, `24–28px` for content cards.129 130#### Tabs131 132Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.133 134#### Charts135 136- Bar/line variant: `thin-bars`137- No gridlines — let the bars/lines carry the data.138- Highlight strategy: `single` — emphasize a single bar/point per chart.139 140#### Typography pairings141 142- **Display (`EB Garamond`)** — h1, h2, hero headlines, brand wordmarks.143- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.144- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.145 146### 4 · Hard constraints147 148Never do any of the following without explicit instruction from the user:149 150- Introduce a new color, font, radius, or shadow that isn't declared above.151- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).152- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.153- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.154- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.155 156### 5 · Before you finish — verify157 158Run through this checklist for every screen you produce:159 160- [ ] Every color used appears in the Colors table above.161- [ ] Headlines use the display font; body copy uses the body font.162- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).163- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.164- [ ] Cards and dividers use the declared border + shadow tokens.165- [ ] No values were invented; if you needed something missing, you stopped and asked.166 167---168 169## 1. Atmosphere170 171Hemlock Paper is a warm off-white paper system that earns trust through quiet. The page surface is cream paper `#f3ecd6` — warmer than a clinical white-paper, calmer than parchment. Headlines run in EB Garamond 400 at 104px — the classical serif at scale, never bold. Body sits in Inter at 17px on a 1.72 leading — a generous reading rhythm that signals long-form respect. UI labels run in Inter 500 with 0.14em uppercase tracking — the engraved-foundry voice. The single accent is forest green `#244232` reserved for verified marks (a small filled square in front of a verified item), the primary CTA, and the active step in a process flow.172 173The discipline is in the proportion: huge classical serif on warm paper, generous body leading, and one forest-green mark per page that reads as a notary stamp. The system never lifts a card and never adds shadows.174 175**Signature moves**176- EB Garamond 400 at 104px headlines — classical serif at scale, never bold177- Warm cream paper `#f3ecd6` — never bright white, never beige178- Forest green `#244232` exclusively on verified marks + primary CTA + active step179- 17px Inter body on 1.72 leading — generous long-form reading rhythm180- 0.14em uppercase tracking on UI labels — engraved-foundry voice181- Sharp 2-4px corners — letterpress precision, no shadows anywhere182 183## 2. Palette184 185### Surfaces186- **Cream Paper** `#f3ecd6` — page background (warm off-white)187- **Cream Lift** `#ebe4cf` — secondary surfaces, footer188- **Hairline** `rgba(28,26,20,0.12)` — every divider, every card edge189 190### Ink191- **Ink** `#1c1a14` — text, headings (warm near-black)192- **Ink 50** `#6b6759` — secondary text, mono captions193 194### Accent195- **Forest** `#244232` — verified marks, primary CTA, active step indicator196- **Forest Soft** `rgba(36,66,50,0.10)` — focus ring, hovered step197 198## 3. Typography199 200| Role | Font | Size | Weight | Leading | Tracking |201|------|------|------|--------|---------|----------|202| Hero | EB Garamond | 104px | 400 | 0.98 | -0.035em |203| H1 | EB Garamond | 60px | 400 | 1.06 | -0.022em |204| H2 | EB Garamond | 30px | 500 | 1.22 | -0.012em |205| Pull Quote | EB Garamond (italic) | 26px | 400 | 1.4 | -0.008em |206| Body | Inter | 17px | 400 | 1.72 | -0.005em |207| UI / Button | Inter | 13px | 500 | 1.4 | 0.14em uppercase |208| Caption / Date | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase |209| Reference Number | JetBrains Mono | 13px | 500 | 1.0 | 0.04em tabular-nums |210 211EB Garamond at 400 only — bold breaks the classical proportion. Italic reserved for pull quotes and the verified-by line.212 213## 4. Buttons214 215### Primary (Forest — Engage)216```css217background: #244232;218color: #f3ecd6;219padding: 12px 24px;220border-radius: 3px;221text-transform: uppercase;222letter-spacing: 0.14em;223font-weight: 500;224```225 226The forest-green on warm paper reads as a wax-stamped notary mark, not a marketing CTA.227 228### Secondary (Ink Outline)229- Transparent, 1px solid ink, ink text — same near-sharp shape, same wide tracking230 231### Outline & Ghost232- Outline: transparent, 1px hairline at 18% ink233- Ghost: no border, ink-50 uppercase234 235## 5. Cards (rare)236 237The system prefers hairline-divided sections over cards. When a card is needed, it is sharp 4px corners with a 1px hairline at 12% ink — never lifted, never shadowed. Practice-area cards may add a 1px ink top border (3px wide) — the only chrome.238 239## 6. Charts240 241Thin precise bars (3px wide, 12px gap). One bar in forest, others in 22% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts are reserved for performance breakdowns and read as inscribed exhibits.242 243## 7. Tabs244 245Underline 1px in ink for the active state. Inactive tabs are ink-50 in Inter 500 uppercase 0.14em. The active label often switches to EB Garamond italic at the same size — that is the rhythm change.246 247## 8. Spacing248 249- Base 8px250- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200`251- Section padding: 160px desktop, 80px mobile — long-form rhythm252 253## 9. Do's & don'ts254 255✅ **Do**256- Use EB Garamond at 400 only — anything heavier breaks the classical proportion257- Hold the warm cream paper surface — bright white reads as web app, beige reads as old textbook258- Reserve forest green for verified marks + primary CTA + active step exclusively259- Use 17px Inter body on 1.72 leading — long-form reading respect260 261❌ **Don't**262- Use stock photography of pillars, trees, or "trust" imagery — the typography earns it263- Use EB Garamond at 600+ — bold breaks the classical proportion264- Use a second accent — forest alone, on three specific surfaces265- Add shadows or lifted cards — hairlines and breathing room carry the layout266 267---268 269## Tokens270 271> Generated from the same source the live preview renders from.272> Treat the values below as the contract — never substitute approximations.273 274### Colors275 276| Role | Value |277|-----------|-------|278| primary | `#1c1a14` |279| secondary | `#6b6759` |280| tertiary | `#1c1a14` |281| neutral | `#ebe4cf` |282| surface | `#f3ecd6` |283 284### Typography285 286- **Display:** EB Garamond287- **Body:** Inter288- **Mono:** JetBrains Mono289 290| Role | size / leading / weight / tracking |291|------|------------------------------------|292| Hero | 6.5rem / 0.98 / 400 / -0.035em |293| H1 | 3.75rem / 1.06 / 400 / -0.022em |294| H2 | 1.875rem / 1.22 / 500 / -0.012em |295| Body | 1.0625rem / 1.72 / 400 / -0.005em |296 297### Radius298 299- sm: `2px`300- md: `3px`301- lg: `4px`302- pill: `9999px`303 304### Shadows305 306- **card:** `none`307- **button:** `none`308 309### Borders310 311- **card:** `1px solid rgba(28,26,20,0.12)`312- **divider:** `rgba(28,26,20,0.16)`313 314### Buttons315 316Four variants, each fully tokenized. The preview renders from these exact values.317 318#### Primary319 320| Property | Value |321|----------|-------|322| shape | `sharp` |323| background | `#244232` |324| color | `#f3ecd6` |325| border | `none` |326| padding | `12px 24px` |327| fontWeight | `500` |328| fontSize | `0.8125rem` |329| tracking | `0.14em` |330| uppercase | `true` |331 332#### Secondary333 334| Property | Value |335|----------|-------|336| shape | `sharp` |337| background | `transparent` |338| color | `#1c1a14` |339| border | `1px solid #1c1a14` |340| padding | `12px 24px` |341| fontWeight | `500` |342| fontSize | `0.8125rem` |343| tracking | `0.14em` |344| uppercase | `true` |345 346#### Outline347 348| Property | Value |349|----------|-------|350| shape | `sharp` |351| background | `transparent` |352| color | `#1c1a14` |353| border | `1px solid rgba(28,26,20,0.18)` |354| padding | `12px 24px` |355| fontWeight | `500` |356| fontSize | `0.8125rem` |357| tracking | `0.14em` |358| uppercase | `true` |359 360#### Ghost361 362| Property | Value |363|----------|-------|364| shape | `sharp` |365| background | `transparent` |366| color | `#6b6759` |367| border | `none` |368| padding | `12px 16px` |369| fontWeight | `500` |370| fontSize | `0.8125rem` |371| tracking | `0.14em` |372| uppercase | `true` |373 374### Charts375 376| Property | Value |377|----------|-------|378| variant | `thin-bars` |379| strokeWidth | `1` |380| fillOpacity | `0` |381| gridlines | `false` |382| barGap | `12px` |383| highlight | `single` |384| dotMarker | `false` |385 # 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=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"EB Garamond"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#1c1a14', secondary: '#6b6759', accent: '#1c1a14', neutral: '#ebe4cf', surface: '#f3ecd6', }, borderRadius: { sm: '2px', md: '3px', lg: '4px', }, }, },};Dark-mode-native developer platform. Emerald (#3ecf8e) as identity marker, 1.00 line-height hero, depth from layered borders not shadows, mono uppercase labels.
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.
Tonal elevation, dynamic-color purple primary, full-rounded buttons, Roboto Flex throughout. Faithful to the modern tonal-surface spec — generous, accessible, dependable for product UI.
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.