Shuimo

# Shuimo

## Philosophy

A restoration tool's own painting table. Frame 212 lies on it as a sheet of xuan paper carrying a bamboo ink painting; a Duan inkstone and its ink stick weigh down the sheet's empty corner, and a goat-hair brush waits with its tip in the stone's pond. Approving the frame's last correction is painting it: lift the brush, cross to the far stem, lay its second wash one segment at a time, then watch the ledger's bar fill and its state turn from Low to Wet. This is the faithfully Inspora-rebuilt descendant of Shuimo's ink-wash-animation generation: identity kept, the interface now built around one real, nameable, working object instead of an animated ink-bloom backdrop.

### Values

- one lit, nameable object per view, on a flat table
- material chosen per object: dry stone, wet ink, soaked paper, no material sprayed over the whole page
- depth as a verb, spent only while the brush is lifted
- liubai negative space beside a dense ledger
- the painting itself carries the correction's state, not a separate gauge
- sparse vermilion for the seal, the current tab and the one approved mark

### Anti-Values

- ink-bloom diffusion backgrounds or a blur-to-sharp paint-in reveal on every panel
- borders, grey dividers, or frosted-glass cards
- glow on anything that is not the lit object
- a stat band of three or four big numbers
- the whole sheet, stone or brush shown twice on one page
- IBM Plex Mono caps, decorative timecodes, or any face beyond the two declared

### Visual Character

- Frame 212 lies flat on the #F0EBE2 table as a sheet of #F7F1E8 xuan paper, its own bamboo ink painting visible edge to edge, with a torn right and bottom edge and a hairline warm-brown shadow following that torn edge; nothing else on the page is boxed.
- The Duan inkstone sits tilted -4 degrees on the sheet's empty lower-left corner: a flat, dry, matte grinding face with a small carved crescent pond holding the only ink, glossy and black, its ink stick laid along its lit side.
- The goat-hair brush rests across the stone with its tip in the pond at rest; on hover or focus it lifts (its shadow grows, offsets down-right and softens), crosses to the far bamboo stem, paints the second wash up it one segment at a time with a pause at each node, then flies back and settles.
- The ledger sits straight on the table in three columns (Correction, Wash, Seal): moss bars for kept and wet corrections, an ochre bar for the one still low, and 印 in vermilion marking the seal.
- Type is small and quiet around one big light element: 17px Noto Sans SC for nav, lede and ledger cells, ZCOOL XiaoWei at 21 to 60px with tight tracking for the wordmark and headline, and 印 itself set in ZCOOL XiaoWei.

### Lineage

