Inkstone

# Inkstone

## Philosophy

Inkstone is an interface language built on one rule: you get one stroke. Its page is a real sheet of bone paper that you draw on once, hung between a full-bleed indigo ink plate and a staggered three-word spine. Width follows pen speed (slow is heavy, fast is dry), lifting commits the stroke, a persimmon seal lands at the open gap of the ring, and three measured figures (seconds from press to lift, centimetres of line, percent of the circle closed) become the visitor's own. A second press is refused and the sheet nudges until it is re-inked, which wipes the stroke whole. The rest of the page keeps the same discipline: one saturated indigo ground, bone paper and a single persimmon.

### Values

- One stroke per sheet: the sheet takes a single stroke, there is no undo, and re-inking wipes it whole.
- The hand sets the weight: pen speed makes a mark heavy or dry, so the line measures the person who drew it.
- The gap is the signature: the ring is left open on purpose and the persimmon seal lands in it, marking the one committed thing.
- Three plain figures: seconds, centimetres and percent closed say what happened in numbers anyone can read.
- One ground, one paper, one seal: indigo, bone and persimmon carry the page, and every semantic colour stays the size of a word.

### Anti-Values

- A near-black lampblack ground with a vermilion chop and a celadon reference mark: this language moved to indigo and a single persimmon.
- Undo, history or a second try on the sheet; a revision is a new sheet.
- Tracked mono eyebrows, invented plate codes and dates, and a colophon footer as ornament.
- A pill bar for navigation, hairline card frames, a scrim over the hero, and a persimmon button with weak contrast.
- A fake hand-drawn doodle where a measured stroke belongs.

### Visual Character

- A full-bleed hero plate: a bone ensō with an open gap on flat indigo, a persimmon seal dot at the gap, and calm indigo to the left and below for the headline.
- One bone sheet laid on the ground, square and borderless, with a canvas you can draw on once.
- Three measured figures in Hahmlet 800 under the sheet, captioned in Gowun Batang.
- A three-word spine (Load, Hold, Lift) at display size, staggered off a tapered bone brush stroke, with one word in persimmon.
- Bone squares for plates, wells and overlays; persimmon only for the seal, the primary action and the checked state; actions are pills and paper is square.

### Lineage

> Generation 3 of Inkstone, revised in place from arni's approved range 9 take (inkstone-d, 2026-10-07). It keeps the name, the ensō, the single stroke, the brush spine and a seal at the breath gap, and moves the ground from lampblack to saturated indigo.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#213A86` |
| surface | `#182C6C` |
| text | `#F6EFDD` |
| muted | `#C5CBEA` |
| border | `#3D56A8` |
| accent | `#FF8A3D` |
| on_accent | `#101636` |
| success | `#7FD6A8` |
| warning | `#F2C14E` |
| error | `#FF7A6B` |
| info | `#9FB8FF` |
| paper | `#F6EFDD` |
| ink | `#101636` |
| ink_soft | `#3B4272` |
| paper_dim | `#E9E1CC` |

### Derived

- **Tab Hover**: bone at 12% over the ground
- **Quiet Hover**: bone at 14% over the ground
- **Paper Quiet Hover**: ink at 10% over bone
- **Destructive Hover**: error at 16% over the ground
- **Row Hover**: border colour behind a ledger row
- **Refusal Nudge**: translateX -9px at 30%, +7px at 60%, over 350ms, only when motion is allowed
- **Stroke Width**: 28 minus 13 times pen speed in px per ms, never under 2, smoothed at 0.82 old and 0.18 new

### Typography

