Bisque

# Bisque

## Philosophy

Bisque is studio software for potters where only the controls are clay. The page is white paper with full-bleed plates of the real work: the shelf of pieces waiting to fire, the dip-test tiles. Above that content sits a thin clay control layer holding exactly one raised button and one hollow field. Importance is height, editing is a hollow, and celadon glaze pools only where something is live.

### Values

- Clay only where a thumb goes: one raised button and one hollow field per page.
- Depth is spent, not sprayed: the press is the one physical verb.
- The irreversible action is a hold you commit to; its depth shows how far you are.
- Celadon marks what is live; ember marks a temperature; nothing else takes colour.
- The work carries the page: real pieces, a real kiln schedule, a real dip test.

### Anti-Values

- The same neumorphic shadow pair on every element.
- Insets on every input, tab and slider.
- Filled pills, status beads and metric tiles with sparklines.
- Grain laid over the whole field.
- Mood words in place of the rule the page follows.
- Warm beige page grounds.

### Visual Character

- A pure white page; clay #EFE3D6 appears only in the pictured work and in the control layer.
- One raised capsule button lit from the top left and one scooped capsule well, clustered at the edge of the hero.
- Hold to fire: the button sinks flush, becomes a hollow that keeps a thumbprint, and celadon pools in the dent.
- A celadon wash #CFE9E3 highlighter on every label that is live: tonight's pieces, tonight's row, the chosen dip time.
- Hahmlet for the masthead, heads and one light big number; Hanken Grotesk for everything else.
- Titles on the plates set in tight umber ink press blocks, line by line.
- Flat reading bands: shelf labels under each piece, a kiln schedule drawn as a clay-filled curve, a plain log on alternate wash rows.

### Lineage

> Generation 3 of Bisque, revised in place from arni's approved range take (bisque-d, 2026-09-29). It keeps the concept (importance is height, editing is a hollow, glaze pools where something is live), the proud and well mechanic with one top-left light, capsule controls, celadon, ember, umber ink, the clay colour and the potter's studio. It moves the ground to white, confines clay to one button and one field, replaces Fraunces, Outfit and Spline Sans Mono with Hahmlet and Hanken Grotesk, and removes the grain, beads, pills and metric tiles.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FFFFFF` |
| surface | `#EFE3D6` |
| text | `#3A2C22` |
| muted | `#6F5A4A` |
| border | `#E6D9CA` |
| accent | `#3F9E8F` |
| accent_soft | `#CFE9E3` |
| on_accent | `#FFFFFF` |
| heat | `#B0532C` |
| wash | `#FAF6F1` |
| success | `#2F7A55` |
| warning | `#8A5A14` |
| error | `#A8402F` |
| info | `#3F6A8C` |

### Derived

- **Well Fill**: rgba(96, 66, 42, 0.10) over the clay, the fill of the one hollow
- **Proud Light**: rgba(255, 251, 246, 0.95), the top-left highlight on the one raised button
- **Proud Shadow**: rgba(58, 44, 34, 0.34) soft and rgba(58, 44, 34, 0.28) tight, falling down and to the right
- **Hollow Shadow**: inset rgba(58, 44, 34, 0.42) from the top left and inset rgba(255, 249, 240, 0.75) from the bottom right

### Typography

- **Heading Font**: Hahmlet
- **Body Font**: Hanken Grotesk
- **Mono Font**: none
- **Heading Weight**: 400
- **Body Weight**: 400
- **Button Weight**: 500
- **Display Weight**: 300 for the one big number, 600 for the wordmark
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on Hahmlet display and heads; 0 on Hanken Grotesk
- **Base Size**: 17px
- **Line Height**: 1.55
- **Scale**: ["14.5px","17px","19px","21px","27px","34px","56px","88px"]
- **Fluid**: the landing sizes its type and spacing in container units of a 1280px design (1px = 100cqi / 1280), and of a 390px design on phones
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Hahmlet:wght@300;400;600&family=Hanken+Grotesk:wght@400;500&display=swap

### Radii

- **None**: 0px
- **Md**: 0px
- **Lg**: 0px
- **Full**: 9999px

### Shadows

