Warm cream canvas with named swatch palette (matcha, lemon, ube, slushie). Display at -3.2px tracking, generous radii, multi-layer pressed-clay shadow.
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: "Kiln Craft"3description: "Warm cream canvas with named swatch palette (matcha, lemon, ube, slushie). Display at -3.2px tracking, generous radii, multi-layer pressed-clay shadow."4tags: [b2b, playful, warm, editorial]5colors:6 primary: "#000000"7 secondary: "#9f9b93"8 tertiary: "#fbbd41"9 neutral: "#faf9f7"10 surface: "#ffffff"11typography:12 display: Sora13 body: Sora14 mono: "Space Mono"15 scale:16 hero: "5rem / 1 / 600 / -3.2px"17 h1: "3.75rem / 1 / 600 / -2.4px"18 h2: "2.75rem / 1.1 / 600 / -1.32px"19 body: "1.125rem / 1.6 / 400 / -0.36px"20radius:21 sm: 4px22 md: 12px23 lg: 24px24 pill: 1584px25shadows:26 card: "rgba(0,0,0,0.1) 0 1px 1px, rgba(0,0,0,0.04) 0 -1px 1px inset, rgba(0,0,0,0.05) 0 -0.5px 1px"27 button: "rgb(0,0,0) -7px 7px"28borders:29 card: "1px solid #dad4c8"30 divider: "#dad4c8"31buttons:32 primary:33 background: #ffffff34 color: #00000035 border: none36 shape: pill37 padding: 10px 18px38 font: 50039 hover: tilt40 secondary:41 background: #fbbd4142 color: #00000043 border: none44 shape: pill45 padding: 10px 18px46 font: 50047 hover: tilt48 outline:49 background: transparent50 color: #00000051 border: 1px solid #71798952 shape: sharp53 padding: 8px 14px54 font: 50055 hover: tilt56 ghost:57 background: transparent58 color: #00000059 border: 1px dashed #dad4c860 shape: rounded61 padding: 8px 14px62 font: 600 / 0.75rem / 1.08px63 uppercase: true64charts:65 variant: "rounded-bars"66 stroke_width: 2.567 fill_opacity: 0.2268 gridlines: false69 bar_radius: "8px 8px 0 0"70 bar_gap: 12px71 highlight: all72 dot_marker: true73 palette: ["#84e7a5", "#3bd3fd", "#fbbd41", "#fc7981", "#c1b0ff", "#01418d", "#078a52"]74fonts_url: "https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap"75dependencies: ["lucide-react"]76---77 78# Kiln Craft79 80## AI Build Instructions81 82> **Read this section before writing any code.** The rules below83> are non-negotiable. Every value used in the UI must come from this84> file's frontmatter — never substitute, approximate, or invent new85> colors, fonts, radii, or shadows. If a value is missing, ask the86> user before adding one.87 88### 1 · Your role89 90You are building UI for a project that has adopted **Kiln Craft** as its91design system. Treat `DESIGN.md` as the single source of truth.92Your job is to translate the user's product requirements into93components and pages that look like they were designed by the same94person who authored this file.95 96### 2 · Token compliance97 98- Pull every color, font family, radius, shadow, and spacing value99 from the frontmatter at the top of this file.100- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never101 hard-code hex values that bypass the system.102- When a token can be expressed as a CSS variable, declare it once103 in your global stylesheet and reference it everywhere downstream.104- The Google Fonts `<link>` is provided in the Typography section.105 Add it to `<head>` before any component renders.106 107### 3 · Component recipes108 109Use these recipes verbatim when building the corresponding component.110 111#### Buttons112 113Four variants are defined. Pick one — never blend variants or invent a fifth.114 115- **Primary** — pill shape, bg `#ffffff`, text `#000000`, padding `10px 18px`, weight `500`.116- **Secondary** — pill shape, bg `#fbbd41`, text `#000000`, padding `10px 18px`, weight `500`.117- **Outline** — sharp shape, text `#000000`, border `1px solid #717989`, padding `8px 14px`, weight `500`.118- **Ghost** — rounded shape, text `#000000`, border `1px dashed #dad4c8`, padding `8px 14px`, weight `600`, uppercased.119 120Reach for **primary** as the single dominant CTA per screen.121**Secondary** for the supporting action. **Outline** for tertiary122actions in toolbars. **Ghost** for inline links and table actions.123 124#### Cards125 126- Background: `#ffffff`127- Border: `1px solid #dad4c8`128- Shadow: `rgba(0,0,0,0.1) 0 1px 1px, rgba(0,0,0,0.04) 0 -1px 1px inset, rgba(0,0,0,0.05) 0 -0.5px 1px`129- Radius: `radius.lg` (`24px`)130- Internal padding: `20px` for compact cards, `24–28px` for content cards.131 132#### Charts133 134- Bar/line variant: `rounded-bars`135- Bar radius: `8px 8px 0 0`136- No gridlines — let the bars/lines carry the data.137- Highlight strategy: `all` — emphasize a single bar/point per chart.138- Use the declared palette in order: `#84e7a5`, `#3bd3fd`, `#fbbd41`, `#fc7981`, `#c1b0ff`, `#01418d`, `#078a52`.139 140#### Typography pairings141 142- **Display (`Sora`)** — h1, h2, hero headlines, brand wordmarks.143- **Body (`Sora`)** — paragraphs, labels, button text, form inputs.144- **Mono (`Space 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 171Kiln Craft is a warm, playful celebration of color that treats B2B software like a craft rather than an enterprise chore. The foundation is a **warm cream** background (`#faf9f7`) with **oat-toned borders** (`#dad4c8`, `#eee9df`) — every surface has the tactile quality of handmade paper. Against this artisanal canvas, a vivid named-swatch palette explodes: **Matcha** green, **Slushie** cyan, **Lemon** gold, **Ube** purple, **Pomegranate** pink, **Blueberry** navy, **Dragonfruit** magenta — each named like a juice-bar flavor, not an enterprise color token.172 173The typography is anchored by a geometric sans loaded with **OpenType stylistic sets** that give the text a quirky, slightly off-kilter personality. At display scale (80px, weight 600), it uses aggressive **-3.2px** negative tracking that compresses headlines into punchy, billboard-like statements. A monospace companion (Space Mono) handles code and technical labels — craft meets tech.174 175What makes Kiln Craft truly distinctive is its **playful hover micro-animations**: buttons rotate slightly (`rotateZ(-8deg)`), translate upward (`translateY(-80%)`), shift to a contrasting swatch color, and cast a **hard offset shadow** (`rgb(0,0,0) -7px 7px`) — a button literally tilts and jumps on interaction. Combined with generous radii (24px–40px), mixed solid + dashed borders, and a **multi-layer "pressed into clay" shadow** (downward + inset + edge), the whole system feels made by people who genuinely enjoy making things.176 177**Signature moves**178- Warm cream canvas (`#faf9f7`) with oat borders — artisanal, not clinical179- Named swatch palette — Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry180- Display tracking **-3.2px** at 80px — punchy compression181- Playful hover: `rotateZ(-8deg)` + `translateY(-80%)` + hard offset shadow182- Generous radii: **24px** cards, **40px** sections, **1584px** pills183- Mixed solid + dashed borders184- Multi-layer **pressed-clay shadow** with inset highlight185- Uppercase labels with +1.08px tracking — wayfinding system186 187## 2. Palette188 189### Surface190- **Warm Cream** `#faf9f7` — page background191- **Pure White** `#ffffff` — cards, button surfaces192- **Clay Black** `#000000` — text, headings193 194### Swatches (named)195- Matcha `#84e7a5` / `#078a52` / `#02492a`196- Slushie `#3bd3fd` / `#0089ad`197- Lemon `#f8cc65` / `#fbbd41` / `#d08a11` / `#9d6a09`198- Ube `#c1b0ff` / `#43089f` / `#32037d`199- Pomegranate `#fc7981`200- Blueberry `#01418d`201 202### Borders & Neutrals203- Oat Border `#dad4c8` · Oat Light `#eee9df` · Cool Border `#e6e8ec`204- Warm Silver `#9f9b93` · Warm Charcoal `#55534e` · Dark Charcoal `#333333`205 206### Shadows207- **Clay Shadow** `rgba(0,0,0,0.1) 0 1px 1px, rgba(0,0,0,0.04) 0 -1px 1px inset, rgba(0,0,0,0.05) 0 -0.5px 1px`208- **Hard Offset** (hover) `rgb(0,0,0) -7px 7px`209 210## 3. Typography211 212| Role | Size | Weight | Leading | Tracking |213|------|------|--------|---------|----------|214| Display Hero | 80px | 600 | 1.00 | -3.2px |215| Display 2 | 60px | 600 | 1.00 | -2.4px |216| Section | 44px | 600 | 1.10 | -1.32px |217| Card Heading | 32px | 600 | 1.10 | -0.64px |218| Feature | 20px | 600 | 1.40 | -0.4px |219| Body Large | 20px | 400 | 1.40 | 0 |220| Body | 18px | 400 | 1.60 | -0.36px |221| Body Standard | 16px | 400 | 1.50 | 0 |222| Button | 16px | 500 | 1.50 | -0.16px |223| Nav | 15px | 500 | 1.60 | 0 |224| Caption | 14px | 400 | 1.50–1.60 | -0.14px |225| Uppercase Label | 12px | 600 | 1.20 | **+1.08px** UPPERCASE |226 227**Three weights, strict roles.** 600 (headings), 500 (UI), 400 (body). Aggressive negative tracking on display, generous body leading.228 229## 4. Buttons230 231### Primary (with playful hover)232```css233background: transparent;234color: #000;235padding: 6.4px 12.8px;236```237Hover: background → swatch color, text white, `rotateZ(-8deg) translateY(-80%)`, hard shadow `rgb(0,0,0) -7px 7px`.238 239### White Solid240- White background, black text, pill radius241- Hover: oat-200 swatch + animated rotation242 243### Ghost Outlined244- 1px solid `#717989`, 4px radius245- Hover: pomegranate swatch + white text246 247## 5. Cards248- White on cream canvas249- Border: `1px solid #dad4c8` or `1px dashed #dad4c8`250- Radius: 12 / 24 / 40px251- Shadow: pressed-clay multi-layer252 253## 6. Charts254**Multi-color swatch bars** — every bar a different swatch (Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry, Matcha-deep). The chart reads like a juice-bar flavor menu rather than a data grid. Rounded bar tops (8px), no gridlines, generous gap.255 256## 7. Spacing257- Base 8px258- Scale: `1, 2, 4, 6.4, 8, 12, 12.8, 16, 18, 20, 24`259 260## 8. Depth & elevation261 262| Level | Treatment | Use |263|-------|-----------|-----|264| 0 | Flat cream | Page |265| 1 | Clay Shadow (3-layer) | Cards, buttons |266| 2 | Hard Offset `-7px 7px` | Hover state |267| 3 | `rgb(20,110,245) solid 2px` | Focus |268 269**Pressed into clay.** Elements feel both raised AND embedded — a clay tablet where content is stamped. The hover hard shadow is deliberately retro-graphic.270 271## 9. Do's & don'ts272 273✅ **Do**274- Use warm cream (`#faf9f7`) — the warmth is the identity275- Use named swatches for full sections — Matcha, Slushie, Lemon, Ube276- Apply playful hover: `rotateZ(-8deg)` + `translateY(-80%)` + hard shadow277- Use warm oat borders (`#dad4c8`) — never neutral gray278- Mix solid + dashed borders279- Use generous radius: 24px cards, 40px sections280- Three weights only: 600 / 500 / 400281 282❌ **Don't**283- Use cool gray backgrounds — warm cream is non-negotiable284- Use neutral gray borders (`#ccc`, `#ddd`)285- Mix more than 2 swatches in one section286- Use subtle hover effects — rotation + hard shadow is signature287- Use small radius (<12px) on feature cards288- Use blur-only shadows — Kiln uses multi-layer + inset289- Forget uppercase labels with +1.08px tracking — wayfinding290 291---292 293## Tokens294 295> Generated from the same source the live preview renders from.296> Treat the values below as the contract — never substitute approximations.297 298### Colors299 300| Role | Value |301|-----------|-------|302| primary | `#000000` |303| secondary | `#9f9b93` |304| tertiary | `#fbbd41` |305| neutral | `#faf9f7` |306| surface | `#ffffff` |307 308### Typography309 310- **Display:** Sora311- **Body:** Sora312- **Mono:** Space Mono313 314| Role | size / leading / weight / tracking |315|------|------------------------------------|316| Hero | 5rem / 1 / 600 / -3.2px |317| H1 | 3.75rem / 1 / 600 / -2.4px |318| H2 | 2.75rem / 1.1 / 600 / -1.32px |319| Body | 1.125rem / 1.6 / 400 / -0.36px |320 321### Radius322 323- sm: `4px`324- md: `12px`325- lg: `24px`326- pill: `1584px`327 328### Shadows329 330- **card:** `rgba(0,0,0,0.1) 0 1px 1px, rgba(0,0,0,0.04) 0 -1px 1px inset, rgba(0,0,0,0.05) 0 -0.5px 1px`331- **button:** `rgb(0,0,0) -7px 7px`332 333### Borders334 335- **card:** `1px solid #dad4c8`336- **divider:** `#dad4c8`337 338### Buttons339 340Four variants, each fully tokenized. The preview renders from these exact values.341 342#### Primary343 344| Property | Value |345|----------|-------|346| shape | `pill` |347| background | `#ffffff` |348| color | `#000000` |349| border | `none` |350| padding | `10px 18px` |351| fontWeight | `500` |352| hoverHint | `tilt` |353 354#### Secondary355 356| Property | Value |357|----------|-------|358| shape | `pill` |359| background | `#fbbd41` |360| color | `#000000` |361| border | `none` |362| padding | `10px 18px` |363| fontWeight | `500` |364| hoverHint | `tilt` |365 366#### Outline367 368| Property | Value |369|----------|-------|370| shape | `sharp` |371| background | `transparent` |372| color | `#000000` |373| border | `1px solid #717989` |374| padding | `8px 14px` |375| fontWeight | `500` |376| hoverHint | `tilt` |377 378#### Ghost379 380| Property | Value |381|----------|-------|382| shape | `rounded` |383| background | `transparent` |384| color | `#000000` |385| border | `1px dashed #dad4c8` |386| padding | `8px 14px` |387| fontWeight | `600` |388| fontSize | `0.75rem` |389| tracking | `1.08px` |390| uppercase | `true` |391 392### Charts393 394| Property | Value |395|----------|-------|396| variant | `rounded-bars` |397| strokeWidth | `2.5` |398| fillOpacity | `0.22` |399| gridlines | `false` |400| barRadius | `8px 8px 0 0` |401| barGap | `12px` |402| highlight | `all` |403| dotMarker | `true` |404| palette | `#84e7a5`, `#3bd3fd`, `#fbbd41`, `#fc7981`, `#c1b0ff`, `#01418d`, `#078a52` |405 # 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=Sora:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Sora"', 'serif'], sans: ['"Sora"', 'sans-serif'], mono: ['"Space Mono"', 'monospace'], }, colors: { primary: '#000000', secondary: '#9f9b93', accent: '#fbbd41', neutral: '#faf9f7', surface: '#ffffff', }, borderRadius: { sm: '4px', md: '12px', lg: '24px', }, }, },};A slow conic gradient sweeps behind the page through desaturated lavender, sage, peach at ~22% chroma — soft prismatic light, never rainbow. Pure white cards on top, ink text, hairlines.
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 studio interface built around real glassmorphism — frosted backdrop-blur cards floating over a soft tonal lavender-bone backdrop. Plus Jakarta Sans for UI, Spectral italic for accent display, a single indigo reserved for the active panel ring and the primary CTA. Built for creative studios, design tools, and product surfaces where the glass IS the interface chrome.
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.