- **Heading Font**: Hahmlet
- **Body Font**: Gowun Batang
- **Heading Weight**: 800
- **Body Weight**: 400
- **Bold Weight**: 700
- **Button Weight**: 800
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on display, -0.01em on buttons, 0 on body
- **Base Size**: 18px
- **Line Height**: 1.6
- **Scale**: ["14.5px","18px","22px","26px","28px","44px","64px","92px","104px"]
- **Fluid**: Display steps are clamp() values capped at 44, 64, 92 and 104px (the landing hero headline reaches 104px, the embodiment headline 92px); the wordmark is 26px; body floors at 18px and the landing lets it rise to 21px at 1400px and wider.
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Hahmlet:wght@500;800&family=Gowun+Batang:wght@400;700&display=swap

### Radii

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

### Shadows

- **None**: No shadows. Overlays are bone paper laid on the ground and read by value, not by blur.

### Spacing

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

### Surfaces

- **Treatment**: indigo-ground-with-bone-sheets
- **Material**: One saturated indigo ground with a deeper indigo band under it. Bone paper is the only raised-looking material: the drawing sheet, the plates, the input wells, the menu, the dialog and the toast are square bone sheets laid flat on the ground.
- **Card Style**: A card is a bone sheet. It never nests, never has an edge line or a side stripe, and lists, tables and forms sit straight on the ground instead of in a card.
- **Wells**: Input wells are small bone sheets with ink text; a disabled well turns dim bone.
- **Bg Pattern**: none; the ground is flat indigo. The hero plate carries a faint paper fibre inside its raster.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, hairlines or card edges. The only lines are brush strokes: the ring, the tapered spine and the ledger's open rings. Focus is a 3px persimmon outline at 3px offset on the ground and an ink outline on bone.

### Motion

- **Duration**: 150ms
- **Easing**: cubic-bezier(0.2, 0, 0.1, 1)
- **Press**: buttons rise 2px on hover and sink 1px on active; a link's persimmon seal widens from 0 to 8px over 200ms
- **Refusal**: the sheet nudges left 9px then right 7px over 350ms when a second press is made on an inked sheet
- **Philosophy**: Settled first. The page and its example stroke render with no JavaScript; the canvas is the only script, and prefers-reduced-motion removes the nudge, the hover rise and the seal widening.

### Controls

- **Height**: 56px (48 medium, 40 small)
- **Radius**: 9999px for buttons, tabs and the switch; 0 for wells, checkboxes and paper
- **Well Height**: 52px

## Rules

### Composition

- Open the landing with one full-bleed indigo plate: the ring on the right, the headline and one action in the calm left and lower part, with no scrim and nothing laid over the ring.
- Follow the plate with one bone sheet that can really be drawn on: one stroke, no undo, and a Re-ink action that wipes it.
- Hang the three-word spine off a tapered bone brush stroke on the ground, one word per move, staggered, with one word in persimmon.
- Show plates as bone squares on the deeper indigo band, each with a drawn ring, a persimmon seal and a caption that states the measured fact.
- Use no top bar and no card frames; navigation is plain words, and the current word carries a persimmon seal square.

### Hierarchy

- One display line per view in Hahmlet 800 at -0.02em: 56 to 104px for the headline, 72 to 160px for the three spine words, 40 to 64px for the figures.
- Gowun Batang 400 at 18px for prose in two tones, bone for what matters and lavender for the rest; bold 700 only for a name or a number.
- Order comes from size and paper before colour: bone sheets read first, then display type, then the persimmon seal.
- State is a mark and a word: a 12px colour square beside bone text, or an open ring with a persimmon seal at its end.

### Density

Spacious. Sections sit 64 to 120px apart with padding above every title, rows have 18 to 28px of padding, and prose is held to about 34rem; the ring and the sheet get far more room than any text.

### Signature Patterns

- The one stroke: a canvas sheet that takes a single stroke; width is 28 minus 13 times the pen speed in px per ms, never under 2, with dry-brush streaks when it runs fast.
- The seal at the gap: lifting commits the stroke and a 26px persimmon square lands beside the open end of the ring.
- Three measured figures: seconds from press to lift, centimetres of line at screen size, and percent of the circle closed, set in display type.
- The refusal: a second press nudges the sheet 9px left and 7px right over 350ms and changes nothing until Re-ink wipes the sheet.
- The three-word spine: Load, Hold and Lift, staggered off a tapered brush stroke.
- Open rings: progress and plate state are rings that sweep to a value and leave the gap open, with the seal at the end.

