Andon

# Andon

## Philosophy

Andon is a cedar and Mino washi lantern used as an interface, and the lantern is the lighting schedule. It stands on a pale washi table; its four tiers are four rooms, each lit to its lux, so West alcove and Cedar shelf glow, Paper screen is half lit and rising, and Stone sill is dark paper. The schedule sits beside it with each row level with its tier and a hairline running to the post. Touch a pane, its row or Light a room and that tier catches and glows. Everything around the lantern is flat and precise: small Murecho type, one light Shippori Mincho headline, and lamp brown only on the words Lit and Rising.

### Values

- {"name":"Light as hierarchy","explanation":"Priority is how much light a room has. The lantern shows it as lit paper; the schedule shows it as lux; nothing else competes."}
- {"name":"One lit thing","explanation":"The lantern is the only lit or raised object in a view. The page around it is flat washi, so the paper reads as light."}
- {"name":"Active emptiness","explanation":"The dark stone sill is the ma interval: a room left dark on purpose, named in the schedule and kept dark by a setting."}
- {"name":"Material, not effect","explanation":"Washi, cedar and a 2700 K filament are photographed, not simulated. The unlit state is the same paper photographed dark, never a grey overlay or a gradient."}
- {"name":"Depth is a verb","explanation":"A tier catches only when you touch it: a short flicker, then it settles lit. At rest nothing moves."}
- {"name":"Domestic words","explanation":"Rooms, times, lux and warmth. West alcove, lit until ten. No product-speak and no borrowed Japanism."}

### Anti-Values

- {"name":"Lamplight sprayed on everything","explanation":"The old top glow, the directional gradient on every plane and the grain over the ground are gone. Light belongs to the lantern."}
- {"name":"The amber seam","explanation":"No luminous edge on the active element; state is a word in lamp brown."}
- {"name":"Boxes and chips","explanation":"No cards, bordered panels, zebra rows or status pills. Rows sit on the table, parted by space."}
- {"name":"Ornamental Japanism","explanation":"No cherry blossoms, red suns, faux brush calligraphy or motif wallpaper."}
- {"name":"Glow as decoration","explanation":"No glow on buttons or text. The cedar button is flat because the lantern is the lamp."}

### Visual Character

- One cut-out product render of a four-tier cedar and washi andon stands on the #EEE8DD washi table with table on every side, a blurred brown contact shadow falling a little right of its foot, a soft wide ambient shadow to the lower right and a #FFDEB0 pool of lamplight between its legs.
- Each tier's light is image data: a second transparent render of the same washi, unlit, is clipped to each tier with opacity 0 (Lit), 0.07 (Low), 0.44 (Rising) or 0.9 (Shadow).
- The schedule sits to the lantern's left with each row level with the middle of its tier and a 1px #B9AE9E hairline running from the lux figure to the post, like a callout on a product drawing.
- Type is small and quiet around one big light element: a Shippori Mincho 400 headline at 64px with -0.02em tracking, everything else Murecho at 14.5 to 21px with tabular lux figures.
- Lamp brown #7E4B1B appears only on the state words Lit and Rising, focus rings and meter lines; the single action is a flat cedar pill (#2E2218) with no seam and no shadow.
- Nothing is boxed: rows, forms and lists sit straight on the table, and at most one flat #F7F3EC plane appears in a view, square-cornered like the lantern's panes.

### Lineage

> An in-place revision of Andon (generation 2), rebuilt the Inspora way from the elevated specimen arni approved on 2026-09-28. It keeps the lamplight concept, light as hierarchy, the ma interval as the dark stone sill, the washi and cedar world, Shippori Mincho and the room schedule, and drops the lampfall gradients, the amber seam, the shadow gutter, the grain, the chips and IBM Plex.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#EEE8DD` |
| surface | `#F7F3EC` |
| text | `#231D17` |
| copy | `#554C41` |
| muted | `#645A4D` |
| border | `#B9AE9E` |
| accent | `#7E4B1B` |
| on_accent | `#FBF6EE` |
| success | `#56633A` |
| warning | `#80561A` |
| error | `#8C3A2B` |
| info | `#456068` |
| cedar | `#2E2218` |
| well | `#E4DED3` |
| glow | `#FFDEB0` |
| shade | `#3C2A18` |