> A revision of Shuimo (generation 3, previously en-019f8af7-6ee7-7b90-90ab-a651ae100759), rebuilt the Inspora way from the approved elevated direction. It keeps the ink-wash identity, the warm paper ground (#F0EBE2/#F7F1E8), the vermilion seal (#B83A2D), the moss and ochre states, and ZCOOL XiaoWei. It drops the animated ink-bloom diffusion background, the blur-to-sharp paint-in reveal, the paper-wash card panels with their inset washes, and IBM Plex Mono, replacing them with one real object — a Duan inkstone, its ink stick and a goat-hair brush beside Frame 212's own bamboo ink painting — whose brush lifts and paints the correction on hover or focus.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F0EBE2` |
| surface | `#F7F1E8` |
| text | `#1A1612` |
| muted | `#6B5F52` |
| track | `rgba(26,22,18,0.09)` |
| accent | `#B83A2D` |
| accent_2 | `#3F6858` |
| accent_3 | `#6A5A3A` |
| on_accent | `#F7F1E8` |
| success | `#3F6858` |
| warning | `#6A5A3A` |
| error | `#B83A2D` |
| info | `#4B5A52` |
| shadow_tint | `#5C4226` |

### Derived

- **Track**: color-mix(in srgb, var(--text) 9%, transparent)
- **Shadow Contact**: color-mix(in srgb, var(--shadow-tint) 26%, transparent)
- **Shadow Ambient**: color-mix(in srgb, var(--shadow-tint) 12%, transparent)
- **Note**: The stone and brush cutouts carry their own baked warm shadow as an alpha layer, so a palette swap changes the table, the ink and the accents without breaking the object's lighting.

### Typography

- **Heading Font**: ZCOOL XiaoWei
- **Body Font**: Noto Sans SC
- **Mono Font**: Noto Sans SC
- **Heading Weight**: 400
- **Body Weight**: 400
- **Button Weight**: 500
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on the wordmark; -0.035em on the headline; 0 on body
- **Line Height**: 1.5
- **Base Size**: 17px
- **Scale**: ["14.5px","17px","21px","28px","40px","60px"]
- **Roles**: {"display":"ZCOOL XiaoWei 400: wordmark, headline, section titles, and 印 (the one big light element)","body":"Noto Sans SC 400 at 17px for nav, eyebrow, lede, captions and ledger cells; 500 only on button labels","mono":"No mono face. Percentages and states are Noto Sans SC in sentence case; the old IBM Plex Mono caps are dropped as over-used."}
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500&family=ZCOOL+XiaoWei&display=swap

### Radii

- **None**: 0px
- **Full**: 9999px
- **Note**: One radius degree: 0 on every rectangle (the page has none, since nothing is boxed), 9999px on the button and the ledger bars. The sheet, stone and brush keep their own generated silhouettes.

### Shadows

- **Sheet**: 0 1px 1px rgba(92,66,38,.26), 2px 6px 7px rgba(110,80,44,.12)
- **Object**: baked into the inkstone and brush cutouts as a warm-brown alpha layer from the source render, so it darkens the table and the sheet's corner alike
- **Brush Lift**: a CSS shadow copy of the brush's own silhouette (masked from assets/brush.webp), tight at rest and grown, offset down-right and softened while the brush is lifted
- **Note**: One key light from the top left. Two tinted layers, contact and ambient, always warm brown, never grey; nothing else on the page casts a shadow.

### Spacing

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

### Surfaces

- **Treatment**: one object on a flat paper table
- **Material**: Frame 212 (a sheet of xuan paper carrying its own bamboo ink painting) lies on the table; a Duan inkstone with its ink stick weighs its empty lower-left corner, and a goat-hair brush rests with its tip in the inkstone's pond. Generated studio renders, cut out and lit to match, are the only raised or lit things in any view. Everything else is flat colour.
- **Card Style**: No cards or panels anywhere. Content sits straight on the table, separated by space and the value of the type; a paper-toned #F7F1E8 well appears only inside a form control or an open overlay, so a view carries at most one filled surface.
- **Table**: The page ground #F0EBE2 is the table Frame 212 lies on. The sheet is the surface token #F7F1E8, so it reads as paper on paper by value, lifted only by a hairline warm-brown shadow that follows its torn right and bottom edge.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders anywhere. Separation is by paper elevation (the sheet's own hairline shadow), by space, and by the value of ink against paper.

### Motion

- **Duration**: 3.4s brush stroke; 0.9s ledger fill
- **Easing**: linear() with a hold at each bamboo node for the stroke; cubic-bezier(.23,1,.32,1) for the ledger bar
- **Philosophy**: Motion is a physical verb: lift the brush from the inkstone's pond, cross to the far bamboo stem, paint its second wash one segment at a time with a pause at each node, then fly back and settle in the pond; a beat later the ledger's last bar fills to 91% and Low turns to Wet. The settled state (first wash only, bar at 54%, Low) is the default and renders with no JavaScript; prefers-reduced-motion shows the washed stem, the full bar and Wet at once, with no stroke and no flight.

### Controls

- **Height**: 48px
- **Radius**: 9999px
- **Wells**: #F7F1E8 paper tone inside a control, #F0EBE2 table outside it

## Rules

### Composition

- Give every view one object moment: Frame 212 with its inkstone and brush on the table, or the sheet alone as a later view's figure. Everything else in that view stays flat.
- Lay the sheet on the table with air on every side and its own hairline warm shadow following the torn right and bottom edge; the stone and ink stick weigh its empty lower-left corner, the brush rests with its tip in the pond.
- Order a page like a painting table: the eyebrow and headline, the lede and one action on the ground beside the sheet, then the correction ledger.
- Separate by space and value, never by boxes: the ledger sits straight on the table; a paper-toned well appears only inside a form control or an open overlay. No borders, no rules, no cards.
- Show the whole sheet once per page; later views take another part of the same painting, such as the far stem alone as a headline figure.
- Keep vermilion to the seal mark 印, the current tab, and one approved correction per view.

### Hierarchy

- The headline and the sheet are the only large things; the mid-tier (ledes, captions, ledger labels) stays close to body scale.
- ZCOOL XiaoWei 400 for the wordmark, headline (40 to 60px) and 印 — the one big light element.
- Noto Sans SC 400 at 17px for nav, eyebrow, lede, ledger heads, states and the button, all in sentence case; 500 only on the button label.
- Vermilion marks only 印, the current tab and one action per view; moss and ochre mark the ledger's Wet and Low states.

### Density

Calm painting-table density: one object and a short headline per view, generous liubai beside a dense three-column ledger, 48px controls, and rows parted by space rather than rules.

### Signature Patterns

- Frame 212: a generated ink painting of a bamboo spray on xuan paper (assets/frame212.webp), lying flat on the table with a hairline warm drop-shadow following its torn right and bottom edge, its far stem still in a pale first wash.
- The Duan inkstone: a generated studio render (assets/inkstone.webp), a flat dry grinding face with a small carved pond holding the only ink, its ink stick beside it, tilted -4 degrees at the sheet's empty corner, lit from the top left with its own baked warm shadow.
- The goat-hair brush: a generated studio render (assets/brush.webp), tip resting in the inkstone's pond at rest, with a CSS shadow copy (a masked silhouette of the same image) that grows and softens as the brush lifts.
- Paint: hover or focus the hit area over the stone and brush, and the brush lifts out of the pond, crosses to the far stem, paints the second wash (assets/second-wash.webp) up the stem one segment at a time with a pause at each node, then flies back and settles; a beat later the ledger's last bar fills from 54% to 91% and Low turns to Wet. The stroke appears exactly under the tip.
- The correction ledger: three columns straight on the table (Correction, Wash, Seal), moss and ochre bars, 印 marking the one approved correction.
- Reduced motion: the brush stays in the pond, and the washed stem, the full bar and Wet appear at once, with no stroke and no flight.

## Layout

### Grid

- **Type**: object-first product page
- **Max Width**: 1180px content, 1320px from 1800px wide
- **Gutter**: 24px desktop, 16px phone
- **Column Behavior**: Beside the sheet, a two-column row (lede and action, then a caption) on minmax(0,1fr) minmax(0,1fr); the ledger runs three columns, minmax(0,1fr) 20% 7%. Every grid child carries min-width:0.

### Whitespace

- **Section Gap**: 112 to 128px desktop, 64 to 88px phone
- **Card Gap**: no cards; ledger rows part by 16 to 24px of padding, groups by 48 to 88px
- **Content Padding**: content sits on the table, aligned to the grid edge; an open overlay pads 28 to 32px
- **Approach**: The table is empty space by design: the sheet needs air on every side, and each view carries one focal point beside generous liubai.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"48px","input_height":"48px","row_height":"48 to 56px ledger rows with 16px gaps"}