## Layout

### Grid

- **Type**: sheet-then-spine landing and a one-column component sheet
- **Max Width**: 1240px content on the embodiment; on the landing only the hero is full width and later sections cap and centre above 1440px
- **Gutter**: 64px desktop, 5vw tablet, 20px phone
- **Column Behavior**: Heads use minmax(0,1fr) minmax(0,1.1fr); the plates use 1.25fr and 1fr with the first plate spanning two rows; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 120px desktop, 64px phone
- **Card Gap**: no card frames; 20 to 40px between plates, 18 to 28px row padding
- **Content Padding**: bone sheets pad 24 to 48px; overlays pad 28 to 48px
- **Approach**: Space and a change of band (ground, deeper indigo, persimmon) separate sections. The ring and the sheet get the most room.

### Density

- **Default**: spacious
- **Spacious**: {"button_height":"56px","input_height":"52px","row_height":"60 to 76px ledger rows"}

### Responsive

Phones (390px) stack to one column; the hero plate becomes a portrait image across the top with the headline beneath it, the sheet stays a full-width drawing surface, the spine words drop to 52 to 84px, plates stack, and ledger columns for paper, time and line are hidden. Tablets (834px) keep the staggered spine and two plate columns with square art. From 1440px the content caps and centres.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 700px
- **Tablet**: 800 to 1100px
- **Desktop**: 1280px
- **Wide**: 1440px
- **Ultrawide**: 2560px

## Guidance

### Do

- Start from the indigo ground and one bone sheet; let the ring be the largest mark on the page.
- Let the sheet take one stroke only, and make a second press visibly refused until Re-ink.
- Spend persimmon on the seal, the one primary action per view and the checked state.
- Show the three measured figures in display type and state the measured fact in every plate caption.
- Keep actions as pills and paper as squares, and style every control explicitly.
- Put small error or accent text on the deeper indigo band, where persimmon reaches 5.5:1 and error 5.1:1.

### Don't

- Don't add undo, history or a second stroke to the sheet.
- Don't draw borders, hairlines, shadows, side stripes or nested cards, and don't put a straight bar on any side of a card.
- Don't set small persimmon or coral text on the main indigo ground, where they fall under 4.5:1.
- Don't add eyebrows, plate codes or dates as ornament, or a pill-bar navigation.
- Don't lay a scrim or type over the ring, and don't use emoji on buttons.
- Don't introduce a second accent; the semantic colours stay word-sized marks.

### Accessibility

Bone on indigo is 9.1:1 and on the deeper band 11.3:1; lavender muted is 6.5:1 on the ground. Ink on bone is 15.4:1 and ink soft on bone 8.3:1. The ink label on persimmon is 7.5:1. Persimmon itself is 4.4:1 on the ground (large text and marks only) and 5.5:1 on the deeper band; coral error text is 4.1:1 on the ground and 5.1:1 on the band, so it sits on the band. Every state pairs a mark with a word. Focus is a 3px persimmon outline at 3px offset (ink on bone). Controls are 40 to 56px tall, 52px for wells. The settled page and an example stroke render with no JavaScript, and prefers-reduced-motion removes the nudge, the rise and the widening seal.

### Usage Context

Creative tools, drawing and handwriting products, calligraphy and print studios, commissions and once-only commitments, and any product that wants a decision to feel weighed and final.

## Imagery Direction

### Pairs With

lampblack

### Art Style Id

en-019efa9f-b8f5-7e61-8716-41aaf9d688c3

### Summary

One bone-white ensō brush circle with an open breath-gap on a flat cobalt-indigo plate with a faint paper fibre, a single persimmon seal dot at the gap, a few ink flecks, and calm empty indigo to the left and below for type. The plate inverts Lampblack: bone ink on indigo, with the same loaded sumi-e mass and dry-brush tail.