### Derived

- **Copy**: color-mix(in srgb, var(--muted) 77%, var(--text))
- **Cedar**: color-mix(in srgb, var(--text) 88%, var(--accent))
- **Well**: color-mix(in srgb, var(--bg) 93%, var(--muted))
- **Shade**: color-mix(in srgb, var(--text) 72%, var(--accent))
- **Note**: Past the eleven role colours only glow (#FFDEB0, the lamplight pool) is literal; copy, cedar, well and shade are mixed from the roles in CSS, so a palette swap carries the button, the wells and the shadows with it.

### Typography

- **Heading Font**: Shippori Mincho
- **Body Font**: Murecho
- **Mono Font**: none
- **Heading Weight**: 400
- **Wordmark Weight**: 500
- **Body Weight**: 400
- **Label Weight**: 500
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on Shippori Mincho display; 0 on Murecho
- **Line Height**: 1.6
- **Base Size**: 17px
- **Scale**: ["14.5px","17px","21px","28px","40px","64px"]
- **Roles**: {"display":"Shippori Mincho 400: the one big light word in a view (64px headline, 40px section titles, 28px quotes); 500 only for the wordmark","body":"Murecho 400 at 17px for copy, rows and controls; 500 for button labels, the lead line and a selected row","label":"Murecho 400 at 14.5px in the quiet ink for labels, captions and table heads; sentence case, never tracked caps"}
- **Numerals**: lining tabular figures for lux, times and counts
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Murecho:wght@400;500&family=Shippori+Mincho:wght@400;500&display=swap

### Radii

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

### Shadows

- **Contact**: a solid --shade ellipse under the lantern's foot, 3% of its height, blurred 4px at 42% opacity, offset a little right of centre
- **Ambient**: a wide --shade ellipse, 9% of the lantern's height, blurred 18px at 16%, running out to the lower right
- **Pool**: a --glow ellipse between the legs, blurred 10px at 55%, rising to 100% when the lowest tier lights
- **Lift**: 0 1px 2px color-mix(in srgb, var(--shade) 22%, transparent), 10px 18px 40px -14px color-mix(in srgb, var(--shade) 34%, transparent)
- **Note**: One key light from the top left. The lantern throws the contact and ambient pair; an open dialog borrows the same two layers as its lift. Nothing else has a shadow, and no shadow is grey.

### Spacing

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

### Surfaces

- **Treatment**: one-lantern-on-a-washi-table
- **Material**: The lantern is the only material object: oiled Kiso cedar with square mortise joints and four tiers of Mino kozo washi, lit from inside at 2700 K, photographed on a washi sweep and cut out. Its unlit state is a second photograph of the same washi, warm grey, laid over each tier. Everything else is flat colour.
- **Card Style**: No cards. Content sits straight on the washi table, grouped by space and a Shippori Mincho title. The flat --surface plane (one value lighter than the table) appears once per view at most: the current row, a selected table row, an open menu or dialog, or the foot band.
- **Table**: The page ground --bg is the table the lantern stands on. On the landing the hero image is the same washi sweep, photographed empty with a soft top-left key, and the live lantern stands on it.
- **Tiers**: Tier darkness is the opacity of the unlit sheet clipped to that tier: 0 for Lit, 0.07 for Low, 0.44 for Rising, 0.9 for Shadow.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, rules, dividers or outlined boxes. The only lines are 1px --border callout hairlines that run from a schedule row to the lantern's post, like a product drawing, and the 1px leader line a link draws on hover. Focus is a 2px --accent outline.

### Motion

- **Duration**: 700ms catch, 1100ms fade back
- **Easing**: linear keyframes for the catch; cubic-bezier(.4,0,.2,1) to fade back; cubic-bezier(.2,.7,.2,1) for reveals; cubic-bezier(.34,1.3,.5,1) for the switch knob
- **Catch**: keyframes on the unlit sheet: d, 45% of d at 14%, 82% at 24%, 18% at 46%, 30% at 62%, then 0
- **Pool**: brightens over 900ms, 180ms after the lowest tier lights
- **Reveal**: sections rise 16 to 18px over 800 to 900ms as they enter, once, staggered 100 to 120ms
- **Philosophy**: Motion is a physical verb: the paper catches the lamp, dips and settles lit. The settled state is the default and renders with no JavaScript; an inline script adds .anim to <html> only when prefers-reduced-motion is not set, and a 4s fallback settles anything the observer misses. Under reduced motion a tier changes in 0.15s with no flicker.

### Controls

- **Height**: 52px
- **Compact Height**: 44px
- **Button Radius**: 9999px
- **Well Radius**: 0px
- **Wells**: --well on the table, --surface on focus with a 2px --accent ring

## Rules

### Composition

- Give each view one object moment: the lantern whole with its schedule, or one part of it (a single tier, a lit pane close up). Everything else in the view stays flat.
- Stand the lantern on the table with air on every side and the headline, copy and one action on the ground beside it; never put a panel or scrim over it.
- Show the whole lantern once per page. Later views take a part or a moment of it: one tier in four states, the lowest pane close up, the plan of the rooms it lights.
- Line each schedule row up with the middle of its tier and run a 1px hairline from the lux figure to the lantern's post.
- Separate by space and value, never by boxes: rows, lists, forms and specimens sit on the table; one flat --surface plane per view at most.
- One action per view as a flat cedar pill; any second action is a leader-line text link.

### Hierarchy

- The one big element in a view is a light word: Shippori Mincho 400 at 64px for the headline, 40px for section titles, 28px for a quote.
- Everything else is Murecho: 17px body and rows, 21px for a lead line, 14.5px labels in the quiet ink, sentence case.
- State is a word, not a chip: Lit and Rising in lamp brown, Shadow in the quiet ink with the rest of its row.
- Lux, times and counts use lining tabular figures and sit right-aligned.
- Semantic status is an 8px dot and a word in its earth colour, then a plain sentence.

### Density

Calm and edited: one object and a short headline per view, 136 to 152px between sections on desktop and 104px on phones, 52px controls, rows parted by 12 to 17px of padding, prose held to about 34em.

### Signature Patterns

- The lantern schedule: a cut-out four-tier cedar and washi andon (assets/lantern.webp) standing on the washi table beside the room schedule, each row level with its tier and joined to the post by a 1px hairline.
- Tier light as data: a transparent unlit render of the same washi (assets/lantern-unlit.webp) clipped to each tier, its opacity the room's darkness (0, 0.07, 0.44, 0.9).
- Catch: hovering or focusing a tier, its row or Light a room runs a 0.7s flicker on that tier's unlit sheet and settles it lit; the pool of lamplight brightens when the lowest tier lights, and the row's state turns to Lit.
- The dark sill: one room is left in shadow on purpose as the ma interval, named in the schedule and kept dark by a setting.
- Leader-line links: a link draws an 18px lamp-brown hairline before its word on hover and focus, the same line as the schedule callouts.
- The flat cedar pill: the one action per view, 52px, no seam and no shadow, because the lantern is the lamp.

## Layout

### Grid

- **Type**: object-first product page
- **Max Width**: 1180px content on the landing, 1240px on the embodiment, 1320 to 1400px from 1800px wide
- **Gutter**: 40 to 44px desktop, 32px tablet, 16px phone
- **Column Behavior**: The hero is copy (minmax(0,1fr)) beside the lantern group (schedule up to 320px plus the lantern at min(66svh, 740px) tall). Below it, two-column rows use minmax(0,5fr) minmax(0,7fr); every track is minmax(0,...) and every grid child min-width:0.

### Whitespace

- **Section Gap**: 136 to 152px desktop, 104px phone
- **Card Gap**: no cards; 12 to 17px row padding, 28 to 56px between groups
- **Content Padding**: content sits on the table, aligned to the grid edge; the dialog pads 36px
- **Approach**: The table is empty space by design: the lantern needs air on every side, the headline aligns with its top rim and the action with its foot line.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"52px","input_height":"52px","row_height":"50 to 58px rows parted by space"}