### Responsive

Phones (390px) stack to one column, hide the secondary nav link, and let the sheet take the full width with the stone and brush scaled to match. Tablets (768 to 1100px) keep the two-column row and the three-column ledger. Ultra-wide caps and centres the content; only the landing hero spans the full width.

### Breakpoints

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

## Guidance

### Do

- Put Frame 212, the inkstone and the brush at the centre of the first view, on the flat table with air all round.
- Read the correction's state off the painting and the ledger bar; keep other figures as quiet flat text.
- Spend vermilion on 印, the current tab and one action per view only.
- Separate rows by space and value, and keep at most one filled surface in a view.
- Write in the restoration room's own words: Reel 4, bamboo grove; Frame 212; Approve reel 4.
- Style every control explicitly: flat 48px paper wells with a 9999px radius, a vermilion focus ring.

### Don't

- Don't bring back the ink-bloom diffusion background or a blur-to-sharp reveal on every panel.
- Don't frame the ledger or any list in a card, panel or frosted-glass frame.
- Don't make glow on anything that is not the lit object.
- Don't add a second hue beyond vermilion, moss and ochre.
- Don't use borders, rules, dot fields or grain.
- Don't show the whole sheet, stone or brush twice on one page, or pair a second button with the vermilion action; use a quiet text link.
- Don't put emoji or symbol glyphs on buttons.