### Subjects

- a bone-white ensō with an open breath-gap on flat indigo
- one persimmon seal dot at the gap with a few ink flecks
- a portrait variant with the ring in the top half and calm indigo below
- a single bough or a heron as a plate caption subject

### Usage

One full-bleed hero per landing, painted with var(--hero-image) at background-position right center, so the ring sits on the right and the headline in the calm left. Phones use the portrait plate across the top at 100% width with the copy beneath it. The sheet and the plates are drawn in code (SVG and canvas), not generated.

### Avoid

Type or a scrim over the ring, gradients, a second accent colour, a warm paper ground behind the hero, borders or a frame, and any text, letters or logos in the image.

---
version: "alpha"
name: "Inkstone"
description: "Inkstone is an interface language built on one rule: you get one stroke. Its page is a real sheet of bone paper that you draw on once, hung between a full-bleed indigo ink plate and a staggered three-word spine. Width follows pen speed (..."
colors:
  bg: "#213A86"
  surface: "#182C6C"
  text: "#F6EFDD"
  muted: "#C5CBEA"
  border: "#3D56A8"
  accent: "#FF8A3D"
  on_accent: "#101636"
  success: "#7FD6A8"
  warning: "#F2C14E"
  error: "#FF7A6B"
  info: "#9FB8FF"
  paper: "#F6EFDD"
  ink: "#101636"
  ink_soft: "#3B4272"
  paper_dim: "#E9E1CC"
typography:
  headline-lg:
    fontFamily: "Hahmlet"
    fontSize: "2.197rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Hahmlet"
    fontSize: "1.758rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Gowun Batang"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Gowun Batang"
    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: "120px"
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-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-paper:
    backgroundColor: "{colors.paper}"
  color-reference-ink:
    backgroundColor: "{colors.ink}"
  color-reference-ink_soft:
    backgroundColor: "{colors.ink_soft}"
  color-reference-paper_dim:
    backgroundColor: "{colors.paper_dim}"
  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"
---

# Inkstone

## Overview

Inkstone is an interface language built on one rule: you get one stroke. Its page is a real sheet of bone paper that you draw on once, hung between a full-bleed indigo ink plate and a staggered three-word spine. Width follows pen speed (slow is heavy, fast is dry), lifting commits the stroke, a persimmon seal lands at the open gap of the ring, and three measured figures (seconds from press to lift, centimetres of line, percent of the circle closed) become the visitor's own. A second press is refused and the sheet nudges until it is re-inked, which wipes the stroke whole. The rest of the page keeps the same discipline: one saturated indigo ground, bone paper and a single persimmon.

### Values

- One stroke per sheet: the sheet takes a single stroke, there is no undo, and re-inking wipes it whole.
- The hand sets the weight: pen speed makes a mark heavy or dry, so the line measures the person who drew it.
- The gap is the signature: the ring is left open on purpose and the persimmon seal lands in it, marking the one committed thing.
- Three plain figures: seconds, centimetres and percent closed say what happened in numbers anyone can read.
- One ground, one paper, one seal: indigo, bone and persimmon carry the page, and every semantic colour stays the size of a word.

### Anti-Values

- A near-black lampblack ground with a vermilion chop and a celadon reference mark: this language moved to indigo and a single persimmon.
- Undo, history or a second try on the sheet; a revision is a new sheet.
- Tracked mono eyebrows, invented plate codes and dates, and a colophon footer as ornament.
- A pill bar for navigation, hairline card frames, a scrim over the hero, and a persimmon button with weak contrast.
- A fake hand-drawn doodle where a measured stroke belongs.

### Visual Character