### Responsive

Phones (390px) stack to one column: headline, copy and the action, then the schedule and a 360px lantern side by side with 8px hairlines; nav links and non-essential table columns hide. Tablets (768 to 1080px) put the copy above a centred lantern group and keep two-column forms. Ultra-wide caps and centres the content, keeps the lantern at 740px at most, and lets only the hero image span the full width.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 640px
- **Tablet**: 768 to 1080px
- **Desktop**: 1280px
- **Wide**: 1440px
- **Ultrawide**: 1800px and 2560px

## Guidance

### Do

- Stand the lantern on the washi table in the first view with its schedule beside it and air all round.
- Read the rooms off the lantern: a lit tier is a lit room; keep every other figure as quiet flat text.
- Leave one room dark on purpose and say so.
- Spend lamp brown on Lit and Rising, focus and meters only; make the action a flat cedar pill.
- Separate rows by space and value, and keep at most one flat plane in a view.
- Write in the house's words: West alcove, lit until ten. Sunset 17:36. Keep the stone sill dark.
- Style every control explicitly: square wells one value below the table, pill buttons and segments, round switches.

### Don't

- Don't show the whole lantern twice on one page; use one tier or a close-up for later moments.
- Don't put a scrim, panel or card over or around the lantern.
- Don't add glow, gradients or grain to the page, buttons or text.
- Don't draw borders, dividers or an accent edge; the only lines are callout hairlines and link leaders.
- Don't use chips or pills for state, or a stat band of big numbers.
- Don't pair a secondary button with the cedar one.
- Don't decorate with Japanese motifs or put emoji or symbol glyphs on buttons.

