Tiaofu

# Tiaofu

## Philosophy

Running-column calligraphy given to product surfaces. The interface is hung like a vertical scroll of registers — content reads down each ruled column, calm and ordered — then a single flying stroke is dragged across the grid at full speed and the page goes kinetic. The identity lives in that tension: the disciplined register scaffold and the one gesture allowed to break it. Reimagined from the Kuangcao Kinetic brief on raw light paper rather than ink-dark drama.

### Values

- Order first, then the one decisive gesture
- Vertical registers read top to bottom, like a hanging scroll
- Raw warm paper as ground — the ink and the seal carry the gravity
- The cinnabar seal reserved for the single irreversible action
- Living negative space (liubai) as structure, not filler
- Speed and confidence in the crossing stroke
- Brushed split-bristle rules, never flat grey lines

### Anti-Values

- Defaulting to a white or a dark ground
- Accent edges trimmed onto every card
- The cursive hand bleeding into body paragraphs
- Boxed-in nav pills and nested cards as chrome
- The crossing stroke repeated until it is wallpaper

### Visual Character

- background:#EDE6D6; color:#1B1712; font-family:'Liu Jian Mao Cao',serif
- register opened by a 3px vertical ink-rail; content reads downward
- one diagonal SVG flying stroke stroke:var(--accent) crosses a register field, drawn on load
- active surface carries box-shadow:inset 4px 0 0 #C1352B (the seal-bar)
- primary action carries box-shadow:4px 4px 0 rgba(193,53,43,.22) (the stamp)

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#EDE6D6` |
| surface | `#F5F0E3` |
| surface_2 | `#E3DAC6` |
| text | `#1B1712` |
| muted | `#6E6553` |
| border | `#1B1712` |
| accent | `#C1352B` |
| on_accent | `#F5F0E3` |
| jade | `#2F5D4E` |
| gold | `#9A7B33` |
| rail | `#1B1712` |
| success | `#2F5D4E` |
| warning | `#9A7B33` |
| error | `#C1352B` |
| info | `#3F5A6B` |

### Typography

- **Base Size**: 17px
- **Body Font**: Noto Serif SC
- **Heading Font**: Liu Jian Mao Cao
- **Mono Font**: Space Mono
- **Heading Weight**: 400
- **Heading Transform**: none
- **Letter Spacing**: -0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Noto+Serif+SC:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap

### Radii

- **None**: 0
- **Soft**: 16px
- **Card**: 24px
- **Pill**: 9999px

### Shadows

- **Flat**: 0 1px 0 rgba(27,23,18,.12)
- **Seal**: 4px 4px 0 rgba(193,53,43,.22)
- **Lift**: 0 14px 36px rgba(27,23,18,.14)

### Spacing

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

### Surfaces

- **Paper**: #EDE6D6
- **Panel**: #F5F0E3
- **Channel**: #E3DAC6
- **Paper Grain**: radial-gradient(circle at 22% 18%, rgba(27,23,18,.035) .8px, transparent 1.4px)

### Borders

- **Policy**: none-as-chrome
- **Ink Rail**: 3px solid #1B1712
- **Seal Bar**: inset 4px 0 0 #C1352B
- **Underline Ink**: inset 0 -2px 0 #1B1712
- **Focus Ring**: inset 0 0 0 2px #C1352B

### Motion

- **Fast**: 150ms cubic-bezier(0.2,0,0,1)
- **Base**: 200ms cubic-bezier(0.2,0,0,1)
- **Stroke Draw**: 1100ms cubic-bezier(0.16,0.7,0.2,1)
- **Reduced Motion**: respected

## Rules

### Composition

Right-anchored vertical-column system. Surfaces are grids of equal-measure registers ruled by thin ink-rails; content reads top to bottom. Sections open with a vertical ink-rail and a vertical register tag (壹 貳 叁). The masthead pairs a horizontal headline with a vertical CJK column read downward.

### Hierarchy

Dramatic size contrast. The running-cursive display hand (Liu Jian Mao Cao) dominates headings, big numerals, and a table's leading cell; Noto Serif SC carries all reading. Cinnabar marks the one primary action, active register, and focus ring; pine-green and aged gold answer it quietly.