- A full-bleed hero plate: a bone ensō with an open gap on flat indigo, a persimmon seal dot at the gap, and calm indigo to the left and below for the headline.
- One bone sheet laid on the ground, square and borderless, with a canvas you can draw on once.
- Three measured figures in Hahmlet 800 under the sheet, captioned in Gowun Batang.
- A three-word spine (Load, Hold, Lift) at display size, staggered off a tapered bone brush stroke, with one word in persimmon.
- Bone squares for plates, wells and overlays; persimmon only for the seal, the primary action and the checked state; actions are pills and paper is square.

### Lineage

> Generation 3 of Inkstone, revised in place from arni's approved range 9 take (inkstone-d, 2026-10-07). It keeps the name, the ensō, the single stroke, the brush spine and a seal at the breath gap, and moves the ground from lampblack to saturated indigo.

## 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 | `#213A86` |
| surface | `#182C6C` |
| text | `#F6EFDD` |
| muted | `#C5CBEA` |
| border | `#3D56A8` |
| accent | `#FF8A3D` |
| on_accent | `#101636` |
| success | `#7FD6A8` |
| warning | `#F2C14E` |
| error | `#FF7A6B` |
| info | `#9FB8FF` |
| paper | `#F6EFDD` |
| ink | `#101636` |
| ink_soft | `#3B4272` |
| paper_dim | `#E9E1CC` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Hahmlet:wght@500;800&family=Gowun+Batang:wght@400;700&display=swap

- **Headline-Lg**: Hahmlet, 2.197rem, weight 700, line-height 1.1.
- **Headline-Md**: Hahmlet, 1.758rem, weight 600, line-height 1.15.
- **Body-Md**: Gowun Batang, 18px, weight 400, line-height 1.5.
- **Label-Md**: Gowun Batang, 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**: `120px`

### Grid

- **Type**: sheet-then-spine landing and a one-column component sheet
- **Max Width**: 1240px content on the embodiment; on the landing only the hero is full width and later sections cap and centre above 1440px
- **Gutter**: 64px desktop, 5vw tablet, 20px phone
- **Column Behavior**: Heads use minmax(0,1fr) minmax(0,1.1fr); the plates use 1.25fr and 1fr with the first plate spanning two rows; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 120px desktop, 64px phone
- **Card Gap**: no card frames; 20 to 40px between plates, 18 to 28px row padding
- **Content Padding**: bone sheets pad 24 to 48px; overlays pad 28 to 48px
- **Approach**: Space and a change of band (ground, deeper indigo, persimmon) separate sections. The ring and the sheet get the most room.

### Density

- **Default**: spacious
- **Spacious**: {"button_height":"56px","input_height":"52px","row_height":"60 to 76px ledger rows"}

### Responsive

Phones (390px) stack to one column; the hero plate becomes a portrait image across the top with the headline beneath it, the sheet stays a full-width drawing surface, the spine words drop to 52 to 84px, plates stack, and ledger columns for paper, time and line are hidden. Tablets (834px) keep the staggered spine and two plate columns with square art. From 1440px the content caps and centres.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 700px
- **Tablet**: 800 to 1100px
- **Desktop**: 1280px
- **Wide**: 1440px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **None**: No shadows. Overlays are bone paper laid on the ground and read by value, not by blur.

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: indigo-ground-with-bone-sheets
- **Material**: One saturated indigo ground with a deeper indigo band under it. Bone paper is the only raised-looking material: the drawing sheet, the plates, the input wells, the menu, the dialog and the toast are square bone sheets laid flat on the ground.
- **Card Style**: A card is a bone sheet. It never nests, never has an edge line or a side stripe, and lists, tables and forms sit straight on the ground instead of in a card.
- **Wells**: Input wells are small bone sheets with ink text; a disabled well turns dim bone.
- **Bg Pattern**: none; the ground is flat indigo. The hero plate carries a faint paper fibre inside its raster.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, hairlines or card edges. The only lines are brush strokes: the ring, the tapered spine and the ledger's open rings. Focus is a 3px persimmon outline at 3px offset on the ground and an ink outline on bone.