### Usage Context

Calm tools where one physical thing carries the state: lighting and home control, reading and archive desks, schedules for a house, an inn or a gallery, material catalogues.

### Accessibility

WCAG AA and better on the washi table #EEE8DD: ink #231D17 is 13.7:1, copy #554C41 is 6.9:1, quiet #645A4D is 5.5:1, lamp brown #7E4B1B is 5.9:1, and the cedar button label #F7F3EC on #2E2218 is 14.0:1. Semantic colours clear 4.5:1 on the table and on the plane. Status is a dot plus a word, never colour alone. Tiers, rows and the button are keyboard reachable with role button, and focus shows the lit state with a 2px lamp-brown ring. prefers-reduced-motion drops the flicker and reveals; the state still changes.

## Imagery Direction

### Pairs With

umbra

### Summary

Studio product photographs of the andon and its parts on a pale washi table: oiled Kiso cedar with square joinery, Mino kozo washi lit from inside at 2700 K with the fibres showing, one key light from the top left, brown-tinted shadows falling to the lower right, and a warm pool of lamplight at the foot. One object, photographed as a catalogue piece.

### Subjects

- the four-tier cedar and washi andon
- one lit washi pane in its cedar frame, close
- a cedar mortise joint
- the washi sweep the lantern stands on
- the pool of lamplight on the table

### Usage

The landing hero is the empty washi sweep, photographed with a soft top-left key, with the live cut-out lantern standing on it and the headline beside it on the ground. Later views use parts of the lantern (a lit pane close up, one tier in four states) rather than the whole lantern again. No text, no people, no props, no vignette, no lens flare. From Umbra this direction keeps the single light from the upper left, matte opaque material, warm highlights and one cast shadow in one direction; it softens Umbra's hard low sun into a studio key so the washi reads as lit from inside, and keeps the shade warm brown rather than indigo.

---
version: "alpha"
name: "Andon"
description: "Andon is a cedar and Mino washi lantern used as an interface, and the lantern is the lighting schedule. It stands on a pale washi table; its four tiers are four rooms, each lit to its lux, so West alcove and Cedar shelf glow, Paper scree..."
colors:
  bg: "#EEE8DD"
  surface: "#F7F3EC"
  text: "#231D17"
  copy: "#554C41"
  muted: "#645A4D"
  border: "#B9AE9E"
  accent: "#7E4B1B"
  on_accent: "#FBF6EE"
  success: "#56633A"
  warning: "#80561A"
  error: "#8C3A2B"
  info: "#456068"
  cedar: "#2E2218"
  well: "#E4DED3"
  glow: "#FFDEB0"
  shade: "#3C2A18"