- **Proud**: -3px -3px 6px rgba(255, 251, 246, 0.95), 7px 10px 18px rgba(58, 44, 34, 0.34), 1px 2px 3px rgba(58, 44, 34, 0.28), only on the one raised button
- **Hollow**: inset 5px 6px 9px rgba(58, 44, 34, 0.42), inset -4px -4px 6px rgba(255, 249, 240, 0.75), only on the one hollow field and on the fired button
- **None**: everything else is flat

### Spacing

- **Base**: 8px
- **Scale**: ["4px","8px","12px","16px","24px","32px","48px","64px","72px","112px"]

### Surfaces

- **Treatment**: flat-content-under-a-clay-control-layer
- **Material**: The only clay is the control layer: one raised capsule button and one scooped capsule field in #EFE3D6, lit from the top left. Everything else is flat: white paper, full-bleed plates of the real work, and reading bands.
- **Card Style**: No cards. Shelf labels, the programme, the dip test and the log sit straight on the white page, parted by space and an alternate wash row.
- **Wells**: One hollow per page, the field you came to fill. Other fields, checkboxes, radios, switch tracks and slider tracks are flat clay #EFE3D6 capsules with no shadow.
- **Bg Pattern**: none; the page is flat white and the pictures carry the texture

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, rules or accent edges. Rows part on an alternate #FAF6F1 wash. The only drawn lines are the programme curve and its two temperature guides in #E6D9CA. Focus is a 3px celadon ring.

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(0.22, 1, 0.36, 1)
- **Press**: hold 900ms: the button sinks 2px and its shadow shortens with the hold; on commit it turns into a hollow that keeps a thumbprint
- **Settle**: 420ms cubic-bezier(0.34, 1.4, 0.64, 1) spring back when released early
- **Pool**: 600ms: the celadon wash fills the live labels
- **Philosophy**: One physical verb, the press. No scroll reveals, count-ups or parallax. The settled page renders with no JavaScript, and prefers-reduced-motion keeps the press as a state change with no travel.

### Controls

- **Height**: 64px raised button, 60px hollow field, 52px flat fields, 44px words
- **Radius**: 9999px on every control and on the celadon highlighter; 0 on everything else

## Rules

### Composition

- Build each page as a content layer and a control layer. Content is full-bleed plates of the real work and flat reading bands on white; the control layer is a small clay cluster at the edge of the hero.
- Give a page exactly one raised button and one hollow field, together in the control cluster. Every other control is flat.
- Set titles on a plate in tight umber press blocks, line by line (box-decoration-break: clone), never a panel over the image.
- Put labels flat under the pictured work, aligned to each piece.

### Hierarchy

- Height is importance: the raised button is the one action that matters; the hollow is the one field you came to fill.
- Hahmlet 400 for the page title (56px desktop, 34px phone) and section heads (34px, 27px phone); Hahmlet 300 for one big number at 88px.
- Hanken Grotesk 400 at 17px for prose; 500 for names, live labels and the button; 14.5px for captions in muted.
- State is a word at weight 500 in the right ink; the live one carries the celadon wash.

### Density

Calm product-page density: 72 to 112px between sections, 13px row padding on alternate wash rows, prose held to about 56 characters.

### Signature Patterns

- The clay control layer: one raised capsule button and one hollow capsule field, lit from the top left, clustered at the hero's edge above flat content.
- Hold to fire: the raised button sinks as you hold it, turns into a hollow that keeps a thumbprint when it commits, and springs back if you let go early.
- Pooled celadon: when the kiln fires, the celadon wash fills every label that is now live, and the thumbprint holds a celadon pool.
- Ember is heat: temperatures and the heat meter are the only ember marks.
- Umber press blocks: plate titles, tooltips and toasts are solid umber ink with clay-coloured text.
- Pooled links: every word action carries the celadon wash in its lower third, like glaze settled in a bowl, and it rises to fill the word on hover and focus.

## Layout

### Grid

- **Type**: content layer under a clay control layer
- **Max Width**: 1152px content on the embodiment with 64px gutters; the landing is a 1280px design scaled in container units
- **Gutter**: 64px desktop, 40px tablet, 20px phone
- **Column Behavior**: Two-column heads use minmax(0,5fr) minmax(0,6fr); lists and forms use minmax(0,1fr) columns; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 112px desktop, 96px tablet, 72px phone
- **Card Gap**: no cards; 13 to 18px row padding on alternate wash rows
- **Content Padding**: reading bands align to the gutter; the control cluster sits 40px from the hero's top and right edges
- **Approach**: White paper and pictures of the work; space and the value of the type do the separating.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"64px raised, 44px words","input_height":"60px hollow, 52px flat","row_height":"50 to 72px log rows"}

