Warm cream parchment canvas, humanist variable sans, opacity-driven gray scale, and the signature inset-shadow dark pill — quiet craft over cold tech.
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: "Parchment Atelier"3description: "Warm cream parchment canvas, humanist variable sans, opacity-driven gray scale, and the signature inset-shadow dark pill — quiet craft over cold tech."4tags: [warm, minimal, editorial, premium]5colors:6 primary: "#1c1c1c"7 secondary: "#5f5f5d"8 tertiary: "#1c1c1c"9 neutral: "#f7f4ed"10 surface: "#f7f4ed"11typography:12 display: "Inter Tight"13 body: "Inter Tight"14 mono: "JetBrains Mono"15 scale:16 hero: "3.75rem / 1.05 / 600 / -1.5px"17 h1: "3rem / 1 / 600 / -1.2px"18 h2: "2.25rem / 1.1 / 600 / -0.9px"19 body: "1.125rem / 1.38 / 400 / 0"20radius:21 sm: 4px22 md: 6px23 lg: 12px24 pill: 9999px25shadows:26 button: "rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px"27buttons:28 primary:29 background: #1F1B1630 color: #F7F4ED31 border: none32 shape: rounded33 padding: 12px 20px34 font: display / 50035 secondary:36 background: rgba(31,27,22,0.06)37 color: #1F1B1638 border: none39 shape: rounded40 padding: 12px 20px41 font: display / 50042 outline:43 background: transparent44 color: #1F1B1645 border: 1px solid rgba(31,27,22,0.18)46 shape: rounded47 padding: 12px 20px48 font: display / 50049 ghost:50 background: transparent51 color: rgba(31,27,22,0.7)52 border: none53 shape: rounded54 padding: 10px 12px55 font: display / 50056 hover: underline57charts:58 variant: bars59 stroke_width: 1.560 fill_opacity: 0.0861 gridlines: true62 bar_radius: "2px 2px 0 0"63 bar_gap: 6px64 highlight: gradient65 dot_marker: true66fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"67dependencies: ["lucide-react"]68---69 70# Parchment Atelier71 72## AI Build Instructions73 74> **Read this section before writing any code.** The rules below75> are non-negotiable. Every value used in the UI must come from this76> file's frontmatter — never substitute, approximate, or invent new77> colors, fonts, radii, or shadows. If a value is missing, ask the78> user before adding one.79 80### 1 · Your role81 82You are building UI for a project that has adopted **Parchment Atelier** as its83design system. Treat `DESIGN.md` as the single source of truth.84Your job is to translate the user's product requirements into85components and pages that look like they were designed by the same86person who authored this file.87 88### 2 · Token compliance89 90- Pull every color, font family, radius, shadow, and spacing value91 from the frontmatter at the top of this file.92- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never93 hard-code hex values that bypass the system.94- When a token can be expressed as a CSS variable, declare it once95 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 recipes100 101Use these recipes verbatim when building the corresponding component.102 103#### Buttons104 105Four variants are defined. Pick one — never blend variants or invent a fifth.106 107- **Primary** — rounded shape, bg `#1F1B16`, text `#F7F4ED`, padding `12px 20px`, weight `500`.108- **Secondary** — rounded shape, bg `rgba(31,27,22,0.06)`, text `#1F1B16`, padding `12px 20px`, weight `500`.109- **Outline** — rounded shape, text `#1F1B16`, border `1px solid rgba(31,27,22,0.18)`, padding `12px 20px`, weight `500`.110- **Ghost** — rounded shape, text `rgba(31,27,22,0.7)`, padding `10px 12px`, weight `500`.111 112Reach for **primary** as the single dominant CTA per screen.113**Secondary** for the supporting action. **Outline** for tertiary114actions in toolbars. **Ghost** for inline links and table actions.115 116#### Cards117 118- Background: `#f7f4ed`119- Radius: `radius.lg` (`12px`)120- Internal padding: `20px` for compact cards, `24–28px` for content cards.121 122#### Charts123 124- Bar/line variant: `bars`125- Bar radius: `2px 2px 0 0`126- Highlight strategy: `gradient` — emphasize a single bar/point per chart.127 128#### Typography pairings129 130- **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks.131- **Body (`Inter Tight`)** — paragraphs, labels, button text, form inputs.132- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.133 134### 4 · Hard constraints135 136Never do any of the following without explicit instruction from the user:137 138- Introduce a new color, font, radius, or shadow that isn't declared above.139- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).140- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.141- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.142- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.143 144### 5 · Before you finish — verify145 146Run through this checklist for every screen you produce:147 148- [ ] Every color used appears in the Colors table above.149- [ ] Headlines use the display font; body copy uses the body font.150- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).151- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.152- [ ] Cards and dividers use the declared border + shadow tokens.153- [ ] No values were invented; if you needed something missing, you stopped and asked.154 155---156 157## 1. Atmosphere158 159Parchment Atelier earns its warmth through restraint. Every page sits on a creamy parchment canvas (`#f7f4ed`) — a deliberate move away from the cold-white default of most developer tools. The surface feels approachable, almost analog, like a well-kept notebook. Near-black ink (`#1c1c1c`) on warm cream produces an easy, sharp read without the chill of pure black on pure white.160 161The system leans on a humanist variable sans that carries the brand voice. At display sizes (48–60px), weight 600 with aggressive negative tracking (-0.9px to -1.5px) compresses headlines into confident editorial statements. Body copy stays at normal tracking for an unhurried reading rhythm.162 163Most distinctive of all: the depth model is opacity-driven. Instead of an arbitrary gray scale, every gray on the page is `#1c1c1c` modulated through opacity (0.03, 0.04, 0.4, 0.82–0.83). The result is a tonal range that's nearly impossible to fake with hand-picked hexes.164 165**Signature moves**166- Warm parchment background (`#f7f4ed`) — never pure white167- Humanist variable sans, weight 600 with negative tracking at scale168- Opacity-derived grays, all from a single `#1c1c1c` source169- Multi-layer inset shadow on the dark pill: `rgba(255,255,255,0.2) 0 0.5px 0 0 inset, rgba(0,0,0,0.2) 0 0 0 0.5px inset, rgba(0,0,0,0.05) 0 1px 2px 0`170- Warm border palette: `#eceae4` (passive), `rgba(28,28,28,0.4)` (interactive)171- Soft diffuse focus shadow: `rgba(0,0,0,0.1) 0 4px 12px`172 173## 2. Palette174 175### Primary176- **Cream** `#f7f4ed` — page, card and button surfaces177- **Charcoal** `#1c1c1c` — headings, primary text, dark button background178- **Off-White** `#fcfbf8` — text on dark surfaces179 180### Opacity scale (all derived from `#1c1c1c`)181- 100% `#1c1c1c` — primary text182- 83% `rgba(28,28,28,0.83)` — strong secondary183- 82% `rgba(28,28,28,0.82)` — body copy184- 40% `rgba(28,28,28,0.4)` — interactive borders185- 4% `rgba(28,28,28,0.04)` — hover micro-tints186- 3% `rgba(28,28,28,0.03)` — barely-visible overlays187- Muted `#5f5f5d` — captions, descriptions188 189### Lines190- Passive border: `#eceae4`191- Interactive border: `rgba(28,28,28,0.4)`192- Focus shadow: `rgba(0,0,0,0.1) 0 4px 12px`193- Ring: `rgba(59,130,246,0.5)` 2px194 195## 3. Typography196 197| Role | Size | Weight | Leading | Tracking |198|------|------|--------|---------|----------|199| Display | 60px | 600 | 1.05 | -1.5px |200| Section | 48px | 600 | 1.00 | -1.2px |201| Sub-heading | 36px | 600 | 1.10 | -0.9px |202| Card title | 20px | 400 | 1.25 | normal |203| Body L | 18px | 400 | 1.38 | normal |204| Body | 16px | 400 | 1.50 | normal |205| Button | 16px | 400 | 1.50 | normal |206| Caption | 14px | 400 | 1.50 | normal |207 208**Two weights, clear roles:** 400 for body/UI/links/buttons, 600 for headings. Hierarchy comes from size and tracking, not weight stacks. Never reach for 700 — it breaks the system.209 210## 4. Buttons211 212### Primary Dark (inset shadow)213```css214background: #1c1c1c;215color: #fcfbf8;216padding: 8px 16px;217border-radius: 6px;218box-shadow:219 rgba(255,255,255,0.2) 0 0.5px 0 0 inset,220 rgba(0,0,0,0.2) 0 0 0 0.5px inset,221 rgba(0,0,0,0.05) 0 1px 2px 0;222```223 224### Ghost225- Transparent background, `#1c1c1c` text226- `1px solid rgba(28,28,28,0.4)` border, 6px radius227- Active: opacity 0.8228 229### Cream Surface230- `#f7f4ed` background, no border, 6px radius — for tertiary actions231 232### Pill / Icon233- `#f7f4ed` background, 9999px radius, same inset shadow as primary dark234- Reserved for icon toggles, never rectangular labels235 236## 5. Cards237 238- Background: `#f7f4ed` (matches page — no card lift)239- Border: `1px solid #eceae4`240- Radius: 12px standard, 16px featured, 8px compact241- No box-shadow — borders carry containment242 243## 6. Spacing244 245- Base: 8px246- Scale: `8, 10, 12, 16, 24, 32, 40, 56, 80, 96, 128, 176, 192, 208`247- Section vertical: 80–208px — generous editorial breathing room248- Container max: ~1200px249 250## 7. Radius scale251 252`4 / 6 / 8 / 12 / 16 / 9999` — pill is for action toggles and icon buttons, never rectangular CTAs.253 254## 8. Depth & elevation255 256| Level | Treatment | Use |257|-------|-----------|-----|258| 0 | Flat cream | Page, content |259| 1 | `1px solid #eceae4` | Cards, image frames |260| 2 | Inset stack on dark pill | Primary CTA |261| 3 | `rgba(0,0,0,0.1) 0 4px 12px` | Focus, active |262 263The depth philosophy is shallow. Borders contain, the inset shadow on dark pills creates a pressed-into-surface tactility, and focus uses a diffuse warm glow rather than a sharp ring.264 265## 9. Do's & don'ts266 267✅ **Do**268- Use cream (`#f7f4ed`) as the page foundation269- Derive grays from `#1c1c1c` at varying opacity270- Apply the inset shadow on every dark pill — it is the brand271- Use `#eceae4` borders instead of card shadows272- Keep the weight palette to 400 / 600 only273 274❌ **Don't**275- Use pure white as the page background276- Apply heavy drop-shadows to cards277- Reach for weight 700278- Use saturated accent colors — the palette is intentionally warm-neutral279- Apply 9999px radius to rectangular buttons280 281---282 283## Tokens284 285> Generated from the same source the live preview renders from.286> Treat the values below as the contract — never substitute approximations.287 288### Colors289 290| Role | Value |291|-----------|-------|292| primary | `#1c1c1c` |293| secondary | `#5f5f5d` |294| tertiary | `#1c1c1c` |295| neutral | `#f7f4ed` |296| surface | `#f7f4ed` |297 298### Typography299 300- **Display:** Inter Tight301- **Body:** Inter Tight302- **Mono:** JetBrains Mono303 304| Role | size / leading / weight / tracking |305|------|------------------------------------|306| Hero | 3.75rem / 1.05 / 600 / -1.5px |307| H1 | 3rem / 1 / 600 / -1.2px |308| H2 | 2.25rem / 1.1 / 600 / -0.9px |309| Body | 1.125rem / 1.38 / 400 / 0 |310 311### Radius312 313- sm: `4px`314- md: `6px`315- lg: `12px`316- pill: `9999px`317 318### Shadows319 320- **button:** `rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`321 322### Buttons323 324Four variants, each fully tokenized. The preview renders from these exact values.325 326#### Primary327 328| Property | Value |329|----------|-------|330| shape | `rounded` |331| background | `#1F1B16` |332| color | `#F7F4ED` |333| border | `none` |334| padding | `12px 20px` |335| fontFamily | `display` |336| fontWeight | `500` |337 338#### Secondary339 340| Property | Value |341|----------|-------|342| shape | `rounded` |343| background | `rgba(31,27,22,0.06)` |344| color | `#1F1B16` |345| border | `none` |346| padding | `12px 20px` |347| fontFamily | `display` |348| fontWeight | `500` |349 350#### Outline351 352| Property | Value |353|----------|-------|354| shape | `rounded` |355| background | `transparent` |356| color | `#1F1B16` |357| border | `1px solid rgba(31,27,22,0.18)` |358| padding | `12px 20px` |359| fontFamily | `display` |360| fontWeight | `500` |361 362#### Ghost363 364| Property | Value |365|----------|-------|366| shape | `rounded` |367| background | `transparent` |368| color | `rgba(31,27,22,0.7)` |369| border | `none` |370| padding | `10px 12px` |371| fontFamily | `display` |372| fontWeight | `500` |373| hoverHint | `underline` |374 375### Charts376 377| Property | Value |378|----------|-------|379| variant | `bars` |380| strokeWidth | `1.5` |381| fillOpacity | `0.08` |382| gridlines | `true` |383| barRadius | `2px 2px 0 0` |384| barGap | `6px` |385| highlight | `gradient` |386| dotMarker | `true` |387 # 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=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Inter Tight"', 'serif'], sans: ['"Inter Tight"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#1c1c1c', secondary: '#5f5f5d', accent: '#1c1c1c', neutral: '#f7f4ed', surface: '#f7f4ed', }, borderRadius: { sm: '4px', md: '6px', lg: '12px', }, }, },};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.
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.
Warm linen canvas with abundant whitespace, gently rounded corners, and a single sage accent. Calm, airy, considered. Nothing shouts.
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.