### Density

Medium-high with generous vertical rhythm — tight within a register group, generous between. Negative space is a register left blank on purpose.

### Signature

1) Vertical register scaffold: equal columns opened by 3px ink-rails, content read downward. 2) The crossing stroke: one diagonal cinnabar flying stroke slashing across a register field, drawn on load. 3) The seal, placed: a 4px cinnabar bar on the one active surface. 4) Brushed split-bristle dividers, never flat rules. 5) Living margin (liubai) as structural negative space.

## Layout

### Grid

asymmetric right-anchored vertical-register columns; minmax(0,1fr) tracks with min-width:0 children; contained content capped at 1280px

### Whitespace

generous; section gap ~88px, register gap none (ink-rail separation), always pad above titles

### Density

medium-high

### Responsive

single column on mobile; non-essential nav links and table columns hidden; vertical headline column folds to horizontal; only the full-bleed hero spans 100vw; contained content centred on ultra-wide

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1200px
- **Ultrawide**: 2560px

## Guidance

### Do

- Build surfaces as vertical registers ruled by ink-rails; read content downward
- Keep the ground warm raw paper (#EDE6D6); never white, never dark
- Reserve the crossing stroke and the cinnabar seal-bar for meaning, never edge-trim
- Use the running-cursive hand for headings and big numerals only
- Treat blank registers as structural negative space
- Use brushed split-bristle bands for dividers; keep motion fast and gestural

### Don't

- Never default to a white or dark ground
- Never put an accent edge on every card or box the nav into a pill
- Never apply the cursive hand to body paragraphs
- Never use flat grey rule-lines
- Never repeat the crossing stroke until it is wallpaper — one per field
- Never use more than three accents in one view

### Accessibility

Pine-ink #1B1712 on raw-paper #EDE6D6 reaches ~13:1 (WCAG AAA). Body in Noto Serif SC at 17px for CJK and Latin readability. Interactive elements take a 2px cinnabar focus ring. The crossing stroke and rails are decorative — content stays in normal flow; the fully-settled page renders with no JavaScript. Motion respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

feibai-brushwork

### Summary

All imagery uses the Feibai Brushwork style: forms built from a few sweeping single-gesture ink brushstrokes, dry-brush flying-white striations, a small cinnabar seal-mark and sparse gold flecks. Tiaofu composes them as a vertical cursive column crossed by one diagonal flying stroke on warm raw light paper, with living negative space for a headline overlay.

### Subjects

- vertical cursive calligraphic column
- single diagonal flying stroke crossing the column
- ink-on-raw-paper abstraction
- feibai flying-white sweep

### Usage

Landing hero is a full-bleed feibai vertical column with a crossing diagonal stroke and breathing negative space on the left for the headline overlay; feature images reuse the hero gesture. Never illustrate the thumbnail — the thumbnail is an embodiment screenshot.

---
version: "alpha"
name: "Tiaofu"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#EDE6D6"
  surface: "#F5F0E3"
  surface_2: "#E3DAC6"
  text: "#1B1712"
  muted: "#6E6553"
  border: "#1B1712"
  accent: "#C1352B"
  on_accent: "#F5F0E3"
  jade: "#2F5D4E"
  gold: "#9A7B33"
  rail: "#1B1712"
  success: "#2F5D4E"
  warning: "#9A7B33"
  error: "#C1352B"
  info: "#3F5A6B"
typography:
  headline-lg:
    fontFamily: "Liu Jian Mao Cao"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "Liu Jian Mao Cao"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "Noto Serif SC"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "Space Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  soft: "16px"
  card: "24px"
  pill: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  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-jade:
    backgroundColor: "{colors.jade}"
  color-reference-gold:
    backgroundColor: "{colors.gold}"
  color-reference-rail:
    backgroundColor: "{colors.rail}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "#ffffff"
    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"
---

# Tiaofu

## Overview

Running-column calligraphy given to product surfaces. The interface is hung like a vertical scroll of registers — content reads down each ruled column, calm and ordered — then a single flying stroke is dragged across the grid at full speed and the page goes kinetic. The identity lives in that tension: the disciplined register scaffold and the one gesture allowed to break it. Reimagined from the Kuangcao Kinetic brief on raw light paper rather than ink-dark drama.

### Values

- Order first, then the one decisive gesture
- Vertical registers read top to bottom, like a hanging scroll
- Raw warm paper as ground — the ink and the seal carry the gravity
- The cinnabar seal reserved for the single irreversible action
- Living negative space (liubai) as structure, not filler
- Speed and confidence in the crossing stroke
- Brushed split-bristle rules, never flat grey lines

### Anti-Values

- Defaulting to a white or a dark ground
- Accent edges trimmed onto every card
- The cursive hand bleeding into body paragraphs
- Boxed-in nav pills and nested cards as chrome
- The crossing stroke repeated until it is wallpaper

### Visual Character

- background:#EDE6D6; color:#1B1712; font-family:'Liu Jian Mao Cao',serif
- register opened by a 3px vertical ink-rail; content reads downward
- one diagonal SVG flying stroke stroke:var(--accent) crosses a register field, drawn on load
- active surface carries box-shadow:inset 4px 0 0 #C1352B (the seal-bar)
- primary action carries box-shadow:4px 4px 0 rgba(193,53,43,.22) (the stamp)

## 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 | `#EDE6D6` |
| surface | `#F5F0E3` |
| surface_2 | `#E3DAC6` |
| text | `#1B1712` |
| muted | `#6E6553` |
| border | `#1B1712` |
| accent | `#C1352B` |
| on_accent | `#F5F0E3` |
| jade | `#2F5D4E` |
| gold | `#9A7B33` |
| rail | `#1B1712` |
| success | `#2F5D4E` |
| warning | `#9A7B33` |
| error | `#C1352B` |
| info | `#3F5A6B` |

## Typography

- **Headline-Lg**: Liu Jian Mao Cao, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Liu Jian Mao Cao, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Noto Serif SC, 17px, weight 400, line-height 1.5.
- **Label-Md**: Space Mono, 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`

### Grid

asymmetric right-anchored vertical-register columns; minmax(0,1fr) tracks with min-width:0 children; contained content capped at 1280px

### Whitespace

generous; section gap ~88px, register gap none (ink-rail separation), always pad above titles

### Density

medium-high

### Responsive

single column on mobile; non-essential nav links and table columns hidden; vertical headline column folds to horizontal; only the full-bleed hero spans 100vw; contained content centred on ultra-wide

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1200px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Flat**: 0 1px 0 rgba(27,23,18,.12)
- **Seal**: 4px 4px 0 rgba(193,53,43,.22)
- **Lift**: 0 14px 36px rgba(27,23,18,.14)

## Shapes

### Rounded

- **None**: `0px`
- **Soft**: `16px`
- **Card**: `24px`
- **Pill**: `9999px`

### Surfaces

- **Paper**: #EDE6D6
- **Panel**: #F5F0E3
- **Channel**: #E3DAC6
- **Paper Grain**: radial-gradient(circle at 22% 18%, rgba(27,23,18,.035) .8px, transparent 1.4px)

### Borders

- **Policy**: none-as-chrome
- **Ink Rail**: 3px solid #1B1712
- **Seal Bar**: inset 4px 0 0 #C1352B
- **Underline Ink**: inset 0 -2px 0 #1B1712
- **Focus Ring**: inset 0 0 0 2px #C1352B

## Components

### Composition

Right-anchored vertical-column system. Surfaces are grids of equal-measure registers ruled by thin ink-rails; content reads top to bottom. Sections open with a vertical ink-rail and a vertical register tag (壹 貳 叁). The masthead pairs a horizontal headline with a vertical CJK column read downward.

### Hierarchy

Dramatic size contrast. The running-cursive display hand (Liu Jian Mao Cao) dominates headings, big numerals, and a table's leading cell; Noto Serif SC carries all reading. Cinnabar marks the one primary action, active register, and focus ring; pine-green and aged gold answer it quietly.

### Density

Medium-high with generous vertical rhythm — tight within a register group, generous between. Negative space is a register left blank on purpose.

### Signature

1) Vertical register scaffold: equal columns opened by 3px ink-rails, content read downward. 2) The crossing stroke: one diagonal cinnabar flying stroke slashing across a register field, drawn on load. 3) The seal, placed: a 4px cinnabar bar on the one active surface. 4) Brushed split-bristle dividers, never flat rules. 5) Living margin (liubai) as structural negative space.

## 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-019ef9c1-6ec2-7f63-9225-77b92d5721c6/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is 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 Build surfaces as vertical registers ruled by ink-rails; read content downward
- Do Keep the ground warm raw paper (#EDE6D6); never white, never dark
- Do Reserve the crossing stroke and the cinnabar seal-bar for meaning, never edge-trim
- Do Use the running-cursive hand for headings and big numerals only
- Do Treat blank registers as structural negative space
- Do Use brushed split-bristle bands for dividers; keep motion fast and gestural
- Don't Never default to a white or dark ground
- Don't Never put an accent edge on every card or box the nav into a pill
- Don't Never apply the cursive hand to body paragraphs
- Don't Never use flat grey rule-lines
- Don't Never repeat the crossing stroke until it is wallpaper — one per field
- Don't Never use more than three accents in one view

### Accessibility

Pine-ink #1B1712 on raw-paper #EDE6D6 reaches ~13:1 (WCAG AAA). Body in Noto Serif SC at 17px for CJK and Latin readability. Interactive elements take a 2px cinnabar focus ring. The crossing stroke and rails are decorative — content stays in normal flow; the fully-settled page renders with no JavaScript. Motion respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

feibai-brushwork

### Summary

All imagery uses the Feibai Brushwork style: forms built from a few sweeping single-gesture ink brushstrokes, dry-brush flying-white striations, a small cinnabar seal-mark and sparse gold flecks. Tiaofu composes them as a vertical cursive column crossed by one diagonal flying stroke on warm raw light paper, with living negative space for a headline overlay.

### Subjects

- vertical cursive calligraphic column
- single diagonal flying stroke crossing the column
- ink-on-raw-paper abstraction
- feibai flying-white sweep

### Usage

Landing hero is a full-bleed feibai vertical column with a crossing diagonal stroke and breathing negative space on the left for the headline overlay; feature images reuse the hero gesture. Never illustrate the thumbnail — the thumbnail is an embodiment screenshot.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tiaofu",
  "type": "registry:theme",
  "title": "Tiaofu shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#EDE6D6",
      "foreground": "#1B1712",
      "card": "#F5F0E3",
      "card-foreground": "#1B1712",
      "popover": "#F5F0E3",
      "popover-foreground": "#1B1712",
      "primary": "#1B1712",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6E6553",
      "muted-foreground": "#1B1712",
      "accent": "#C1352B",
      "accent-foreground": "#ffffff",
      "destructive": "#C1352B",
      "border": "#1B1712",
      "input": "#1B1712",
      "ring": "#C1352B",
      "chart-1": "#1B1712",
      "chart-2": "#f4f4f5",
      "chart-3": "#C1352B",
      "chart-4": "#2F5D4E",
      "chart-5": "#9A7B33",
      "sidebar": "#F5F0E3",
      "sidebar-foreground": "#1B1712",
      "sidebar-primary": "#1B1712",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3F5A6B",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#1B1712",
      "sidebar-ring": "#C1352B",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1B1712",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C1352B",
      "accent-foreground": "#ffffff",
      "destructive": "#C1352B",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C1352B",
      "chart-1": "#1B1712",
      "chart-2": "#f4f4f5",
      "chart-3": "#C1352B",
      "chart-4": "#2F5D4E",
      "chart-5": "#9A7B33",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1B1712",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C1352B",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C1352B",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef9c1-6ec2-7f63-9225-77b92d5721c6",
    "slug": "tiaofu",
    "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",
        "gold",
        "info",
        "jade",
        "muted",
        "on_accent",
        "rail",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "card",
        "none",
        "pill",
        "soft"
      ],
      "shadows": [
        "flat",
        "lift",
        "seal"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "channel",
        "panel",
        "paper",
        "paper_grain"
      ],
      "borders": [
        "focus_ring",
        "ink_rail",
        "policy",
        "seal_bar",
        "underline_ink"
      ],
      "motion": [
        "base",
        "fast",
        "reduced_motion",
        "stroke_draw"
      ]
    }
  }
}
```