### Responsive

Phones (390px) stack to one column: the shelf plate shows its left half, the title stays in ink blocks on the clay wall, the control cluster drops below the plate onto a clay band, shelf and dip labels become two-column lists, the programme curve keeps its shape with segment notes listed beneath, and non-essential log columns hide. Tablets keep two-column heads and forms with their own spacing. Ultra-wide keeps the landing's proportions and caps the embodiment content at 1152px, centred.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 640px
- **Tablet**: 834 to 1100px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Guidance

### Do

- Keep the page white and let the pictured work carry the clay.
- Give each page exactly one raised button and one hollow field, together.
- Make the irreversible action a hold with visible depth.
- Spend celadon only on live labels, the thumbprint pool and focus; spend ember only on temperatures.
- Set plate titles in tight umber press blocks.
- Make secondary actions words with celadon pooled in their lower third that rises to fill them on hover and focus.
- Keep controls capsules (9999) and everything else square.

### Don't

- Don't put the proud shadow pair on a second element, or an inset on every field.
- Don't draw borders, rules or accent edges; part rows on an alternate wash.
- Don't use filled pills, status beads, metric tiles or sparklines.
- Don't lay grain or texture over the page.
- Don't put a panel or scrim over a plate.
- Don't use warm beige as the page ground, or put emoji on buttons.

### Accessibility

AA on white: umber #3A2C22 is 13.4:1, muted #6F5A4A 6.5:1, ember #B0532C 5.1:1; the state inks clear 5.2:1 (success #2F7A55, warning #8A5A14, error #A8402F, info #3F6A8C). Umber on the celadon wash is 10.5:1 and on clay 10.6:1. Celadon #3F9E8F is never text; it is the focus ring and the thumbprint pool. The hold works with Enter or Space held; the settled page renders with no JavaScript and reduced motion keeps the press as a state change.

### Usage Context

Studio and workshop software for makers: kiln controllers, glaze logs, booking for shared studios, and any product with one consequential action that deserves a press you commit to.

## Imagery Direction

### Pairs With

bisque-relief

### Art Style Id

en-019f7079-05df-7ea1-a013-1947675a78d5

### Summary

Bisque Relief plates of the real work, in warm unglazed earthenware under one soft top-left light: the shelf of pieces waiting to fire seen straight on, and dip-test tiles with celadon pooling deeper in each well. The upper third stays quiet clay wall so the ink press-block title can sit on it; images run full bleed and flat, never in raised frames.

### Subjects

- a low shelf of hand-thrown pieces seen straight on
- a row of glaze dip-test tiles
- teabowls with celadon pooled in their wells

### Usage

One full-bleed shelf plate per landing painted with var(--hero-image), background-size 100% auto at the top, with the control cluster in its quiet top-right corner and labels flat beneath each piece. A second full-bleed plate (the dip test) may carry one ink-block head. The embodiment reuses the dip-test plate only.

### Avoid

Grain overlays, raised frames around images, text on the busy part of a plate, glossy lacquer, all-over glaze, studio tools and interface elements in the picture.

---
version: "alpha"
name: "Bisque"
description: "Bisque is studio software for potters where only the controls are clay. The page is white paper with full-bleed plates of the real work: the shelf of pieces waiting to fire, the dip-test tiles. Above that content sits a thin clay control..."
colors:
  bg: "#FFFFFF"
  surface: "#EFE3D6"
  text: "#3A2C22"
  muted: "#6F5A4A"
  border: "#E6D9CA"
  accent: "#3F9E8F"
  accent_soft: "#CFE9E3"
  on_accent: "#FFFFFF"
  heat: "#B0532C"
  wash: "#FAF6F1"
  success: "#2F7A55"
  warning: "#8A5A14"
  error: "#A8402F"
  info: "#3F6A8C"
typography:
  headline-lg:
    fontFamily: "Hahmlet"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Hahmlet"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Hanken Grotesk"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "none"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "0px"
  lg: "0px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "72px"
  step-9: "112px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_soft:
    backgroundColor: "{colors.accent_soft}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-heat:
    backgroundColor: "{colors.heat}"
  color-reference-wash:
    backgroundColor: "{colors.wash}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Bisque

