--- version: alpha name: kiln-studio-design description: "A warm, near-black canvas (#100c09) with cream ink (#f3ede4), terracotta (#c96f4a) and gold (#d9b26a) as the only accents. Fraunces carries display type at weight 700 with real serif warmth; Work Sans carries body copy. The system reads as an editorial creative studio, proud of its work, unhurried in how it shows it." --- ## Brand Positioning Kiln Studio exists for clients who have watched an agency ship a beautiful deck and a mediocre product, or a brilliant product with no story anyone remembers. The studio's bet is that the work and the case for the work are the same discipline: if you can't explain why a decision was right, you probably didn't make it for the right reason. Everything below serves that bet. The site is unhurried on purpose, a case study that opens in a fifth of a second reads like a slide, not like something that was actually built. If a component doesn't help someone read the work slowly, understand a decision, or reach the studio, it doesn't belong here. colors: accent: "#c96f4a" accent-alt: "#d9b26a" ink: "#f3ede4" ink-muted: "#a89685" canvas: "#100c09" surface: "#1a1512" surface-raised: "#221b16" border: "#2b241e" focus-ring: "#d9b26a" ## Logo / Wordmark System The mark is a folded document corner rendered as a small case-study card: a cream-stroked square with its top-right corner cut and lifted, the underside of the fold filled terracotta, and a gold line running along the crease where the fold meets the page. It reads two ways at once, on purpose: a document that's been turned down to mark a page (the case study), and the glow along a fired edge (the kiln). It is not a generic icon, it's the two halves of the brand's name drawn as one shape. ```svg ``` - **Lockup**: mark, then a `0.6rem` gap, then the wordmark "Kiln Studio" set in Fraunces 700, mark always left of the wordmark, never stacked, never reversed. - **Minimum size**: mark not smaller than `20px` square, below that the fold and the crease line stop reading as separate strokes and it collapses into a blob. Wordmark not smaller than `0.9rem`. - **Clearspace**: empty margin equal to the mark's own height (26px at default size) on all sides of the lockup. Nothing docks closer, including the nav's edge padding. - **Don't**: don't fill the whole mark terracotta, the fold's power is that it's mostly a cream outline with one warm corner. Don't drop the gold crease line, without it the shape reads as a plain dog-eared square, not a fired one. Don't rotate or mirror it, the fold is always top-right. Don't use the mark as a bullet or list marker, it means "this is Kiln Studio." ## Color System ### Roles | Role | Token | Value | Used for | |---|---|---|---| | Canvas | `--bg` | `#100c09` | Page background | | Surface | `--panel` | `#1a1512` | Nav, cards, panels, form fields | | Surface raised | `--panel-raised` | `#221b16` | Hover state on a surface, input focus fill | | Border | `--border` | `#2b241e` | Panel edges, dividers, card outlines | | Ink | `--ink` | `#f3ede4` | Primary text | | Ink muted | `--dim` | `#a89685` | Secondary text, meta labels, placeholders | | Make / decide | `--accent` | `#c96f4a` | Primary button fill, links, active states, the "do this" color | | Glow / resolve | `--accent-alt` | `#d9b26a` | Focus ring, success confirmation, pull-quote marks, the fold's crease, the "this landed" color | The two accents are divided by role, not by page: terracotta is what you press, gold is what confirms something happened. That split is why the palette never needs a third color. A studio that's proud of its work doesn't need a whole traffic-light system to say so, it needs one color for "act" and one for "resolved," and both of those are already load-bearing brand colors, not utility colors borrowed for the occasion. ### Contrast (computed from the hex values above via WCAG relative luminance) | Pairing | Ratio | Passes | |---|---|---| | `--ink` text on `--bg` | ~16.7:1 | AAA | | `--dim` text on `--bg` | ~6.8:1 | AA (body text) | | `--accent` text on `--bg` (links, active state) | ~5.4:1 | AA (body text) | | `--accent-alt` text on `--bg` (success, quote marks) | ~9.8:1 | AAA | | `--ink` on `--panel` | ~15.6:1 | AAA | | `--dim` on `--panel` | ~6.4:1 | AA | | `--accent` text on `--panel` | ~5.1:1 | AA | | `--accent-alt` text on `--panel` | ~9.1:1 | AAA | | `--bg` label on `--accent` fill (primary button) | ~5.4:1 | AA | | `--bg` label on `--accent-alt` fill (success badge) | ~9.8:1 | AAA | The rule this table exists to enforce: a button or badge filled with either accent always labels itself in `--bg`, never in `--ink`. Cream-on-terracotta measures under 3.2:1 and cream-on-gold measures under 1.8:1, both fail outright for text of any size. This is the same discipline as the two-accent rule above, apply it without exception. typography: display: fontFamily: Fraunces fontWeight: 700 body: fontFamily: Work Sans fontWeight: 400 ## Type Scale | Token | Size | Weight | Family | Line-height | Letter-spacing | Used for | |---|---|---|---|---|---|---| | `--text-display` | `clamp(2.75rem, 6vw, 5rem)` | 700 | Fraunces | 1.05 | -0.01em | Hero H1 only | | `--text-h2` | `clamp(1.75rem, 3vw, 2.25rem)` | 700 | Fraunces | 1.15 | 0 | Section and article headings | | `--text-h3` | `1.4rem` | 600 | Fraunces | 1.25 | 0 | Case/card titles | | `--text-pull-quote` | `clamp(1.5rem, 2.4vw, 1.9rem)` | 500 italic | Fraunces | 1.4 | 0 | Long-form pull quotes | | `--text-lede` | `1.15rem` | 400 | Work Sans | 1.6 | 0 | Intro/dek paragraphs | | `--text-body` | `1rem` | 400 | Work Sans | 1.7 | 0 | Long-form paragraph copy | | `--text-small` | `0.85rem` | 500 | Work Sans | 1.5 | 0.03em | Meta labels, nav utility, tags, footer, form helper text | Rule for Fraunces vs. Work Sans: Fraunces is reserved for moments meant to be read slowly and felt, the hero, section and article headings, card titles, and pull quotes, anywhere the brand's warmth is the point. Work Sans carries everything meant to be scanned or acted on quickly, body paragraphs, nav labels, button labels, form labels, tags, and captions. If a string is a decision or a fact, it's Work Sans. If it's a statement the brand is standing behind, it's Fraunces. ## Spacing Scale Base unit `8px`. Tokens in use: `--space-2: 0.5rem`, `--space-3: 1rem`, `--space-4: 1.5rem`, `--space-6: 2rem`, `--space-8: 3rem`, `--space-12: 4rem`, `--space-16: 6rem`. The largest token exists specifically for long-form article rhythm, an editorial page needs more air between sections than a product marketing page does. ## Shape Base radius `--radius: 20px` for cards, panels, and the case-study block. Inputs use a tighter `--radius-input: 10px` so form fields read as functional, not decorative. `--radius-pill: 999px` for buttons and the success badge. The one documented exception to a single radius: the case-study card's own radius drops from `24px` to `12px` when it opens, that shift is the liquid-morph mechanism itself, not a break in the shape system, it's the one place where a radius change carries meaning (a card unfolding into a page). ## Iconography No icon library. Two hand-drawn glyphs exist beyond the logo mark, both simple enough to justify drawing by hand: a single-stroke arrow (used on "read the case study" and "view work" links, in `--ink`, shifting to `--accent` on hover) and a small checkmark (used only in the form's success confirmation, in `--accent-alt`). Both are one weight, no fill, matching the mark's own cream-line-plus-one-warm-detail construction. If a future page needs a broader icon set, the fallback is Phosphor (light weight, `1.5` stroke) rather than expanding the hand-drawn set, two glyphs is a deliberate ceiling. ## Motion Principles Two motion moments exist and they have opposite jobs. The film-grain layer is ambient, cursor-driven texture, it should read as the surface the page is printed on, not as an effect happening to the page. It renders on a fixed canvas behind the content, capped at low opacity, and never gets confused with content, it never sits between the reader and text at a strength that would touch contrast. The liquid-morph case-study expansion is the opposite: a single deliberate, felt transition (radius, padding, and content height all animating together over roughly half a second with an eased curve) that stands in for the studio's actual pitch, "we take the time to do this right." Snapping it to instant would delete the point of the interaction. Everything else on the page (buttons, links, inputs, the arrow glyph) uses only `:hover`/`:active`/`:focus-visible` CSS transitions. Nothing scroll-triggers or auto-plays on load. Reduced motion is handled differently for each moment, because they carry different amounts of meaning. The grain is purely decorative texture with zero informational content, so it disables outright under `prefers-reduced-motion: reduce`. The case-study expand is not decorative, so it doesn't disappear, it shortens to a brief cross-fade and scale (roughly 200ms) instead of the full unfold, calmer, but still a visible transition, never a 0ms swap. That's the brand's "never instant" rule and the accessibility baseline's reduced-motion rule resolved together: reduced motion means gentler, not absent. ### Never-list (written before the impeccable-pass rebuild) 1. No centered hero text block sitting alone above the work, the headline pairs with the live case cards in the same first viewport, editorial-spread style, not stacked above them. 2. No two-button CTA row floating free of any card, the primary action sits beside the intro copy, the cards themselves are the "see the work." 3. No decorative photography, unchanged from the brand's existing rule. 4. No third accent color, no drop shadows under any panel. 5. No component wall, this pass touches the hero structure only, the approach/pull-quote section and footer already earned their place. ## Voice & Tone warm, editorial, a little proud. In practice: - **Button label**: "Start a project", not "Let's build something amazing together!" - **Error message**: "That email's not quite right. One more try.", not "Oops! Something went wrong." - **Empty state**: "No related work to show yet.", not "Nothing here! Check back soon." - **Success message**: "Sent. We reply within two business days.", not "Yay! We got your message!" ## Accessibility Baseline - Focus ring: `2px solid var(--accent-alt)`, `2px` offset, applied via `:focus-visible` on every interactive element. Gold rather than terracotta on purpose, at roughly 9.8:1 against the canvas it stays clearly visible even with the grain layer faintly active nearby. - Reduced motion: the grain layer fully disables under `prefers-reduced-motion: reduce`; the liquid morph shortens to a brief cross-fade, it never becomes an instant swap, see Motion Principles above. - Minimum tap target: `44px` in the smallest dimension for every button, link-button, and input on touch viewports. - The grain never drops text contrast: it renders on a `pointer-events: none` canvas fixed behind all content, capped around `0.15` peak opacity via `mix-blend-mode: overlay`, and the palette's weakest body-text pairing (`--dim` on `--bg` at ~6.8:1) stays comfortably above AA even directly under the grain's brightest point. - Color is never the only signal: a flagged form field pairs a terracotta border with an explicit sentence, a confirmed one pairs a gold checkmark glyph with an explicit sentence, neither relies on the border color alone. ## Components ### Navigation Single-line bar, `68px` tall, `--panel` background with a `--border` bottom hairline, sticky to the top. Left: a small "back to gallery" utility link in `--text-small`/`--dim`, then the mark + wordmark lockup. Right: one or two text nav links plus a single primary button ("Start a project"). No dropdown, the studio has three real destinations (home, work, contact) and none of them need a menu. ### Buttons Three variants, one radius (`--radius-pill`), two accents used by role, not by variant: - **Primary**: `--accent` fill, `--bg` label. Used once per view for the real action ("Start a project" / "Send inquiry"). - **Secondary**: transparent fill, `1px solid --border`, `--ink` label. Same-page anchors, "Read the case study." - **Ghost**: text-only, `--dim` label, `--ink` on hover. Tertiary actions like "Back to work." All variants define `:hover` (brightness/border shift), `:active` (`transform: scale(0.98)`), `:disabled` (`opacity: .4`, `pointer-events: none`), and `:focus-visible` (gold outline). Disabled state never relies on color alone, opacity carries it too. ### Forms Label above input, `--text-small`/`--dim`. Input: `--panel` background, `1px solid --border`, `--radius-input`, `--ink` text, `--dim` placeholder (never placeholder-as-label). On `:focus`, border becomes `--accent`, background lifts to `--panel-raised`, and the gold focus ring applies. Helper text sits below in `--text-small`/`--dim`. On error, the border becomes `--accent` at full strength (reused, not a new color) paired with an explicit terracotta helper sentence. On success, the border and helper text switch to `--accent-alt` and the checkmark glyph appears next to the field. ### Cards / panels A flat `.panel`: `--panel` background, `1px solid --border`, `--radius`, no drop shadow, elevation reads through the border and the slightly lighter fill, never a shadow, that flatness matches the studio's print-like, unglossy sensibility. Used for related-work cards and the case-study block. ### Case-study expand (signature interaction) A `.case` card that morphs open on click: radius eases from `24px` to `12px`, padding increases, and the body copy's `max-height` unfolds, all on a single ~500ms eased transition. This is the one component where a shape change (the radius shift) is meaningful rather than decorative. Never shortcut it to an instant state swap, see Motion Principles. The case grid sits beside the intro copy in a two-column editorial spread on the homepage, not below a separate hero, the sticky-positioned copy column stays in view while the cards are read. ### Grain layer (ambient texture) A fixed, `pointer-events: none` canvas rendering a soft cursor-tracked noise field at low opacity via `mix-blend-mode: overlay`. It sits behind all content and never renders over text at a strength that would affect reading, see Accessibility Baseline. ### Editorial article typography Long-form body copy runs at `--text-body` in a measured column (`60-72ch`), with `--text-h2` subheads breaking sections and an occasional `--text-pull-quote` blockquote pulled from the copy, set in italic Fraunces with a single gold quote mark. This is where Work Sans and Fraunces actually alternate in real reading rhythm, not just in a hero. ### Related-work cards Flat panels with a small color-tile header (a low-opacity terracotta or gold gradient over `--panel`, alternated per card so a row of cards has visual variation without adding a new hue), a `--text-h3` title, a one-line description, and an arrow-glyph link. No photography is used anywhere in this system, the typography, the mark, and the grain/morph mechanism carry the visual weight instead, consistent with this gallery's hand-authored, dependency-free page architecture. ### Footer One row: studio name/tagline on the left, real page links on the right (Work, Contact anchor, back to gallery). No invented legal text, no links to pages that don't exist. ## Do's and Don'ts ### Do - Let the grain/cursor effect stay subtle, it should read as texture, not a special effect. - Use Fraunces generously in display contexts, the serif warmth is the brand. - Let case studies feel handled, not clicked, the liquid morph should feel like unfolding paper, not a UI toggle. - Reserve gold (`--accent-alt`) for resolution moments (success, quote marks, focus rings, the mark's crease), never as a button fill, so terracotta stays the single "press this" color. - Give body copy real line-height (1.7) and a measured column width so Work Sans reads like a magazine, not a marketing page. - Use `--bg` as the label color on any accent-filled surface, never `--ink` or white. ### Don't - Don't let the grain effect reduce text contrast below comfortable reading levels. - Don't use more than two accent colors (terracotta + gold) anywhere on the page. - Don't make the case-study expand instant, the liquid morph transition is the point, not a shortcut around it. - Don't invent a third color for error or success states, route them through terracotta (attention) and gold (resolution) instead, always paired with plain-language text. - Don't drop a shadow under any card or panel, elevation here comes from the border and fill, never a shadow. - Don't stack more than one primary (solid terracotta) button in the same view. - Don't separate the headline from the case cards with a full centered hero block, they share the first viewport as an editorial spread. ## Known Constraints - Two routes now exist (studio home, one case-study detail page), still no case-study index/listing page, no docs/pricing pages, no responsive breakpoint table beyond a single-column mobile collapse. The contact form is not wired to anything real, this is a concept demo. No photographic assets are used anywhere, by design, see Related-work cards above.