### Accessibility

WCAG AA and better on the paper table: ink #1A1612 on #F0EBE2 is 15.1:1 and on #F7F1E8 is 14.6:1; muted #6B5F52 clears 5.3:1 on both; #F7F1E8 on vermilion #B83A2D is 5.9:1; moss #3F6858 on #F0EBE2 is 5.7:1 and ochre #6A5A3A is 5.6:1. Focus is a visible 3px vermilion outline at 3px offset on every control. The sheet, stone and brush carry a single descriptive aria-label each; the hit area names the action ("Lift the brush and paint the second wash"). prefers-reduced-motion skips the stroke, the flight and the bar tween; the corrected state still shows.

### Usage Context

Film-restoration tools, archival correction ledgers, meditative craft and painting-adjacent products, gallery interpretation systems.

## Imagery Direction

### Pairs With

xieyi

### Summary

Generated studio renders and one ink painting, all cut out and lit to match a flat warm-paper table: a Duan inkstone with its ink stick, a goat-hair brush, and a bamboo spray painted in ink on xuan paper. One soft key light from the top left, warm-brown tinted shadows baked into each cutout, no gradients or glow beyond the object's own lit surface.

### Subjects

- the Duan inkstone with its carved ink pond and ink stick
- a goat-hair calligraphy brush, tip in wet ink
- a bamboo spray painted in ink on xuan paper, in the manner of Wu Zhen and Zheng Banqiao
- the second wash alone, a pale stem darkening under the brush
- xuan paper's torn, translucent edge

### Usage

This direction uses Xieyi's Chinese freehand ink-wash medium and technique directly: the landing hero is the empty painting table itself (the sheet, the stone and the ink stick, softly lit from the top left, before the brush arrives), and the live cut-out brush is set into it at 44cqi long, about 1.6 times the stone. Inside pages reuse the same painting at another moment (the far stem alone) rather than a new photograph. No text, no readable characters beyond 印, no people, no bloom.

---
version: "alpha"
name: "Shuimo"
description: "A restoration tool's own painting table. Frame 212 lies on it as a sheet of xuan paper carrying a bamboo ink painting; a Duan inkstone and its ink stick weigh down the sheet's empty corner, and a goat-hair brush waits with its tip in the..."
colors:
  bg: "#F0EBE2"
  surface: "#F7F1E8"
  text: "#1A1612"
  muted: "#6B5F52"
  accent: "#B83A2D"
  accent_2: "#3F6858"
  accent_3: "#6A5A3A"
  on_accent: "#F7F1E8"
  success: "#3F6858"
  warning: "#6A5A3A"
  error: "#B83A2D"
  info: "#4B5A52"
  shadow_tint: "#5C4226"