## Overview

Bisque is studio software for potters where only the controls are clay. The page is white paper with full-bleed plates of the real work: the shelf of pieces waiting to fire, the dip-test tiles. Above that content sits a thin clay control layer holding exactly one raised button and one hollow field. Importance is height, editing is a hollow, and celadon glaze pools only where something is live.

### Values

- Clay only where a thumb goes: one raised button and one hollow field per page.
- Depth is spent, not sprayed: the press is the one physical verb.
- The irreversible action is a hold you commit to; its depth shows how far you are.
- Celadon marks what is live; ember marks a temperature; nothing else takes colour.
- The work carries the page: real pieces, a real kiln schedule, a real dip test.

### Anti-Values

- The same neumorphic shadow pair on every element.
- Insets on every input, tab and slider.
- Filled pills, status beads and metric tiles with sparklines.
- Grain laid over the whole field.
- Mood words in place of the rule the page follows.
- Warm beige page grounds.

### Visual Character

- A pure white page; clay #EFE3D6 appears only in the pictured work and in the control layer.
- One raised capsule button lit from the top left and one scooped capsule well, clustered at the edge of the hero.
- Hold to fire: the button sinks flush, becomes a hollow that keeps a thumbprint, and celadon pools in the dent.
- A celadon wash #CFE9E3 highlighter on every label that is live: tonight's pieces, tonight's row, the chosen dip time.
- Hahmlet for the masthead, heads and one light big number; Hanken Grotesk for everything else.
- Titles on the plates set in tight umber ink press blocks, line by line.
- Flat reading bands: shelf labels under each piece, a kiln schedule drawn as a clay-filled curve, a plain log on alternate wash rows.

### Lineage

> Generation 3 of Bisque, revised in place from arni's approved range take (bisque-d, 2026-09-29). It keeps the concept (importance is height, editing is a hollow, glaze pools where something is live), the proud and well mechanic with one top-left light, capsule controls, celadon, ember, umber ink, the clay colour and the potter's studio. It moves the ground to white, confines clay to one button and one field, replaces Fraunces, Outfit and Spline Sans Mono with Hahmlet and Hanken Grotesk, and removes the grain, beads, pills and metric tiles.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| bg | `#FFFFFF` |
| surface | `#EFE3D6` |
| text | `#3A2C22` |
| muted | `#6F5A4A` |
| border | `#E6D9CA` |
| accent | `#3F9E8F` |
| accent_soft | `#CFE9E3` |
| on_accent | `#FFFFFF` |
| heat | `#B0532C` |
| wash | `#FAF6F1` |
| success | `#2F7A55` |
| warning | `#8A5A14` |
| error | `#A8402F` |
| info | `#3F6A8C` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Hahmlet:wght@300;400;600&family=Hanken+Grotesk:wght@400;500&display=swap

- **Headline-Lg**: Hahmlet, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Hahmlet, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Hanken Grotesk, 17px, weight 400, line-height 1.5.
- **Label-Md**: none, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `72px`
- **Step-9**: `112px`

### Grid

- **Type**: content layer under a clay control layer
- **Max Width**: 1152px content on the embodiment with 64px gutters; the landing is a 1280px design scaled in container units
- **Gutter**: 64px desktop, 40px tablet, 20px phone
- **Column Behavior**: Two-column heads use minmax(0,5fr) minmax(0,6fr); lists and forms use minmax(0,1fr) columns; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 112px desktop, 96px tablet, 72px phone
- **Card Gap**: no cards; 13 to 18px row padding on alternate wash rows
- **Content Padding**: reading bands align to the gutter; the control cluster sits 40px from the hero's top and right edges
- **Approach**: White paper and pictures of the work; space and the value of the type do the separating.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"64px raised, 44px words","input_height":"60px hollow, 52px flat","row_height":"50 to 72px log rows"}

### Responsive

