---
version: alpha
name: Kiln Clay
description: A mid-tone clay page where cards are darker than the paper, plus a plum that looks like it was fired on.
meta:
  id: "theme-kiln-clay"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T21:39:00+09:00"
  updatedAt: "2026-09-02T16:52:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: The page is clay, and the cards are pressed into it
  bestFor: Craft marketplaces, food and drink, small-batch commerce, workshops and classes
  avoidFor: Dense dashboards, developer tools, anything with heavy tables
  defaultMode: light
  surfaceStyle: filled
  accentUse: bar
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: warm
  motion:
    intensity: 3
    duration: 200ms
    ease: "cubic-bezier(0.16, 1, 0.3, 1)"
    signature: "Tonal fills deepen. Nothing moves position and nothing lifts."
  displayFont: Fraunces
  displayKind: serif
  bodyFont: Karla
  monoFont: Space Mono
colors:
  background: "#DFD2C4"
  foreground: "#000000"
  card: "#D2C6B9"
  card-foreground: "#000000"
  popover: "#D2C6B9"
  popover-foreground: "#000000"
  primary: "#8A1E66"
  primary-foreground: "#FFF9F2"
  secondary: "#C7B8A7"
  secondary-foreground: "#000000"
  muted: "#C7B8A7"
  muted-foreground: "#5A4538"
  accent: "#7B5100"
  accent-foreground: "#FFF9F2"
  destructive: "#9B1014"
  destructive-foreground: "#FFF9F2"
  border: "#BBAD9E"
  input: "#BBAD9E"
  ring: "#8A1E66"
  chart-1: "#92346F"
  chart-2: "#007755"
  chart-3: "#932744"
  chart-4: "#007D73"
  chart-5: "#742B79"
colorsDark:
  background: "#21150E"
  foreground: "#F4E3D7"
  card: "#2A2019"
  card-foreground: "#F4E3D7"
  popover: "#2A2019"
  popover-foreground: "#F4E3D7"
  primary: "#E57BBA"
  primary-foreground: "#170902"
  secondary: "#382A20"
  secondary-foreground: "#F4E3D7"
  muted: "#382A20"
  muted-foreground: "#A69184"
  accent: "#DAA75D"
  accent-foreground: "#170902"
  destructive: "#FD7468"
  destructive-foreground: "#170902"
  border: "#45382F"
  input: "#45382F"
  ring: "#E57BBA"
  chart-1: "#DF80B8"
  chart-2: "#28B586"
  chart-3: "#F5879B"
  chart-4: "#00A99C"
  chart-5: "#DF95E3"
typography:
  display-lg:
    fontFamily: Fraunces
    fontSize: 58px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: Fraunces
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Fraunces
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Karla
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Karla
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: Karla
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Karla
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.14em
  label-mono:
    fontFamily: Space Mono
    fontSize: 12.5px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: Space Mono
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 3px
  md: 6px
  lg: 10px
  xl: 14px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 26px
  xl: 54px
  gutter: 22px
  margin: 32px
  measure: 68ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.md}"
    padding: 12px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 12px
  card-article:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 22px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Kiln Clay

## Overview

Kiln Clay inverts the usual arrangement. The page is a warm mid-tone clay at
about 87% lightness, and every surface on it — cards, inputs, table rows —
is *darker* than the page rather than lighter. Depth is a tonal fill going down
into the clay, which is why nothing in this theme has a shadow and nothing
floats.

The type pairs a soft-serif display with a workhorse grotesque, and the accent
appears as a short bar attached to the left edge of whatever it is qualifying.
The one saturated colour is a fired plum.

Personality: handmade, warm, a little rustic, but not folksy.

## Colors

Clay, plum, ochre.

- **Ground (#DFD2C4):** Mid-tone clay. This is the brightest surface in the
  system; nothing is allowed to be lighter than it.
- **Primary (#8A1E66):** Fired plum. Buttons, prices that are active, the
  "chosen" state.
- **Accent (#7B5100):** Ochre. Appears as a 3px bar down the left edge of a
  featured item, and as the second chart series. Never as a button.
- **Cards:** one tonal step down from the clay, with a hairline border a further
  step down. Two nested cards need two steps; three is too many, so do not nest
  three deep.
- Charts are duotone — plum and ochre and the space between them. The system has
  two opinions, not five.

## Typography

Fraunces for names, Karla for everything else, Space Mono for quantities and
prices.

- **Display:** Fraunces at 58px. Its softness is the point — a hard didone on
  clay would look like a mistake.
- **Body:** Karla at 16.5px, 1.58 line height, 68ch measure.
- **Labels:** Karla 11px uppercase with 0.14em tracking, in muted-foreground.
  Labels are the only uppercase in the system.
- **Prices and weights:** Space Mono. Its slight oddness suits a hand-priced
  object better than a neutral mono does.

## Layout

A 12-column grid at 1180px with 22px gutters. Product and item grids run three
up at 4 columns each, and the featured item takes 8 with its image bleeding to
the left margin.

Vertical rhythm is 4px. Sections are separated by 54px of clay and an ochre bar,
never by a rule across the full width.

## Elevation & Depth

Depth goes downward. Each level is a tonal step darker than its parent, and the
maximum useful depth is two steps: page, card, and the field inside the card.
Nothing has a shadow. Nothing lifts on hover — a hover deepens the fill by one
half-step instead.

## Shapes

Gently rounded: 10px on cards, 6px on buttons and inputs, 3px on badges. The
softness matches the ceramic idea without becoming a bubble.

Images are cropped to the card radius, warm-graded, and are allowed to bleed off
the left or right margin — the only element permitted to leave the grid.

## Components

- **Buttons:** solid plum, warm-white text, 6px radius, 12px padding. Hover
  darkens the fill.
- **Cards:** one tonal step down from the clay, hairline border, 22px padding,
  the ochre bar on the left edge if the item is featured.
- **Prices:** Space Mono, same size as the item name, aligned right.
- **Inputs:** filled one step down, hairline border, plum focus ring.
- **Badges:** uppercase Karla on the secondary fill, 3px radius.

## Do's and Don'ts

- Do make every surface darker than the page.
- Do use the ochre bar to mark exactly one item per view.
- Do let images bleed past the margin.
- Don't add a shadow — there is no light source in this system.
- Don't introduce a white or near-white surface.
- Don't nest more than two tonal steps deep; the third is unreadable.
- Don't uppercase a heading. Only labels.