typography:
  headline-lg:
    fontFamily: "ZCOOL XiaoWei"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "ZCOOL XiaoWei"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Noto Sans SC"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Noto Sans SC"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  full: "9999px"
  note: "0px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"
  4xl: "96px"
  step-8: "128px"
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-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_3:
    backgroundColor: "{colors.accent_3}"
  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-shadow_tint:
    backgroundColor: "{colors.shadow_tint}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    height: "44px"
---

# Shuimo

## Overview

A restoration tool's own painting table. Frame 212 lies on it as a sheet of xuan paper carrying a bamboo ink painting; a Duan inkstone and its ink stick weigh down the sheet's empty corner, and a goat-hair brush waits with its tip in the stone's pond. Approving the frame's last correction is painting it: lift the brush, cross to the far stem, lay its second wash one segment at a time, then watch the ledger's bar fill and its state turn from Low to Wet. This is the faithfully Inspora-rebuilt descendant of Shuimo's ink-wash-animation generation: identity kept, the interface now built around one real, nameable, working object instead of an animated ink-bloom backdrop.

### Values

- one lit, nameable object per view, on a flat table
- material chosen per object: dry stone, wet ink, soaked paper, no material sprayed over the whole page
- depth as a verb, spent only while the brush is lifted
- liubai negative space beside a dense ledger
- the painting itself carries the correction's state, not a separate gauge
- sparse vermilion for the seal, the current tab and the one approved mark

### Anti-Values

- ink-bloom diffusion backgrounds or a blur-to-sharp paint-in reveal on every panel
- borders, grey dividers, or frosted-glass cards
- glow on anything that is not the lit object
- a stat band of three or four big numbers
- the whole sheet, stone or brush shown twice on one page
- IBM Plex Mono caps, decorative timecodes, or any face beyond the two declared

### Visual Character

- Frame 212 lies flat on the #F0EBE2 table as a sheet of #F7F1E8 xuan paper, its own bamboo ink painting visible edge to edge, with a torn right and bottom edge and a hairline warm-brown shadow following that torn edge; nothing else on the page is boxed.
- The Duan inkstone sits tilted -4 degrees on the sheet's empty lower-left corner: a flat, dry, matte grinding face with a small carved crescent pond holding the only ink, glossy and black, its ink stick laid along its lit side.
- The goat-hair brush rests across the stone with its tip in the pond at rest; on hover or focus it lifts (its shadow grows, offsets down-right and softens), crosses to the far bamboo stem, paints the second wash up it one segment at a time with a pause at each node, then flies back and settles.
- The ledger sits straight on the table in three columns (Correction, Wash, Seal): moss bars for kept and wet corrections, an ochre bar for the one still low, and 印 in vermilion marking the seal.
- Type is small and quiet around one big light element: 17px Noto Sans SC for nav, lede and ledger cells, ZCOOL XiaoWei at 21 to 60px with tight tracking for the wordmark and headline, and 印 itself set in ZCOOL XiaoWei.

### Lineage

