Warm cream canvas with yellow-undertone ink, gothic compressed display, literary serif body, and warm crimson hover — code-editor elegance as print publication.
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: "Inkwell IDE"3description: "Warm cream canvas with yellow-undertone ink, gothic compressed display, literary serif body, and warm crimson hover — code-editor elegance as print publication."4tags: [warm, editorial, code, premium]5colors:6 primary: "#26251e"7 secondary: "#5a5a52"8 tertiary: "#f54e00"9 neutral: "#f2f1ed"10 surface: "#ebeae5"11typography:12 display: "Space Grotesk"13 body: Fraunces14 mono: "JetBrains Mono"15 scale:16 hero: "4.5rem / 1.1 / 500 / -2.16px"17 h1: "2.25rem / 1.2 / 500 / -0.72px"18 h2: "1.625rem / 1.25 / 500 / -0.325px"19 body: "1.08rem / 1.35 / 400 / 0"20radius:21 sm: 2px22 md: 8px23 lg: 10px24 pill: 9999px25shadows:26 card: "rgba(38,37,30,0.1) 0 0 0 1px, rgba(0,0,0,0.02) 0 0 16px, rgba(0,0,0,0.008) 0 0 8px"27 button: "rgba(0,0,0,0.1) 0 4px 12px"28buttons:29 primary:30 background: #C13B2731 color: #FFFEF832 border: none33 shape: rounded34 padding: 11px 20px35 font: display / 60036 secondary:37 background: #FFFEF838 color: #1A161239 border: 1px solid #E8E0D040 shape: rounded41 padding: 11px 20px42 font: display / 60043 outline:44 background: transparent45 color: #1A161246 border: 1px solid #1A161247 shape: rounded48 padding: 11px 20px49 font: display / 60050 ghost:51 background: transparent52 color: #C13B2753 border: none54 shape: rounded55 padding: 10px 12px56 font: display / 60057 hover: underline58charts:59 variant: stepped60 stroke_width: 261 fill_opacity: 0.162 gridlines: false63 bar_gap: 0px64 highlight: single65 dot_marker: false66fonts_url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Fraunces:opsz,wght@9..144,400;9..144,500&family=JetBrains+Mono:wght@400&display=swap"67dependencies: ["lucide-react"]68---69 70# Inkwell IDE71 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 **Inkwell IDE** 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 `#C13B27`, text `#FFFEF8`, padding `11px 20px`, weight `600`.108- **Secondary** — rounded shape, bg `#FFFEF8`, text `#1A1612`, border `1px solid #E8E0D0`, padding `11px 20px`, weight `600`.109- **Outline** — rounded shape, text `#1A1612`, border `1px solid #1A1612`, padding `11px 20px`, weight `600`.110- **Ghost** — rounded shape, text `#C13B27`, padding `10px 12px`, weight `600`.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: `#ebeae5`119- Shadow: `rgba(38,37,30,0.1) 0 0 0 1px, rgba(0,0,0,0.02) 0 0 16px, rgba(0,0,0,0.008) 0 0 8px`120- Radius: `radius.lg` (`10px`)121- Internal padding: `20px` for compact cards, `24–28px` for content cards.122 123#### Tabs124 125Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill.126 127#### Charts128 129- Bar/line variant: `stepped`130- No gridlines — let the bars/lines carry the data.131- Highlight strategy: `single` — emphasize a single bar/point per chart.132 133#### Typography pairings134 135- **Display (`Space Grotesk`)** — h1, h2, hero headlines, brand wordmarks.136- **Body (`Fraunces`)** — paragraphs, labels, button text, form inputs.137- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.138 139### 4 · Hard constraints140 141Never do any of the following without explicit instruction from the user:142 143- Introduce a new color, font, radius, or shadow that isn't declared above.144- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).145- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.146- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.147- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.148 149### 5 · Before you finish — verify150 151Run through this checklist for every screen you produce:152 153- [ ] Every color used appears in the Colors table above.154- [ ] Headlines use the display font; body copy uses the body font.155- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).156- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.157- [ ] Cards and dividers use the declared border + shadow tokens.158- [ ] No values were invented; if you needed something missing, you stopped and asked.159 160---161 162## 1. Atmosphere163 164Inkwell IDE is warm minimalism meets code-editor elegance. The entire experience is built on a warm off-white canvas (`#f2f1ed`) with dark warm-brown ink (`#26251e`) — not pure black, not neutral gray, but a deeply warm near-black with a yellow undertone that evokes old paper, ink, and craft. The warmth permeates every surface: cream backgrounds (`#e6e5e0`, `#ebeae5`), borders dissolve into transparent warm overlays, and even the error state (`#cf2d56`) carries warmth rather than clinical red. The result feels more like a premium print publication than a tech website.165 166The typographic signature is a compressed gothic sans for display — at 72px with -2.16px letter-spacing, headlines feel precision-engineered. As secondary voice, a literary serif provides editorial counterpoint for body copy, with contextual swash alternates that bring a calligraphic quality to long-form reading. A monospace voice handles code and technical labels, connecting the marketing surface to the IDE's core identity.167 168The border system uses warm brown at varying alpha levels (0.1, 0.2, 0.55) — borders that feel organic rather than mechanical.169 170**Signature moves**171- Compressed gothic display with aggressive negative tracking (-2.16px at 72px, -0.72px at 36px)172- Literary serif body with swash alternates — editorial warmth173- Warm off-white canvas (`#f2f1ed`) — never pure white174- Warm near-black ink (`#26251e`) with yellow undertone175- Accent crimson-orange (`#f54e00`) for brand and links176- Hover state shifts text to warm crimson (`#cf2d56`) — the signature interaction177- Diffused atmospheric shadows: 28px / 70px blur at moderate opacity178 179## 2. Palette180 181### Primary182- **Ink Dark** `#26251e` — text, headings, dark surfaces183- **Cream** `#f2f1ed` — page background184- **Light Cream** `#e6e5e0` — secondary surface, button background185- Pure White `#ffffff` — sparingly for max-contrast highlights186 187### Accent188- **Ember Orange** `#f54e00` — brand, primary CTA, active links189- Gold `#c08532` — premium / highlighted contexts190 191### Semantic192- Error / Hover `#cf2d56` — warm crimson, the interaction signal193- Success `#1f8a65` — muted teal-green194 195### Timeline colors196- Thinking `#dfa88f` (peach)197- Grep `#9fc9a2` (sage)198- Read `#9fbbe0` (soft blue)199- Edit `#c0a8dd` (lavender)200 201### Surface scale202- 100 `#f7f7f4` / 200 `#f2f1ed` / 300 `#ebeae5` / 400 `#e6e5e0` / 500 `#e1e0db`203 204### Borders205- Standard `rgba(38,37,30,0.1)` (warm brown 10%)206- Medium `rgba(38,37,30,0.2)`207- Strong `rgba(38,37,30,0.55)`208 209## 3. Typography210 211| Role | Font | Size | Weight | Leading | Tracking |212|------|------|------|--------|---------|----------|213| Display | Gothic | 72px | 500 | 1.10 | -2.16px |214| Section | Gothic | 36px | 500 | 1.20 | -0.72px |215| Sub-heading | Gothic | 26px | 500 | 1.25 | -0.325px |216| Title S | Gothic | 22px | 500 | 1.30 | -0.11px |217| Body Serif | Serif | 19.2px | 500 | 1.50 | normal |218| Body | Serif | 17.28px | 400 | 1.35 | normal |219| UI | Gothic | 16px | 400 | 1.50 | 0.08px |220| Button | Gothic | 14px | 500 | 1.00 | normal |221| Caption | Gothic | 11px | 400 | 1.50 | normal |222| Mono | Mono | 12px | 400 | 1.67 | normal |223 224**Three voices, three jobs.** Gothic for display and UI. Serif for editorial body. Mono for code. Hierarchy comes from size and tracking — the display font stays at weight 500 across the board, never bolder.225 226## 4. Buttons227 228### Primary (Warm Surface)229```css230background: #ebeae5;231color: #26251e;232padding: 10px 12px 10px 14px;233border-radius: 8px;234```235Hover: text shifts to `#cf2d56`.236 237### Secondary Pill238- `#e6e5e0` background, `rgba(38,37,30,0.6)` text239- Padding 3px 8px, full pill (9999px)240- For tags and filters241 242### Ghost243- `rgba(38,37,30,0.06)` background, `rgba(38,37,30,0.55)` text244- 6px 12px padding — for tertiary actions245 246## 5. Cards247 248- Background: `#e6e5e0` or `#f2f1ed`249- Border: `1px solid rgba(38,37,30,0.1)`250- Radius: 8px standard, 4px compact, 10px featured251- Elevated: `rgba(0,0,0,0.14) 0 28px 70px, rgba(0,0,0,0.1) 0 14px 32px`252 253## 6. Spacing254 255- Base: 8px256- Fine: `1.5, 2, 2.5, 3, 4, 5, 6` — sub-8px for icon/text micro-alignment257- Standard: `8, 10, 12, 14, 16, 24, 32, 48, 64, 96`258- Section vertical: 80px+259 260## 7. Radius scale261 262`1.5 / 2 / 3 / 4 / 8 / 10 / 9999` — pill for tags and filters, 8px for primary buttons and cards.263 264## 8. Depth & elevation265 266| Level | Treatment | Use |267|-------|-----------|-----|268| 0 | Flat | Page, text blocks |269| 1 | `rgba(38,37,30,0.1) 0 0 0 1px` | Standard card border |270| 2 | `rgba(0,0,0,0.02) 0 0 16px` | Floating, subtle glow |271| 3 | `rgba(0,0,0,0.14) 0 28px 70px` + `rgba(0,0,0,0.1) 0 14px 32px` | Modals, elevated cards |272| Focus | `rgba(0,0,0,0.1) 0 4px 12px` | Interactive focus |273 274**Atmospheric depth.** Shadows use dramatically large blur (28px, 70px) at moderate opacity (0.14, 0.1) — diffused, atmospheric lift rather than hard-edged drops. Cards don't float above the page; the page gently opens space for them.275 276## 9. Do's & don'ts277 278✅ **Do**279- Use `#f2f1ed` cream as the page foundation280- Apply aggressive negative tracking on gothic display (-2.16px at 72px)281- Use the literary serif for body copy — editorial warmth282- Shift hover text to `#cf2d56` warm crimson — the signature interaction283- Use `rgba(38,37,30, α)` for warm brown borders284 285❌ **Don't**286- Use pure white (`#ffffff`) as primary surface287- Use cold blue focus rings — keep the warm tone288- Reach for bold (700+) display weight — 500 is the cap289- Apply 9999px radius to rectangular buttons — pills are for tags only290- Use neutral gray borders — they kill the warmth291 292---293 294## Tokens295 296> Generated from the same source the live preview renders from.297> Treat the values below as the contract — never substitute approximations.298 299### Colors300 301| Role | Value |302|-----------|-------|303| primary | `#26251e` |304| secondary | `#5a5a52` |305| tertiary | `#f54e00` |306| neutral | `#f2f1ed` |307| surface | `#ebeae5` |308 309### Typography310 311- **Display:** Space Grotesk312- **Body:** Fraunces313- **Mono:** JetBrains Mono314 315| Role | size / leading / weight / tracking |316|------|------------------------------------|317| Hero | 4.5rem / 1.1 / 500 / -2.16px |318| H1 | 2.25rem / 1.2 / 500 / -0.72px |319| H2 | 1.625rem / 1.25 / 500 / -0.325px |320| Body | 1.08rem / 1.35 / 400 / 0 |321 322### Radius323 324- sm: `2px`325- md: `8px`326- lg: `10px`327- pill: `9999px`328 329### Shadows330 331- **card:** `rgba(38,37,30,0.1) 0 0 0 1px, rgba(0,0,0,0.02) 0 0 16px, rgba(0,0,0,0.008) 0 0 8px`332- **button:** `rgba(0,0,0,0.1) 0 4px 12px`333 334### Buttons335 336Four variants, each fully tokenized. The preview renders from these exact values.337 338#### Primary339 340| Property | Value |341|----------|-------|342| shape | `rounded` |343| background | `#C13B27` |344| color | `#FFFEF8` |345| border | `none` |346| padding | `11px 20px` |347| fontFamily | `display` |348| fontWeight | `600` |349 350#### Secondary351 352| Property | Value |353|----------|-------|354| shape | `rounded` |355| background | `#FFFEF8` |356| color | `#1A1612` |357| border | `1px solid #E8E0D0` |358| padding | `11px 20px` |359| fontFamily | `display` |360| fontWeight | `600` |361 362#### Outline363 364| Property | Value |365|----------|-------|366| shape | `rounded` |367| background | `transparent` |368| color | `#1A1612` |369| border | `1px solid #1A1612` |370| padding | `11px 20px` |371| fontFamily | `display` |372| fontWeight | `600` |373 374#### Ghost375 376| Property | Value |377|----------|-------|378| shape | `rounded` |379| background | `transparent` |380| color | `#C13B27` |381| border | `none` |382| padding | `10px 12px` |383| fontFamily | `display` |384| fontWeight | `600` |385| hoverHint | `underline` |386 387### Charts388 389| Property | Value |390|----------|-------|391| variant | `stepped` |392| strokeWidth | `2` |393| fillOpacity | `0.1` |394| gridlines | `false` |395| barGap | `0px` |396| highlight | `single` |397| dotMarker | `false` |398 # 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=Space+Grotesk:wght@400;500;700&family=Fraunces:opsz,wght@9..144,400;9..144,500&family=JetBrains+Mono:wght@400&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Space Grotesk"', 'serif'], sans: ['"Fraunces"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#26251e', secondary: '#5a5a52', accent: '#f54e00', neutral: '#f2f1ed', surface: '#ebeae5', }, borderRadius: { sm: '2px', md: '8px', lg: '10px', }, }, },};Fintech-grade clarity on white. Whisper-weight 300 display headlines, deep navy ink, electric violet accents, and signature blue-tinted multi-layer shadows.
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.
A music platform that sounds like late-night radio looks. Deep charcoal surfaces with a faint vertical warmth, Instrument Serif italic for album titles, Inter for everything else, a single burnt-amber accent reserved for the now-playing state. Built for music streaming, label sites, and audio products that want warmth in the dark without leaning on neon.
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.