Phones (390px) stack to one column: the shelf plate shows its left half, the title stays in ink blocks on the clay wall, the control cluster drops below the plate onto a clay band, shelf and dip labels become two-column lists, the programme curve keeps its shape with segment notes listed beneath, and non-essential log columns hide. Tablets keep two-column heads and forms with their own spacing. Ultra-wide keeps the landing's proportions and caps the embodiment content at 1152px, centred.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 640px
- **Tablet**: 834 to 1100px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Proud**: -3px -3px 6px rgba(255, 251, 246, 0.95), 7px 10px 18px rgba(58, 44, 34, 0.34), 1px 2px 3px rgba(58, 44, 34, 0.28), only on the one raised button
- **Hollow**: inset 5px 6px 9px rgba(58, 44, 34, 0.42), inset -4px -4px 6px rgba(255, 249, 240, 0.75), only on the one hollow field and on the fired button
- **None**: everything else is flat

## Shapes

### Rounded

- **None**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: flat-content-under-a-clay-control-layer
- **Material**: The only clay is the control layer: one raised capsule button and one scooped capsule field in #EFE3D6, lit from the top left. Everything else is flat: white paper, full-bleed plates of the real work, and reading bands.
- **Card Style**: No cards. Shelf labels, the programme, the dip test and the log sit straight on the white page, parted by space and an alternate wash row.
- **Wells**: One hollow per page, the field you came to fill. Other fields, checkboxes, radios, switch tracks and slider tracks are flat clay #EFE3D6 capsules with no shadow.
- **Bg Pattern**: none; the page is flat white and the pictures carry the texture

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, rules or accent edges. Rows part on an alternate #FAF6F1 wash. The only drawn lines are the programme curve and its two temperature guides in #E6D9CA. Focus is a 3px celadon ring.

## Components

### Composition

- Build each page as a content layer and a control layer. Content is full-bleed plates of the real work and flat reading bands on white; the control layer is a small clay cluster at the edge of the hero.
- Give a page exactly one raised button and one hollow field, together in the control cluster. Every other control is flat.
- Set titles on a plate in tight umber press blocks, line by line (box-decoration-break: clone), never a panel over the image.
- Put labels flat under the pictured work, aligned to each piece.

### Hierarchy

- Height is importance: the raised button is the one action that matters; the hollow is the one field you came to fill.
- Hahmlet 400 for the page title (56px desktop, 34px phone) and section heads (34px, 27px phone); Hahmlet 300 for one big number at 88px.
- Hanken Grotesk 400 at 17px for prose; 500 for names, live labels and the button; 14.5px for captions in muted.
- State is a word at weight 500 in the right ink; the live one carries the celadon wash.

### Density

Calm product-page density: 72 to 112px between sections, 13px row padding on alternate wash rows, prose held to about 56 characters.

### Signature Patterns

- The clay control layer: one raised capsule button and one hollow capsule field, lit from the top left, clustered at the hero's edge above flat content.
- Hold to fire: the raised button sinks as you hold it, turns into a hollow that keeps a thumbprint when it commits, and springs back if you let go early.
- Pooled celadon: when the kiln fires, the celadon wash fills every label that is now live, and the thumbprint holds a celadon pool.
- Ember is heat: temperatures and the heat meter are the only ember marks.
- Umber press blocks: plate titles, tooltips and toasts are solid umber ink with clay-coloured text.
- Pooled links: every word action carries the celadon wash in its lower third, like glaze settled in a bowl, and it rises to fill the word on hover and focus.

## shadcn/ui Usage

When the target app uses shadcn/ui, copy DESIGN.md with shadcn instead of the plain DESIGN.md. It contains the same Katagami design-language source plus the shadcn/ui primitives, imports, theme variables, component recipes, and preview-shot guidance.

DESIGN.md with shadcn: `/language/en-01a0ee7e-f421-7321-869f-8878fcb4fe78/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a0ee7e-f421-7321-869f-8878fcb4fe78/shadcn.json` (registry theme), `/language/en-01a0ee7e-f421-7321-869f-8878fcb4fe78/shadcn-components.md` (component recipes) and `/language/en-01a0ee7e-f421-7321-869f-8878fcb4fe78/shadcn-shots.json` (preview shots). The human-facing handoff is still DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Keep the page white and let the pictured work carry the clay.
- Do Give each page exactly one raised button and one hollow field, together.
- Do Make the irreversible action a hold with visible depth.
- Do Spend celadon only on live labels, the thumbprint pool and focus; spend ember only on temperatures.
- Do Set plate titles in tight umber press blocks.
- Do Make secondary actions words with celadon pooled in their lower third that rises to fill them on hover and focus.
- Do Keep controls capsules (9999) and everything else square.
- Don't Don't put the proud shadow pair on a second element, or an inset on every field.
- Don't Don't draw borders, rules or accent edges; part rows on an alternate wash.
- Don't Don't use filled pills, status beads, metric tiles or sparklines.
- Don't Don't lay grain or texture over the page.
- Don't Don't put a panel or scrim over a plate.
- Don't Don't use warm beige as the page ground, or put emoji on buttons.