> A revision of Shuimo (generation 3, previously en-019f8af7-6ee7-7b90-90ab-a651ae100759), rebuilt the Inspora way from the approved elevated direction. It keeps the ink-wash identity, the warm paper ground (#F0EBE2/#F7F1E8), the vermilion seal (#B83A2D), the moss and ochre states, and ZCOOL XiaoWei. It drops the animated ink-bloom diffusion background, the blur-to-sharp paint-in reveal, the paper-wash card panels with their inset washes, and IBM Plex Mono, replacing them with one real object — a Duan inkstone, its ink stick and a goat-hair brush beside Frame 212's own bamboo ink painting — whose brush lifts and paints the correction on hover or focus.

## 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 | `#F0EBE2` |
| surface | `#F7F1E8` |
| text | `#1A1612` |
| muted | `#6B5F52` |
| accent | `#B83A2D` |
| accent_2 | `#3F6858` |
| accent_3 | `#6A5A3A` |
| on_accent | `#F7F1E8` |
| success | `#3F6858` |
| warning | `#6A5A3A` |
| error | `#B83A2D` |
| info | `#4B5A52` |
| shadow_tint | `#5C4226` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500&family=ZCOOL+XiaoWei&display=swap

- **Headline-Lg**: ZCOOL XiaoWei, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: ZCOOL XiaoWei, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Noto Sans SC, 17px, weight 400, line-height 1.5.
- **Label-Md**: Noto Sans SC, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `16px`
- **Lg**: `24px`
- **Xl**: `32px`
- **2xl**: `48px`
- **3xl**: `64px`
- **4xl**: `96px`
- **Step-8**: `128px`

### Grid

- **Type**: object-first product page
- **Max Width**: 1180px content, 1320px from 1800px wide
- **Gutter**: 24px desktop, 16px phone
- **Column Behavior**: Beside the sheet, a two-column row (lede and action, then a caption) on minmax(0,1fr) minmax(0,1fr); the ledger runs three columns, minmax(0,1fr) 20% 7%. Every grid child carries min-width:0.

### Whitespace

- **Section Gap**: 112 to 128px desktop, 64 to 88px phone
- **Card Gap**: no cards; ledger rows part by 16 to 24px of padding, groups by 48 to 88px
- **Content Padding**: content sits on the table, aligned to the grid edge; an open overlay pads 28 to 32px
- **Approach**: The table is empty space by design: the sheet needs air on every side, and each view carries one focal point beside generous liubai.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"48px","input_height":"48px","row_height":"48 to 56px ledger rows with 16px gaps"}

### Responsive

Phones (390px) stack to one column, hide the secondary nav link, and let the sheet take the full width with the stone and brush scaled to match. Tablets (768 to 1100px) keep the two-column row and the three-column ledger. Ultra-wide caps and centres the content; only the landing hero spans the full width.

### Breakpoints

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

## Elevation & Depth

### Shadows

- **Sheet**: 0 1px 1px rgba(92,66,38,.26), 2px 6px 7px rgba(110,80,44,.12)
- **Object**: baked into the inkstone and brush cutouts as a warm-brown alpha layer from the source render, so it darkens the table and the sheet's corner alike
- **Brush Lift**: a CSS shadow copy of the brush's own silhouette (masked from assets/brush.webp), tight at rest and grown, offset down-right and softened while the brush is lifted
- **Note**: One key light from the top left. Two tinted layers, contact and ambient, always warm brown, never grey; nothing else on the page casts a shadow.

## Shapes

### Rounded

- **None**: `0px`
- **Full**: `9999px`
- **Note**: `0px`

### Surfaces

- **Treatment**: one object on a flat paper table
- **Material**: Frame 212 (a sheet of xuan paper carrying its own bamboo ink painting) lies on the table; a Duan inkstone with its ink stick weighs its empty lower-left corner, and a goat-hair brush rests with its tip in the inkstone's pond. Generated studio renders, cut out and lit to match, are the only raised or lit things in any view. Everything else is flat colour.
- **Card Style**: No cards or panels anywhere. Content sits straight on the table, separated by space and the value of the type; a paper-toned #F7F1E8 well appears only inside a form control or an open overlay, so a view carries at most one filled surface.
- **Table**: The page ground #F0EBE2 is the table Frame 212 lies on. The sheet is the surface token #F7F1E8, so it reads as paper on paper by value, lifted only by a hairline warm-brown shadow that follows its torn right and bottom edge.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders anywhere. Separation is by paper elevation (the sheet's own hairline shadow), by space, and by the value of ink against paper.

## Components

### Composition

- Give every view one object moment: Frame 212 with its inkstone and brush on the table, or the sheet alone as a later view's figure. Everything else in that view stays flat.
- Lay the sheet on the table with air on every side and its own hairline warm shadow following the torn right and bottom edge; the stone and ink stick weigh its empty lower-left corner, the brush rests with its tip in the pond.
- Order a page like a painting table: the eyebrow and headline, the lede and one action on the ground beside the sheet, then the correction ledger.
- Separate by space and value, never by boxes: the ledger sits straight on the table; a paper-toned well appears only inside a form control or an open overlay. No borders, no rules, no cards.
- Show the whole sheet once per page; later views take another part of the same painting, such as the far stem alone as a headline figure.
- Keep vermilion to the seal mark 印, the current tab, and one approved correction per view.