typography:
  headline-lg:
    fontFamily: "Shippori Mincho"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Shippori Mincho"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Murecho"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.6
    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: "96px"
  step-9: "152px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-copy:
    backgroundColor: "{colors.copy}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-cedar:
    backgroundColor: "{colors.cedar}"
  color-reference-well:
    backgroundColor: "{colors.well}"
  color-reference-glow:
    backgroundColor: "{colors.glow}"
  color-reference-shade:
    backgroundColor: "{colors.shade}"
  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"
---

# Andon

## Overview

Andon is a cedar and Mino washi lantern used as an interface, and the lantern is the lighting schedule. It stands on a pale washi table; its four tiers are four rooms, each lit to its lux, so West alcove and Cedar shelf glow, Paper screen is half lit and rising, and Stone sill is dark paper. The schedule sits beside it with each row level with its tier and a hairline running to the post. Touch a pane, its row or Light a room and that tier catches and glows. Everything around the lantern is flat and precise: small Murecho type, one light Shippori Mincho headline, and lamp brown only on the words Lit and Rising.

### Values

- {"name":"Light as hierarchy","explanation":"Priority is how much light a room has. The lantern shows it as lit paper; the schedule shows it as lux; nothing else competes."}
- {"name":"One lit thing","explanation":"The lantern is the only lit or raised object in a view. The page around it is flat washi, so the paper reads as light."}
- {"name":"Active emptiness","explanation":"The dark stone sill is the ma interval: a room left dark on purpose, named in the schedule and kept dark by a setting."}
- {"name":"Material, not effect","explanation":"Washi, cedar and a 2700 K filament are photographed, not simulated. The unlit state is the same paper photographed dark, never a grey overlay or a gradient."}
- {"name":"Depth is a verb","explanation":"A tier catches only when you touch it: a short flicker, then it settles lit. At rest nothing moves."}
- {"name":"Domestic words","explanation":"Rooms, times, lux and warmth. West alcove, lit until ten. No product-speak and no borrowed Japanism."}

### Anti-Values

- {"name":"Lamplight sprayed on everything","explanation":"The old top glow, the directional gradient on every plane and the grain over the ground are gone. Light belongs to the lantern."}
- {"name":"The amber seam","explanation":"No luminous edge on the active element; state is a word in lamp brown."}
- {"name":"Boxes and chips","explanation":"No cards, bordered panels, zebra rows or status pills. Rows sit on the table, parted by space."}
- {"name":"Ornamental Japanism","explanation":"No cherry blossoms, red suns, faux brush calligraphy or motif wallpaper."}
- {"name":"Glow as decoration","explanation":"No glow on buttons or text. The cedar button is flat because the lantern is the lamp."}

### Visual Character

- One cut-out product render of a four-tier cedar and washi andon stands on the #EEE8DD washi table with table on every side, a blurred brown contact shadow falling a little right of its foot, a soft wide ambient shadow to the lower right and a #FFDEB0 pool of lamplight between its legs.
- Each tier's light is image data: a second transparent render of the same washi, unlit, is clipped to each tier with opacity 0 (Lit), 0.07 (Low), 0.44 (Rising) or 0.9 (Shadow).
- The schedule sits to the lantern's left with each row level with the middle of its tier and a 1px #B9AE9E hairline running from the lux figure to the post, like a callout on a product drawing.
- Type is small and quiet around one big light element: a Shippori Mincho 400 headline at 64px with -0.02em tracking, everything else Murecho at 14.5 to 21px with tabular lux figures.
- Lamp brown #7E4B1B appears only on the state words Lit and Rising, focus rings and meter lines; the single action is a flat cedar pill (#2E2218) with no seam and no shadow.
- Nothing is boxed: rows, forms and lists sit straight on the table, and at most one flat #F7F3EC plane appears in a view, square-cornered like the lantern's panes.

### Lineage

> An in-place revision of Andon (generation 2), rebuilt the Inspora way from the elevated specimen arni approved on 2026-09-28. It keeps the lamplight concept, light as hierarchy, the ma interval as the dark stone sill, the washi and cedar world, Shippori Mincho and the room schedule, and drops the lampfall gradients, the amber seam, the shadow gutter, the grain, the chips and IBM Plex.

