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: Sora
13  body:    Sora
14  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: 4px
22  md: 12px
23  lg: 24px
24  pill: 1584px
25shadows:
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: #ffffff
34    color: #000000
35    border: none
36    shape: pill
37    padding: 10px 18px
38    font: 500
39    hover: tilt
40  secondary:
41    background: #fbbd41
42    color: #000000
43    border: none
44    shape: pill
45    padding: 10px 18px
46    font: 500
47    hover: tilt
48  outline:
49    background: transparent
50    color: #000000
51    border: 1px solid #717989
52    shape: sharp
53    padding: 8px 14px
54    font: 500
55    hover: tilt
56  ghost:
57    background: transparent
58    color: #000000
59    border: 1px dashed #dad4c8
60    shape: rounded
61    padding: 8px 14px
62    font: 600 / 0.75rem / 1.08px
63    uppercase: true
64charts:
65  variant: "rounded-bars"
66  stroke_width: 2.5
67  fill_opacity: 0.22
68  gridlines: false
69  bar_radius: "8px 8px 0 0"
70  bar_gap: 12px
71  highlight: all
72  dot_marker: true
73  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 Craft
79 
80## AI Build Instructions
81 
82> **Read this section before writing any code.** The rules below
83> are non-negotiable. Every value used in the UI must come from this
84> file's frontmatter — never substitute, approximate, or invent new
85> colors, fonts, radii, or shadows. If a value is missing, ask the
86> user before adding one.
87 
88### 1 · Your role
89 
90You are building UI for a project that has adopted **Kiln Craft** as its
91design system. Treat `DESIGN.md` as the single source of truth.
92Your job is to translate the user's product requirements into
93components and pages that look like they were designed by the same
94person who authored this file.
95 
96### 2 · Token compliance
97 
98- Pull every color, font family, radius, shadow, and spacing value
99  from the frontmatter at the top of this file.
100- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
101  hard-code hex values that bypass the system.
102- When a token can be expressed as a CSS variable, declare it once
103  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 recipes
108 
109Use these recipes verbatim when building the corresponding component.
110 
111#### Buttons
112 
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 tertiary
122actions in toolbars. **Ghost** for inline links and table actions.
123 
124#### Cards
125 
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#### Charts
133 
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 pairings
141 
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 constraints
147 
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 — verify
157 
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. Atmosphere
170 
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 clinical
179- Named swatch palette — Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry
180- Display tracking **-3.2px** at 80px — punchy compression
181- Playful hover: `rotateZ(-8deg)` + `translateY(-80%)` + hard offset shadow
182- Generous radii: **24px** cards, **40px** sections, **1584px** pills
183- Mixed solid + dashed borders
184- Multi-layer **pressed-clay shadow** with inset highlight
185- Uppercase labels with +1.08px tracking — wayfinding system
186 
187## 2. Palette
188 
189### Surface
190- **Warm Cream** `#faf9f7` — page background
191- **Pure White** `#ffffff` — cards, button surfaces
192- **Clay Black** `#000000` — text, headings
193 
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 & Neutrals
203- Oat Border `#dad4c8` · Oat Light `#eee9df` · Cool Border `#e6e8ec`
204- Warm Silver `#9f9b93` · Warm Charcoal `#55534e` · Dark Charcoal `#333333`
205 
206### Shadows
207- **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. Typography
211 
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. Buttons
230 
231### Primary (with playful hover)
232```css
233background: 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 Solid
240- White background, black text, pill radius
241- Hover: oat-200 swatch + animated rotation
242 
243### Ghost Outlined
244- 1px solid `#717989`, 4px radius
245- Hover: pomegranate swatch + white text
246 
247## 5. Cards
248- White on cream canvas
249- Border: `1px solid #dad4c8` or `1px dashed #dad4c8`
250- Radius: 12 / 24 / 40px
251- Shadow: pressed-clay multi-layer
252 
253## 6. Charts
254**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. Spacing
257- Base 8px
258- Scale: `1, 2, 4, 6.4, 8, 12, 12.8, 16, 18, 20, 24`
259 
260## 8. Depth & elevation
261 
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'ts
272 
273✅ **Do**
274- Use warm cream (`#faf9f7`) — the warmth is the identity
275- Use named swatches for full sections — Matcha, Slushie, Lemon, Ube
276- Apply playful hover: `rotateZ(-8deg)` + `translateY(-80%)` + hard shadow
277- Use warm oat borders (`#dad4c8`) — never neutral gray
278- Mix solid + dashed borders
279- Use generous radius: 24px cards, 40px sections
280- Three weights only: 600 / 500 / 400
281 
282❌ **Don't**
283- Use cool gray backgrounds — warm cream is non-negotiable
284- Use neutral gray borders (`#ccc`, `#ddd`)
285- Mix more than 2 swatches in one section
286- Use subtle hover effects — rotation + hard shadow is signature
287- Use small radius (<12px) on feature cards
288- Use blur-only shadows — Kiln uses multi-layer + inset
289- Forget uppercase labels with +1.08px tracking — wayfinding
290 
291---
292 
293## Tokens
294 
295> Generated from the same source the live preview renders from.
296> Treat the values below as the contract — never substitute approximations.
297 
298### Colors
299 
300| Role      | Value |
301|-----------|-------|
302| primary   | `#000000` |
303| secondary | `#9f9b93` |
304| tertiary  | `#fbbd41` |
305| neutral   | `#faf9f7` |
306| surface   | `#ffffff` |
307 
308### Typography
309 
310- **Display:** Sora
311- **Body:** Sora
312- **Mono:** Space Mono
313 
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### Radius
322 
323- sm: `4px`
324- md: `12px`
325- lg: `24px`
326- pill: `1584px`
327 
328### Shadows
329 
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### Borders
334 
335- **card:** `1px solid #dad4c8`
336- **divider:** `#dad4c8`
337 
338### Buttons
339 
340Four variants, each fully tokenized. The preview renders from these exact values.
341 
342#### Primary
343 
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#### Secondary
355 
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#### Outline
367 
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#### Ghost
379 
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### Charts
393 
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 
406---
407 
408## Pro tokens
409 
410> Production-fidelity tokens. States, density, motion, elevation,
411> content rules and a measured WCAG contract — derived from the
412> resting tokens unless explicitly authored.
413 
414### States
415 
416#### Button
417 
418- **hover** — bg: `rgba(251, 189, 65, 0.92)`, shadow: `0 4px 20px -8px rgba(251, 189, 65, 0.4)`
419- **focus** — outline: `1.5px solid #fbbd41`, outline-offset: `4px`
420- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
421- **disabled** — opacity: `0.45`
422- **loading** — opacity: `0.7`
423- **selected** — bg: `#000000`, color: `#ffffff`
424 
425#### Input
426 
427- **hover** — border: `1px solid #000000`
428- **focus** — border: `1px solid #fbbd41`, shadow: `0 1px 0 0 #fbbd41`
429- **disabled** — opacity: `0.45`
430- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
431 
432#### Card
433 
434- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
435- **selected** — border: `1px solid #000000`
436 
437#### Tab
438 
439- **hover** — color: `#000000`
440- **focus** — outline: `1.5px solid #fbbd41`, outline-offset: `3px`
441- **selected** — color: `#fbbd41`, border: `0 0 2px 0 solid #fbbd41`
442 
443### Density
444 
445| Mode | padding × | row × | body | radius × | Use for |
446|------|-----------|-------|------|----------|---------|
447| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
448| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
449| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
450 
451### Motion
452 
453**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
454 
455```css
456transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
457```
458 
459| Token | Value |
460|-------|-------|
461| duration.instant | `80ms` |
462| duration.fast | `180ms` |
463| duration.base | `320ms` |
464| duration.slow | `500ms` |
465| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
466| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
467| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
468| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
469 
470### Elevation
471 
472Five-level scale, system-specific recipe.
473 
474| Level | Shadow | Recipe |
475|-------|--------|--------|
476| level0 | `none` | Hairline only — typical editorial resting state. |
477| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
478| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
479| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
480| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
481 
482### Content
483 
484- **measure:** `60ch` (max line length for body prose)
485- **paragraph spacing:** `1.5em`
486- **list indent:** `1.75em`
487- **list gap:** `0.55em`
488- **link:** color `#fbbd41`, underline `always`
489- **blockquote:** border `4px solid #fbbd41`, padding `0.4em 0 0.4em 1.5em`
490- **code:** background `rgba(0, 0, 0, 0.06)`, color `#000000`
491 
492### Accessibility (WCAG 2.1)
493 
494**Overall:** FAIL
495 
496| Pair | Ratio | Required | Grade | Suggested fix |
497|------|-------|----------|-------|---------------|
498| Body text on surface | 21:1 | AA | AAA | — |
499| Body text on canvas | 19.96:1 | AA | AAA | — |
500| Muted text on surface | 2.77:1 | AA | FAIL | `#77726a` → 4.77:1 (AA) |
501| Accent on surface | 1.69:1 | AA-Large | FAIL | `#a06c03` → 4.52:1 (AA) |
502| Accent on canvas | 1.6:1 | AA-Large | FAIL | `#966503` → 4.8:1 (AA) |
503