### Hierarchy

- The headline and the sheet are the only large things; the mid-tier (ledes, captions, ledger labels) stays close to body scale.
- ZCOOL XiaoWei 400 for the wordmark, headline (40 to 60px) and 印 — the one big light element.
- Noto Sans SC 400 at 17px for nav, eyebrow, lede, ledger heads, states and the button, all in sentence case; 500 only on the button label.
- Vermilion marks only 印, the current tab and one action per view; moss and ochre mark the ledger's Wet and Low states.

### Density

Calm painting-table density: one object and a short headline per view, generous liubai beside a dense three-column ledger, 48px controls, and rows parted by space rather than rules.

### Signature Patterns

- Frame 212: a generated ink painting of a bamboo spray on xuan paper (assets/frame212.webp), lying flat on the table with a hairline warm drop-shadow following its torn right and bottom edge, its far stem still in a pale first wash.
- The Duan inkstone: a generated studio render (assets/inkstone.webp), a flat dry grinding face with a small carved pond holding the only ink, its ink stick beside it, tilted -4 degrees at the sheet's empty corner, lit from the top left with its own baked warm shadow.
- The goat-hair brush: a generated studio render (assets/brush.webp), tip resting in the inkstone's pond at rest, with a CSS shadow copy (a masked silhouette of the same image) that grows and softens as the brush lifts.
- Paint: hover or focus the hit area over the stone and brush, and the brush lifts out of the pond, crosses to the far stem, paints the second wash (assets/second-wash.webp) up the stem one segment at a time with a pause at each node, then flies back and settles; a beat later the ledger's last bar fills from 54% to 91% and Low turns to Wet. The stroke appears exactly under the tip.
- The correction ledger: three columns straight on the table (Correction, Wash, Seal), moss and ochre bars, 印 marking the one approved correction.
- Reduced motion: the brush stays in the pond, and the washed stem, the full bar and Wet appear at once, with no stroke and no flight.

## 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-01a0ecb5-a469-7bf0-8494-89670d087768/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a0ecb5-a469-7bf0-8494-89670d087768/shadcn.json` (registry theme), `/language/en-01a0ecb5-a469-7bf0-8494-89670d087768/shadcn-components.md` (component recipes) and `/language/en-01a0ecb5-a469-7bf0-8494-89670d087768/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 Put Frame 212, the inkstone and the brush at the centre of the first view, on the flat table with air all round.
- Do Read the correction's state off the painting and the ledger bar; keep other figures as quiet flat text.
- Do Spend vermilion on 印, the current tab and one action per view only.
- Do Separate rows by space and value, and keep at most one filled surface in a view.
- Do Write in the restoration room's own words: Reel 4, bamboo grove; Frame 212; Approve reel 4.
- Do Style every control explicitly: flat 48px paper wells with a 9999px radius, a vermilion focus ring.
- Don't Don't bring back the ink-bloom diffusion background or a blur-to-sharp reveal on every panel.
- Don't Don't frame the ledger or any list in a card, panel or frosted-glass frame.
- Don't Don't make glow on anything that is not the lit object.
- Don't Don't add a second hue beyond vermilion, moss and ochre.
- Don't Don't use borders, rules, dot fields or grain.
- Don't Don't show the whole sheet, stone or brush twice on one page, or pair a second button with the vermilion action; use a quiet text link.
- Don't Don't put emoji or symbol glyphs on buttons.

### Accessibility