## 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 | `#EEE8DD` |
| surface | `#F7F3EC` |
| text | `#231D17` |
| copy | `#554C41` |
| muted | `#645A4D` |
| border | `#B9AE9E` |
| accent | `#7E4B1B` |
| on_accent | `#FBF6EE` |
| success | `#56633A` |
| warning | `#80561A` |
| error | `#8C3A2B` |
| info | `#456068` |
| cedar | `#2E2218` |
| well | `#E4DED3` |
| glow | `#FFDEB0` |
| shade | `#3C2A18` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Murecho:wght@400;500&family=Shippori+Mincho:wght@400;500&display=swap

- **Headline-Lg**: Shippori Mincho, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Shippori Mincho, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Murecho, 17px, weight 400, line-height 1.6.
- **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**: `96px`
- **Step-9**: `152px`

### Grid

- **Type**: object-first product page
- **Max Width**: 1180px content on the landing, 1240px on the embodiment, 1320 to 1400px from 1800px wide
- **Gutter**: 40 to 44px desktop, 32px tablet, 16px phone
- **Column Behavior**: The hero is copy (minmax(0,1fr)) beside the lantern group (schedule up to 320px plus the lantern at min(66svh, 740px) tall). Below it, two-column rows use minmax(0,5fr) minmax(0,7fr); every track is minmax(0,...) and every grid child min-width:0.

### Whitespace

- **Section Gap**: 136 to 152px desktop, 104px phone
- **Card Gap**: no cards; 12 to 17px row padding, 28 to 56px between groups
- **Content Padding**: content sits on the table, aligned to the grid edge; the dialog pads 36px
- **Approach**: The table is empty space by design: the lantern needs air on every side, the headline aligns with its top rim and the action with its foot line.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"52px","input_height":"52px","row_height":"50 to 58px rows parted by space"}

### Responsive

Phones (390px) stack to one column: headline, copy and the action, then the schedule and a 360px lantern side by side with 8px hairlines; nav links and non-essential table columns hide. Tablets (768 to 1080px) put the copy above a centred lantern group and keep two-column forms. Ultra-wide caps and centres the content, keeps the lantern at 740px at most, and lets only the hero image span the full width.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 640px
- **Tablet**: 768 to 1080px
- **Desktop**: 1280px
- **Wide**: 1440px
- **Ultrawide**: 1800px and 2560px

## Elevation & Depth

### Shadows

- **Contact**: a solid --shade ellipse under the lantern's foot, 3% of its height, blurred 4px at 42% opacity, offset a little right of centre
- **Ambient**: a wide --shade ellipse, 9% of the lantern's height, blurred 18px at 16%, running out to the lower right
- **Pool**: a --glow ellipse between the legs, blurred 10px at 55%, rising to 100% when the lowest tier lights
- **Lift**: 0 1px 2px color-mix(in srgb, var(--shade) 22%, transparent), 10px 18px 40px -14px color-mix(in srgb, var(--shade) 34%, transparent)
- **Note**: One key light from the top left. The lantern throws the contact and ambient pair; an open dialog borrows the same two layers as its lift. Nothing else has a shadow, and no shadow is grey.

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: one-lantern-on-a-washi-table
- **Material**: The lantern is the only material object: oiled Kiso cedar with square mortise joints and four tiers of Mino kozo washi, lit from inside at 2700 K, photographed on a washi sweep and cut out. Its unlit state is a second photograph of the same washi, warm grey, laid over each tier. Everything else is flat colour.
- **Card Style**: No cards. Content sits straight on the washi table, grouped by space and a Shippori Mincho title. The flat --surface plane (one value lighter than the table) appears once per view at most: the current row, a selected table row, an open menu or dialog, or the foot band.
- **Table**: The page ground --bg is the table the lantern stands on. On the landing the hero image is the same washi sweep, photographed empty with a soft top-left key, and the live lantern stands on it.
- **Tiers**: Tier darkness is the opacity of the unlit sheet clipped to that tier: 0 for Lit, 0.07 for Low, 0.44 for Rising, 0.9 for Shadow.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, rules, dividers or outlined boxes. The only lines are 1px --border callout hairlines that run from a schedule row to the lantern's post, like a product drawing, and the 1px leader line a link draws on hover. Focus is a 2px --accent outline.