### Accessibility

AA on white: umber #3A2C22 is 13.4:1, muted #6F5A4A 6.5:1, ember #B0532C 5.1:1; the state inks clear 5.2:1 (success #2F7A55, warning #8A5A14, error #A8402F, info #3F6A8C). Umber on the celadon wash is 10.5:1 and on clay 10.6:1. Celadon #3F9E8F is never text; it is the focus ring and the thumbprint pool. The hold works with Enter or Space held; the settled page renders with no JavaScript and reduced motion keeps the press as a state change.

### Usage Context

Studio and workshop software for makers: kiln controllers, glaze logs, booking for shared studios, and any product with one consequential action that deserves a press you commit to.

## Imagery Direction

### Pairs With

bisque-relief

### Art Style Id

en-019f7079-05df-7ea1-a013-1947675a78d5

### Summary

Bisque Relief plates of the real work, in warm unglazed earthenware under one soft top-left light: the shelf of pieces waiting to fire seen straight on, and dip-test tiles with celadon pooling deeper in each well. The upper third stays quiet clay wall so the ink press-block title can sit on it; images run full bleed and flat, never in raised frames.

### Subjects

- a low shelf of hand-thrown pieces seen straight on
- a row of glaze dip-test tiles
- teabowls with celadon pooled in their wells

### Usage

One full-bleed shelf plate per landing painted with var(--hero-image), background-size 100% auto at the top, with the control cluster in its quiet top-right corner and labels flat beneath each piece. A second full-bleed plate (the dip test) may carry one ink-block head. The embodiment reuses the dip-test plate only.

### Avoid

Grain overlays, raised frames around images, text on the busy part of a plate, glossy lacquer, all-over glaze, studio tools and interface elements in the picture.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bisque",
  "type": "registry:theme",
  "title": "Bisque shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#3A2C22",
      "card": "#EFE3D6",
      "card-foreground": "#3A2C22",
      "popover": "#EFE3D6",
      "popover-foreground": "#3A2C22",
      "primary": "#3A2C22",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6F5A4A",
      "muted-foreground": "#3A2C22",
      "accent": "#3F9E8F",
      "accent-foreground": "#ffffff",
      "destructive": "#A8402F",
      "border": "#E6D9CA",
      "input": "#E6D9CA",
      "ring": "#3F9E8F",
      "chart-1": "#3A2C22",
      "chart-2": "#f4f4f5",
      "chart-3": "#3F9E8F",
      "chart-4": "#2F7A55",
      "chart-5": "#8A5A14",
      "sidebar": "#EFE3D6",
      "sidebar-foreground": "#3A2C22",
      "sidebar-primary": "#3A2C22",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3F6A8C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#E6D9CA",
      "sidebar-ring": "#3F9E8F",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#3A2C22",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#3F9E8F",
      "accent-foreground": "#ffffff",
      "destructive": "#A8402F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#3F9E8F",
      "chart-1": "#3A2C22",
      "chart-2": "#f4f4f5",
      "chart-3": "#3F9E8F",
      "chart-4": "#2F7A55",
      "chart-5": "#8A5A14",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#3A2C22",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3F9E8F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#3F9E8F",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a0ee7e-f421-7321-869f-8878fcb4fe78",
    "slug": "bisque",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "accent_soft",
        "bg",
        "border",
        "error",
        "heat",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "text",
        "warning",
        "wash"
      ],
      "derived": [
        "hollow_shadow",
        "proud_light",
        "proud_shadow",
        "well_fill"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "display_weight",
        "fluid",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "hollow",
        "none",
        "proud"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "material",
        "treatment",
        "wells"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy",
        "pool",
        "press",
        "settle"
      ],
      "controls": [
        "height",
        "radius"
      ]
    }
  }
}
```