WCAG AA and better on the paper table: ink #1A1612 on #F0EBE2 is 15.1:1 and on #F7F1E8 is 14.6:1; muted #6B5F52 clears 5.3:1 on both; #F7F1E8 on vermilion #B83A2D is 5.9:1; moss #3F6858 on #F0EBE2 is 5.7:1 and ochre #6A5A3A is 5.6:1. Focus is a visible 3px vermilion outline at 3px offset on every control. The sheet, stone and brush carry a single descriptive aria-label each; the hit area names the action ("Lift the brush and paint the second wash"). prefers-reduced-motion skips the stroke, the flight and the bar tween; the corrected state still shows.

### Usage Context

Film-restoration tools, archival correction ledgers, meditative craft and painting-adjacent products, gallery interpretation systems.

## Imagery Direction

### Pairs With

xieyi

### Summary

Generated studio renders and one ink painting, all cut out and lit to match a flat warm-paper table: a Duan inkstone with its ink stick, a goat-hair brush, and a bamboo spray painted in ink on xuan paper. One soft key light from the top left, warm-brown tinted shadows baked into each cutout, no gradients or glow beyond the object's own lit surface.

### Subjects

- the Duan inkstone with its carved ink pond and ink stick
- a goat-hair calligraphy brush, tip in wet ink
- a bamboo spray painted in ink on xuan paper, in the manner of Wu Zhen and Zheng Banqiao
- the second wash alone, a pale stem darkening under the brush
- xuan paper's torn, translucent edge

### Usage

This direction uses Xieyi's Chinese freehand ink-wash medium and technique directly: the landing hero is the empty painting table itself (the sheet, the stone and the ink stick, softly lit from the top left, before the brush arrives), and the live cut-out brush is set into it at 44cqi long, about 1.6 times the stone. Inside pages reuse the same painting at another moment (the far stem alone) rather than a new photograph. No text, no readable characters beyond 印, no people, no bloom.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shuimo",
  "type": "registry:theme",
  "title": "Shuimo shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F0EBE2",
      "foreground": "#1A1612",
      "card": "#F7F1E8",
      "card-foreground": "#1A1612",
      "popover": "#F7F1E8",
      "popover-foreground": "#1A1612",
      "primary": "#1A1612",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6B5F52",
      "muted-foreground": "#1A1612",
      "accent": "#B83A2D",
      "accent-foreground": "#ffffff",
      "destructive": "#B83A2D",
      "border": "#e4e4e7",
      "input": "#e4e4e7",
      "ring": "#B83A2D",
      "chart-1": "#1A1612",
      "chart-2": "#f4f4f5",
      "chart-3": "#B83A2D",
      "chart-4": "#3F6858",
      "chart-5": "#6A5A3A",
      "sidebar": "#F7F1E8",
      "sidebar-foreground": "#1A1612",
      "sidebar-primary": "#1A1612",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#4B5A52",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#e4e4e7",
      "sidebar-ring": "#B83A2D",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1A1612",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B83A2D",
      "accent-foreground": "#ffffff",
      "destructive": "#B83A2D",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B83A2D",
      "chart-1": "#1A1612",
      "chart-2": "#f4f4f5",
      "chart-3": "#B83A2D",
      "chart-4": "#3F6858",
      "chart-5": "#6A5A3A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1A1612",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B83A2D",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B83A2D",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a0ecb5-a469-7bf0-8494-89670d087768",
    "slug": "shuimo",
    "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_2",
        "accent_3",
        "bg",
        "error",
        "info",
        "muted",
        "on_accent",
        "shadow_tint",
        "success",
        "surface",
        "text",
        "track",
        "warning"
      ],
      "derived": [
        "note",
        "shadow_ambient",
        "shadow_contact",
        "track"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "roles",
        "scale"
      ],
      "radii": [
        "full",
        "none",
        "note"
      ],
      "shadows": [
        "brush_lift",
        "note",
        "object",
        "sheet"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "card_style",
        "material",
        "table",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "controls": [
        "height",
        "radius",
        "wells"
      ]
    }
  }
}
```