## Components

### Composition

- Give each view one object moment: the lantern whole with its schedule, or one part of it (a single tier, a lit pane close up). Everything else in the view stays flat.
- Stand the lantern on the table with air on every side and the headline, copy and one action on the ground beside it; never put a panel or scrim over it.
- Show the whole lantern once per page. Later views take a part or a moment of it: one tier in four states, the lowest pane close up, the plan of the rooms it lights.
- Line each schedule row up with the middle of its tier and run a 1px hairline from the lux figure to the lantern's post.
- Separate by space and value, never by boxes: rows, lists, forms and specimens sit on the table; one flat --surface plane per view at most.
- One action per view as a flat cedar pill; any second action is a leader-line text link.

### Hierarchy

- The one big element in a view is a light word: Shippori Mincho 400 at 64px for the headline, 40px for section titles, 28px for a quote.
- Everything else is Murecho: 17px body and rows, 21px for a lead line, 14.5px labels in the quiet ink, sentence case.
- State is a word, not a chip: Lit and Rising in lamp brown, Shadow in the quiet ink with the rest of its row.
- Lux, times and counts use lining tabular figures and sit right-aligned.
- Semantic status is an 8px dot and a word in its earth colour, then a plain sentence.

### Density

Calm and edited: one object and a short headline per view, 136 to 152px between sections on desktop and 104px on phones, 52px controls, rows parted by 12 to 17px of padding, prose held to about 34em.

### Signature Patterns

- The lantern schedule: a cut-out four-tier cedar and washi andon (assets/lantern.webp) standing on the washi table beside the room schedule, each row level with its tier and joined to the post by a 1px hairline.
- Tier light as data: a transparent unlit render of the same washi (assets/lantern-unlit.webp) clipped to each tier, its opacity the room's darkness (0, 0.07, 0.44, 0.9).
- Catch: hovering or focusing a tier, its row or Light a room runs a 0.7s flicker on that tier's unlit sheet and settles it lit; the pool of lamplight brightens when the lowest tier lights, and the row's state turns to Lit.
- The dark sill: one room is left in shadow on purpose as the ma interval, named in the schedule and kept dark by a setting.
- Leader-line links: a link draws an 18px lamp-brown hairline before its word on hover and focus, the same line as the schedule callouts.
- The flat cedar pill: the one action per view, 52px, no seam and no shadow, because the lantern is the lamp.

## 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-01a0ecb1-11c3-78a0-8200-1bdcee09a5f9/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a0ecb1-11c3-78a0-8200-1bdcee09a5f9/shadcn.json` (registry theme), `/language/en-01a0ecb1-11c3-78a0-8200-1bdcee09a5f9/shadcn-components.md` (component recipes) and `/language/en-01a0ecb1-11c3-78a0-8200-1bdcee09a5f9/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 Stand the lantern on the washi table in the first view with its schedule beside it and air all round.
- Do Read the rooms off the lantern: a lit tier is a lit room; keep every other figure as quiet flat text.
- Do Leave one room dark on purpose and say so.
- Do Spend lamp brown on Lit and Rising, focus and meters only; make the action a flat cedar pill.
- Do Separate rows by space and value, and keep at most one flat plane in a view.
- Do Write in the house's words: West alcove, lit until ten. Sunset 17:36. Keep the stone sill dark.
- Do Style every control explicitly: square wells one value below the table, pill buttons and segments, round switches.
- Don't Don't show the whole lantern twice on one page; use one tier or a close-up for later moments.
- Don't Don't put a scrim, panel or card over or around the lantern.
- Don't Don't add glow, gradients or grain to the page, buttons or text.
- Don't Don't draw borders, dividers or an accent edge; the only lines are callout hairlines and link leaders.
- Don't Don't use chips or pills for state, or a stat band of big numbers.
- Don't Don't pair a secondary button with the cedar one.
- Don't Don't decorate with Japanese motifs or put emoji or symbol glyphs on buttons.

### Usage Context

