Back to the demo · Direction blocks · the file exactly as written during the run.
# Approved directions · Kilnward (demo)
Demo run: drafted and approved by Claude on the user's instruction. All fonts are open-licensed Google Fonts.
--- DIRECTION 1 (v1) - Shelf & Glaze ---
Source group: Warm craft (dribbble-26072334, 26305008, 27319220, 21082197, 27334918, 27822995)
Thesis: The studio's week is a shelf of pieces waiting their turn; the page is as unhurried as a well-kept studio.
Feel: earthy, tactile, quiet, generous
Type: Instrument Serif for display (very large, 96–140px hero, tight leading), Hanken Grotesk for text (16–18px, 400/500). No mono.
Palette: bisque ground #F3EEE6, raw-clay surface #E7DFD3, ink #2B2622, muted ink #6B625A, one accent: celadon glaze #4F7563 (CTA, focus, links only).
Density and rhythm: very generous; sections 160px apart on desktop; text measure ≤ 60ch; few elements per screen.
Signature move: product data (a firing, a booking, a member's shelf) sits on drawn shelf lines, like greenware waiting for the kiln: thin horizontal shelf rules with items resting on them.
Image placement: hero right, <img> 4:5 portrait, top-aligned with the headline: a glazed bowl on a studio shelf in raking window light. One more 3:2 <img> mid-page beside the shelves section: hands trimming a pot on a wheel.
Must not: no technical grid or mono labels (Direction 3), no magazine masthead or issue numbering (Direction 2), no spot-colour overprint (Direction 4), no tool floating over a full-bleed scene (Direction 5).
--- DIRECTION 2 (v2) - The Studio Journal ---
Source group: Editorial serif (dribbble-10732025, 11077852, 27040237, 27643168, 27526054, 27578509)
Thesis: Kilnward introduces itself like an issue of a studio's own journal: one well-told week, in columns.
Feel: literate, paper, composed, still
Type: Bodoni Moda for display (high contrast, 80–120px, italic for emphasis), Newsreader for text (18–19px body, generous leading), small caps for labels and section kickers.
Palette: paper #F7F4EC, ink #161412, rule grey #CFC8BA, one accent: oxblood #8B2E23 (CTA, drop cap, rules that matter).
Density and rhythm: magazine pacing: a masthead, a lead story, then two- and three-column spreads with hairline rules between columns.
Signature move: the page is set as "Issue 07 · A firing week": masthead with issue line and date, a drop cap on the lead paragraph, and a printed table of contents whose entries jump to the sections.
Image placement: below the masthead, full content width, <img> 3:2: the inside of a kiln mid-load, shelves and posts. One 4:5 <img> inside a spread column: a studio member reading the firing board.
Must not: no grotesk display type, no shelf drawings (Direction 1), no grid ticks or mono data labels (Direction 3), no bright spot colours (Direction 4), no full-bleed hero (Direction 5).
--- DIRECTION 3 (v3) - Kiln Log ---
Source group: Swiss technical (dribbble-27407460, 24670149, 25700671, 27644424, 26932333)
Thesis: A firing is a precise, logged event; Kilnward is the log, and the page reads like a well-made technical sheet.
Feel: exact, calm, gridded, annotated
Type: Archivo for display (condensed widths, 64–104px, 600) and text (16px), JetBrains Mono for every label, coordinate, timestamp and number.
Palette: sheet white #FAFAF8, ink #121212, grid line #DADAD5, muted #6E6E68, one accent: kiln signal orange #D9480F (CTA, the live firing curve, active states).
Density and rhythm: 12-column visible grid with hairline cell borders; tight, information-dense; numbered sections (01–06) in the margin.
Signature move: the hero is a firing curve (temperature over twelve hours, drawn as inline SVG data with ruler ticks, cone markers and timestamps in the margin), labelled as sample data.
Image placement: one 1:1 <img> in a spec cell beside the curve: a cone pack after firing, cones bent. One 16:9 <img> spanning 6 columns in the kiln section: three kilns side by side.
Must not: no serif display (Directions 1, 2), no drawn shelves (Direction 1), no overprint or halftone (Direction 4), no full-bleed scene (Direction 5), no rounded cards.
--- DIRECTION 4 (v4) - Studio Noticeboard ---
Source group: Risograph print (dribbble-27741984, 17215562, 27622706, 24287867, 24501559)
Thesis: Every studio already runs on its noticeboard; Kilnward is that board, printed properly.
Feel: inky, communal, flat, lively
Type: Bricolage Grotesque for display (wide, heavy, 88–150px), DM Mono for text details and timetables, Bricolage Grotesque 400 for body.
Palette: newsprint #F2EFE6, ink #1C1B1A, one accent family: riso red-orange #E5482F with its 30% tint #F6BFB3 used as the overprint second tone.
Density and rhythm: poster-sized blocks, each section a "flyer" with its own composition; tight inside, loose between.
Signature move: sections are pinned flyers with a deliberate 2–3px misregistration between the red layer and the ink layer, and the class timetable is set as a printed flyer with tear-off tabs ("Start free trial" on each tab).
Image placement: hero flyer, <img> 3:4: hands centring clay on a wheel, to be printed as a two-tone halftone. One 1:1 <img> on the members flyer: a row of labelled member shelves.
Must not: no serif type (Directions 1, 2), no hairline grid or mono coordinate marginalia (Direction 3), no full-bleed scene (Direction 5), no gradients.
--- DIRECTION 5 (v5) - Open Studio ---
Source group: Booking over photo (dribbble-27695272, 27780891, 25282243, 27033640)
Thesis: The fastest proof is the tool itself: a studio owner books a class and plans a kiln load in the first screen.
Feel: practical, warm, immediate, confident
Type: Familjen Grotesk for display (56–88px, 600) and UI, Literata for longer text (17px).
Palette: night clay #1F1A17 (scene stand-in and dark bands), surface #FBF8F3, ink #1F1A17, muted #776D64, one accent: kiln amber #C77A12 (CTA, selected slots, focus).
Density and rhythm: a full-viewport hero; below it, alternating light and dark bands, each with one working UI panel and short copy.
Signature move: a working booking panel floats over the full-bleed hero: pick a day, see open-studio slots and kiln capacity fill as you choose (sample data, keyboard operable), with "Start free trial" inside the panel.
Image placement: hero background, full-bleed 16:9 (cover, centred bottom): the studio at dusk with wheels and shelves in warm light. One 4:3 <img> in the kiln band: a kiln being unloaded.
Must not: no serif display (Directions 1, 2), no grid ticks or mono marginalia (Direction 3), no overprint (Direction 4), no drawn shelves (Direction 1).