## Components

### Composition

- Open the landing with one full-bleed indigo plate: the ring on the right, the headline and one action in the calm left and lower part, with no scrim and nothing laid over the ring.
- Follow the plate with one bone sheet that can really be drawn on: one stroke, no undo, and a Re-ink action that wipes it.
- Hang the three-word spine off a tapered bone brush stroke on the ground, one word per move, staggered, with one word in persimmon.
- Show plates as bone squares on the deeper indigo band, each with a drawn ring, a persimmon seal and a caption that states the measured fact.
- Use no top bar and no card frames; navigation is plain words, and the current word carries a persimmon seal square.

### Hierarchy

- One display line per view in Hahmlet 800 at -0.02em: 56 to 104px for the headline, 72 to 160px for the three spine words, 40 to 64px for the figures.
- Gowun Batang 400 at 18px for prose in two tones, bone for what matters and lavender for the rest; bold 700 only for a name or a number.
- Order comes from size and paper before colour: bone sheets read first, then display type, then the persimmon seal.
- State is a mark and a word: a 12px colour square beside bone text, or an open ring with a persimmon seal at its end.

### Density

Spacious. Sections sit 64 to 120px apart with padding above every title, rows have 18 to 28px of padding, and prose is held to about 34rem; the ring and the sheet get far more room than any text.

### Signature Patterns

- The one stroke: a canvas sheet that takes a single stroke; width is 28 minus 13 times the pen speed in px per ms, never under 2, with dry-brush streaks when it runs fast.
- The seal at the gap: lifting commits the stroke and a 26px persimmon square lands beside the open end of the ring.
- Three measured figures: seconds from press to lift, centimetres of line at screen size, and percent of the circle closed, set in display type.
- The refusal: a second press nudges the sheet 9px left and 7px right over 350ms and changes nothing until Re-ink wipes the sheet.
- The three-word spine: Load, Hold and Lift, staggered off a tapered brush stroke.
- Open rings: progress and plate state are rings that sweep to a value and leave the gap open, with the seal at the end.

## 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-01a1379a-1b65-7b80-9e91-d0e5efd6cd7c/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a1379a-1b65-7b80-9e91-d0e5efd6cd7c/shadcn.json` (registry theme), `/language/en-01a1379a-1b65-7b80-9e91-d0e5efd6cd7c/shadcn-components.md` (component recipes) and `/language/en-01a1379a-1b65-7b80-9e91-d0e5efd6cd7c/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 Start from the indigo ground and one bone sheet; let the ring be the largest mark on the page.
- Do Let the sheet take one stroke only, and make a second press visibly refused until Re-ink.
- Do Spend persimmon on the seal, the one primary action per view and the checked state.
- Do Show the three measured figures in display type and state the measured fact in every plate caption.
- Do Keep actions as pills and paper as squares, and style every control explicitly.
- Do Put small error or accent text on the deeper indigo band, where persimmon reaches 5.5:1 and error 5.1:1.
- Don't Don't add undo, history or a second stroke to the sheet.
- Don't Don't draw borders, hairlines, shadows, side stripes or nested cards, and don't put a straight bar on any side of a card.
- Don't Don't set small persimmon or coral text on the main indigo ground, where they fall under 4.5:1.
- Don't Don't add eyebrows, plate codes or dates as ornament, or a pill-bar navigation.
- Don't Don't lay a scrim or type over the ring, and don't use emoji on buttons.
- Don't Don't introduce a second accent; the semantic colours stay word-sized marks.

### Accessibility

Bone on indigo is 9.1:1 and on the deeper band 11.3:1; lavender muted is 6.5:1 on the ground. Ink on bone is 15.4:1 and ink soft on bone 8.3:1. The ink label on persimmon is 7.5:1. Persimmon itself is 4.4:1 on the ground (large text and marks only) and 5.5:1 on the deeper band; coral error text is 4.1:1 on the ground and 5.1:1 on the band, so it sits on the band. Every state pairs a mark with a word. Focus is a 3px persimmon outline at 3px offset (ink on bone). Controls are 40 to 56px tall, 52px for wells. The settled page and an example stroke render with no JavaScript, and prefers-reduced-motion removes the nudge, the rise and the widening seal.