Calm tools where one physical thing carries the state: lighting and home control, reading and archive desks, schedules for a house, an inn or a gallery, material catalogues.

### Accessibility

WCAG AA and better on the washi table #EEE8DD: ink #231D17 is 13.7:1, copy #554C41 is 6.9:1, quiet #645A4D is 5.5:1, lamp brown #7E4B1B is 5.9:1, and the cedar button label #F7F3EC on #2E2218 is 14.0:1. Semantic colours clear 4.5:1 on the table and on the plane. Status is a dot plus a word, never colour alone. Tiers, rows and the button are keyboard reachable with role button, and focus shows the lit state with a 2px lamp-brown ring. prefers-reduced-motion drops the flicker and reveals; the state still changes.

## Imagery Direction

### Pairs With

umbra

### Summary

Studio product photographs of the andon and its parts on a pale washi table: oiled Kiso cedar with square joinery, Mino kozo washi lit from inside at 2700 K with the fibres showing, one key light from the top left, brown-tinted shadows falling to the lower right, and a warm pool of lamplight at the foot. One object, photographed as a catalogue piece.

### Subjects

- the four-tier cedar and washi andon
- one lit washi pane in its cedar frame, close
- a cedar mortise joint
- the washi sweep the lantern stands on
- the pool of lamplight on the table

### Usage

The landing hero is the empty washi sweep, photographed with a soft top-left key, with the live cut-out lantern standing on it and the headline beside it on the ground. Later views use parts of the lantern (a lit pane close up, one tier in four states) rather than the whole lantern again. No text, no people, no props, no vignette, no lens flare. From Umbra this direction keeps the single light from the upper left, matte opaque material, warm highlights and one cast shadow in one direction; it softens Umbra's hard low sun into a studio key so the washi reads as lit from inside, and keeps the shade warm brown rather than indigo.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "andon",
  "type": "registry:theme",
  "title": "Andon shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#EEE8DD",
      "foreground": "#231D17",
      "card": "#F7F3EC",
      "card-foreground": "#231D17",
      "popover": "#F7F3EC",
      "popover-foreground": "#231D17",
      "primary": "#231D17",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#645A4D",
      "muted-foreground": "#231D17",
      "accent": "#7E4B1B",
      "accent-foreground": "#ffffff",
      "destructive": "#8C3A2B",
      "border": "#B9AE9E",
      "input": "#B9AE9E",
      "ring": "#7E4B1B",
      "chart-1": "#231D17",
      "chart-2": "#f4f4f5",
      "chart-3": "#7E4B1B",
      "chart-4": "#56633A",
      "chart-5": "#80561A",
      "sidebar": "#F7F3EC",
      "sidebar-foreground": "#231D17",
      "sidebar-primary": "#231D17",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#456068",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#B9AE9E",
      "sidebar-ring": "#7E4B1B",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#231D17",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#7E4B1B",
      "accent-foreground": "#ffffff",
      "destructive": "#8C3A2B",
      "border": "#303642",
      "input": "#303642",
      "ring": "#7E4B1B",
      "chart-1": "#231D17",
      "chart-2": "#f4f4f5",
      "chart-3": "#7E4B1B",
      "chart-4": "#56633A",
      "chart-5": "#80561A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#231D17",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#7E4B1B",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#7E4B1B",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a0ecb1-11c3-78a0-8200-1bdcee09a5f9",
    "slug": "andon",
    "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",
        "bg",
        "border",
        "cedar",
        "copy",
        "error",
        "glow",
        "info",
        "muted",
        "on_accent",
        "shade",
        "success",
        "surface",
        "text",
        "warning",
        "well"
      ],
      "derived": [
        "cedar",
        "copy",
        "note",
        "shade",
        "well"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "label_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "numerals",
        "roles",
        "scale",
        "wordmark_weight"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "ambient",
        "contact",
        "lift",
        "note",
        "pool"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "card_style",
        "material",
        "table",
        "tiers",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "catch",
        "duration",
        "easing",
        "philosophy",
        "pool",
        "reveal"
      ],
      "controls": [
        "button_radius",
        "compact_height",
        "height",
        "well_radius",
        "wells"
      ]
    }
  }
}
```