### Usage Context

Creative tools, drawing and handwriting products, calligraphy and print studios, commissions and once-only commitments, and any product that wants a decision to feel weighed and final.

## Imagery Direction

### Pairs With

lampblack

### Art Style Id

en-019efa9f-b8f5-7e61-8716-41aaf9d688c3

### Summary

One bone-white ensō brush circle with an open breath-gap on a flat cobalt-indigo plate with a faint paper fibre, a single persimmon seal dot at the gap, a few ink flecks, and calm empty indigo to the left and below for type. The plate inverts Lampblack: bone ink on indigo, with the same loaded sumi-e mass and dry-brush tail.

### Subjects

- a bone-white ensō with an open breath-gap on flat indigo
- one persimmon seal dot at the gap with a few ink flecks
- a portrait variant with the ring in the top half and calm indigo below
- a single bough or a heron as a plate caption subject

### Usage

One full-bleed hero per landing, painted with var(--hero-image) at background-position right center, so the ring sits on the right and the headline in the calm left. Phones use the portrait plate across the top at 100% width with the copy beneath it. The sheet and the plates are drawn in code (SVG and canvas), not generated.

### Avoid

Type or a scrim over the ring, gradients, a second accent colour, a warm paper ground behind the hero, borders or a frame, and any text, letters or logos in the image.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inkstone",
  "type": "registry:theme",
  "title": "Inkstone shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#213A86",
      "foreground": "#F6EFDD",
      "card": "#182C6C",
      "card-foreground": "#F6EFDD",
      "popover": "#182C6C",
      "popover-foreground": "#F6EFDD",
      "primary": "#F6EFDD",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#C5CBEA",
      "muted-foreground": "#F6EFDD",
      "accent": "#FF8A3D",
      "accent-foreground": "#ffffff",
      "destructive": "#FF7A6B",
      "border": "#3D56A8",
      "input": "#3D56A8",
      "ring": "#FF8A3D",
      "chart-1": "#F6EFDD",
      "chart-2": "#f4f4f5",
      "chart-3": "#FF8A3D",
      "chart-4": "#7FD6A8",
      "chart-5": "#F2C14E",
      "sidebar": "#182C6C",
      "sidebar-foreground": "#F6EFDD",
      "sidebar-primary": "#F6EFDD",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#9FB8FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#3D56A8",
      "sidebar-ring": "#FF8A3D",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#F6EFDD",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#FF8A3D",
      "accent-foreground": "#ffffff",
      "destructive": "#FF7A6B",
      "border": "#303642",
      "input": "#303642",
      "ring": "#FF8A3D",
      "chart-1": "#F6EFDD",
      "chart-2": "#f4f4f5",
      "chart-3": "#FF8A3D",
      "chart-4": "#7FD6A8",
      "chart-5": "#F2C14E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#F6EFDD",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#FF8A3D",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#FF8A3D",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a1379a-1b65-7b80-9e91-d0e5efd6cd7c",
    "slug": "inkstone",
    "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",
        "error",
        "info",
        "ink",
        "ink_soft",
        "muted",
        "on_accent",
        "paper",
        "paper_dim",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "derived": [
        "destructive_hover",
        "paper_quiet_hover",
        "quiet_hover",
        "refusal_nudge",
        "row_hover",
        "stroke_width",
        "tab_hover"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "bold_weight",
        "button_weight",
        "fluid",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "material",
        "treatment",
        "wells"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy",
        "press",
        "refusal"
      ],
      "controls": [
        "height",
        "radius",
        "well_height"
      ]
    }
  }
}
```