Feibai

# Feibai

## Philosophy

A contemplative interface language built on the flying-white mark: sumi ink on misty silk, one cinnabar note, reserved space as structure, and controls drawn as strokes rather than boxed.

### Values

- flying-white as the signature mark
- reserved (liubai) space as structure
- sumi on misty silk
- one rationed cinnabar note
- slow self-drawing motion
- depth from ink shadow, not borders

### Anti-Values

- synthetic SaaS chrome
- cold grey borders
- rainbow accents
- fast abrupt motion
- pillowy oversized controls
- busy filled frames

### Visual Character

- Every stroke carries a wet-to-dry ink-load gradient; the dry tail breaks into flying-white.
- Warm sumi text on a cool misty silk ground; neutrals tuned warm, never cold grey.
- Cinnabar is a single rationed voice — primary action, active state, the climax note — never a broad fill.
- Depth from a warm ink shadow and diluted wash; no borders, no card edge-accents.
- Reserved liubai space is composition, balanced against denser control clusters.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#EDEBE3` |
| surface | `#F7F5EE` |
| surface_solid | `#F7F5EE` |
| text | `#16130F` |
| muted | `#6B6459` |
| border | `rgba(22,19,15,0.11)` |
| accent | `#B4372A` |
| accent_2 | `#3C6152` |
| accent_soft | `rgba(180,55,42,0.13)` |
| on_accent | `#F7F5EE` |
| success | `#3C6152` |
| warning | `#9A6A2E` |
| error | `#9E2B1E` |
| info | `#3A5566` |

### Typography

- **Base Size**: 18px
- **Body Font**: Newsreader
- **Heading Font**: Cormorant Garamond
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.62
- **Scale Ratio**: 1.28
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Mono:wght@400;500&display=swap

### Radii

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

### Shadows

- **Sm**: 0 1px 2px rgba(22,19,15,0.06)
- **Md**: 0 12px 34px rgba(58,48,38,0.11)
- **Lg**: 0 26px 64px rgba(58,48,38,0.15)

### Spacing

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

### Surfaces

- **Treatment**: silk paper ground with faint fibre grain and generous reserved (liubai) space; depth from ink shadow and wash, never boxes
- **Card Style**: reserved-edge paper panel: soft warm ink shadow, no border, one dry-brush hairline cap as ornament
- **Bg Pattern**: layered mist gradient bands plus low-opacity fibre noise; a self-drawing brush motif replaces the old diffusion blobs

### Borders

- **Default Width**: 0
- **Accent Width**: 0
- **Style**: dry-brush hairline used as ornament, never a container border
- **Character**: ink brush edge

### Motion

- **Duration**: 820ms
- **Easing**: cubic-bezier(0.22,1,0.36,1)
- **Philosophy**: elements arrive as a self-drawing flying-white brushstroke — wet at the pull-down, dry at the tail; slow, deliberate, meditative; honours prefers-reduced-motion

## Rules

### Composition

- Pair one dominant canvas with a denser control cluster
- Let reserved (liubai) silk carry as much weight as the mark
- Keep scroll vertical, like unrolling a hanging scroll
- Break the grid with one oversized plate or ledger
- Never trap navigation in a floating pill bar

### Density

Balanced: one dense cluster per viewport answered by generous reserved intervals (64-128px).

### Hierarchy

- Display in Cormorant Garamond at -0.02em to -0.045em
- Body in Newsreader at 18px, line-height 1.62
- Mono IBM Plex Mono for timecodes, provenance and figures
- Cinnabar marks only primary action, active state, or the climax note

### Signature Patterns

- {"name":"Flying-white stroke","description":"Every stroke carries a wet-to-dry ink-load gradient and breaks into dry-brush flying-white at speed; buttons, rules, tabs and meters are all one stroke.","css_concept":"repeating-linear-gradient with irregular alpha stops used as a mask over solid ink; SVG stroke with a feTurbulence displacement filter for the pulled primary."}
- {"name":"Self-drawing mark","description":"Strokes that reveal content draw themselves as they arrive.","css_concept":"SVG path stroke-dasharray/stroke-dashoffset animated from full length to 0 on reveal."}
- {"name":"Cinnabar note","description":"A single rationed vermillion voice: primary, active, and the climax detonation — never a broad fill.","css_concept":".seal / active states use var(--accent); the landing detonates cinnabar once at the climax scene."}
- {"name":"Reserved paper panel","description":"Cards lift on a warm ink shadow with a dry-brush cap and reserved interior space; no borders, no edge-accents.","css_concept":".panel{background:var(--surface);border-radius:24px;box-shadow:var(--sh-md)} .panel .cap uses the flying-white mask; no border."}

## Layout

### Grid

- **Type**: asymmetric 12-column
- **Columns Desktop**: 12
- **Columns Tablet**: 8
- **Columns Mobile**: 4
- **Gutter**: 24px
- **Max Width**: 1180px

### Density

one dense control cluster per viewport balanced by broad reserved intervals

### Whitespace

- **Tight**: 4-8px metadata
- **Normal**: 24px panel internals
- **Wide**: 64px between zones
- **Breath**: 96-128px reserved voids

### Responsive

- **Wide**: cap and centre content; only the full-bleed hero spans 100vw
- **Desktop**: 12-column asymmetric canvas and controls
- **Tablet**: its own 8-column layout, never the mobile column stretched
- **Mobile**: single column, nav collapses to brand plus CTA, no horizontal overflow

## Guidance

### Do

- Keep cinnabar rationed to a single voice
- Let reserved space carry weight
- Render depth with ink shadow and wash
- Draw controls as strokes with flying-white texture
- Style every form control
- Cap cards and mark active tabs with the dry-brush texture

### Don't

- Use pure white or cold grey
- Add a card edge-accent or container border
- Box navigation in a floating pill bar
- Exceed cinnabar plus one supporting note in a viewport
- Ship pillowy oversized controls or inflated mid-scale text
- Mix arbitrary radii

### Usage Context

Film restoration tools, meditative media archives, nature-documentary libraries, art-gallery interpretation, storytelling products, and wellness applications.

### Accessibility

- **Contrast**: #16130F on #EDEBE3 exceeds WCAG AA; #6B6459 for larger or secondary copy only
- **Focus**: 3px cinnabar ring with offset on all controls
- **Motion**: prefers-reduced-motion disables the film's pins and the ink veil; the settled document stays fully readable

## Imagery Direction

### Pairs With

xieyi

### Description

Expressive Chinese literati ink-wash with flying-white dry-brush and reserved silk. Misty mountains, pine and pavilion, waterfalls whose water is unpainted silk, a lone boat, and one cinnabar sun.

### Subjects

- misty mountain ranges
- pine and pavilion on a cliff
- waterfall with reserved-white water
- lake, reeds and a lone boat
- a single cinnabar sun

### Treatment

monochrome sumi with wet-to-dry ink-load gradient, flying-white streaks, soft wet blooms, generous reserved space, one restrained cinnabar note

### Do

- Keep copy in reserved space, never on busy brushwork
- Let mist be soft value
- Reserve the paper as structure

### Dont

- Stretch or distort plates
- Add a second bright hue
- Bury information under artwork

---
version: "alpha"
name: "Feibai"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#EDEBE3"
  surface: "#F7F5EE"
  surface_solid: "#F7F5EE"
  text: "#16130F"
  muted: "#6B6459"
  accent: "#B4372A"
  accent_2: "#3C6152"
  on_accent: "#F7F5EE"
  success: "#3C6152"
  warning: "#9A6A2E"
  error: "#9E2B1E"
  info: "#3A5566"
typography:
  headline-lg:
    fontFamily: "Cormorant Garamond"
    fontSize: "2.197rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Cormorant Garamond"
    fontSize: "1.758rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Newsreader"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
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-surface_solid:
    backgroundColor: "{colors.surface_solid}"
  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-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}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "#ffffff"
    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"
---

# Feibai

## Overview

A contemplative interface language built on the flying-white mark: sumi ink on misty silk, one cinnabar note, reserved space as structure, and controls drawn as strokes rather than boxed.

### Values

- flying-white as the signature mark
- reserved (liubai) space as structure
- sumi on misty silk
- one rationed cinnabar note
- slow self-drawing motion
- depth from ink shadow, not borders

### Anti-Values

- synthetic SaaS chrome
- cold grey borders
- rainbow accents
- fast abrupt motion
- pillowy oversized controls
- busy filled frames

### Visual Character

- Every stroke carries a wet-to-dry ink-load gradient; the dry tail breaks into flying-white.
- Warm sumi text on a cool misty silk ground; neutrals tuned warm, never cold grey.
- Cinnabar is a single rationed voice — primary action, active state, the climax note — never a broad fill.
- Depth from a warm ink shadow and diluted wash; no borders, no card edge-accents.
- Reserved liubai space is composition, balanced against denser control clusters.

## 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 | `#EDEBE3` |
| surface | `#F7F5EE` |
| surface_solid | `#F7F5EE` |
| text | `#16130F` |
| muted | `#6B6459` |
| accent | `#B4372A` |
| accent_2 | `#3C6152` |
| on_accent | `#F7F5EE` |
| success | `#3C6152` |
| warning | `#9A6A2E` |
| error | `#9E2B1E` |
| info | `#3A5566` |

## Typography

- **Headline-Lg**: Cormorant Garamond, 2.197rem, weight 700, line-height 1.1.
- **Headline-Md**: Cormorant Garamond, 1.758rem, weight 600, line-height 1.15.
- **Body-Md**: Newsreader, 18px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex Mono, 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**: asymmetric 12-column
- **Columns Desktop**: 12
- **Columns Tablet**: 8
- **Columns Mobile**: 4
- **Gutter**: 24px
- **Max Width**: 1180px

### Density

one dense control cluster per viewport balanced by broad reserved intervals

### Whitespace

- **Tight**: 4-8px metadata
- **Normal**: 24px panel internals
- **Wide**: 64px between zones
- **Breath**: 96-128px reserved voids

### Responsive

- **Wide**: cap and centre content; only the full-bleed hero spans 100vw
- **Desktop**: 12-column asymmetric canvas and controls
- **Tablet**: its own 8-column layout, never the mobile column stretched
- **Mobile**: single column, nav collapses to brand plus CTA, no horizontal overflow

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 2px rgba(22,19,15,0.06)
- **Md**: 0 12px 34px rgba(58,48,38,0.11)
- **Lg**: 0 26px 64px rgba(58,48,38,0.15)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: silk paper ground with faint fibre grain and generous reserved (liubai) space; depth from ink shadow and wash, never boxes
- **Card Style**: reserved-edge paper panel: soft warm ink shadow, no border, one dry-brush hairline cap as ornament
- **Bg Pattern**: layered mist gradient bands plus low-opacity fibre noise; a self-drawing brush motif replaces the old diffusion blobs

### Borders

- **Default Width**: 0
- **Accent Width**: 0
- **Style**: dry-brush hairline used as ornament, never a container border
- **Character**: ink brush edge

## Components

### Composition

- Pair one dominant canvas with a denser control cluster
- Let reserved (liubai) silk carry as much weight as the mark
- Keep scroll vertical, like unrolling a hanging scroll
- Break the grid with one oversized plate or ledger
- Never trap navigation in a floating pill bar

### Density

Balanced: one dense cluster per viewport answered by generous reserved intervals (64-128px).

### Hierarchy

- Display in Cormorant Garamond at -0.02em to -0.045em
- Body in Newsreader at 18px, line-height 1.62
- Mono IBM Plex Mono for timecodes, provenance and figures
- Cinnabar marks only primary action, active state, or the climax note

### Signature Patterns

- {"name":"Flying-white stroke","description":"Every stroke carries a wet-to-dry ink-load gradient and breaks into dry-brush flying-white at speed; buttons, rules, tabs and meters are all one stroke.","css_concept":"repeating-linear-gradient with irregular alpha stops used as a mask over solid ink; SVG stroke with a feTurbulence displacement filter for the pulled primary."}
- {"name":"Self-drawing mark","description":"Strokes that reveal content draw themselves as they arrive.","css_concept":"SVG path stroke-dasharray/stroke-dashoffset animated from full length to 0 on reveal."}
- {"name":"Cinnabar note","description":"A single rationed vermillion voice: primary, active, and the climax detonation — never a broad fill.","css_concept":".seal / active states use var(--accent); the landing detonates cinnabar once at the climax scene."}
- {"name":"Reserved paper panel","description":"Cards lift on a warm ink shadow with a dry-brush cap and reserved interior space; no borders, no edge-accents.","css_concept":".panel{background:var(--surface);border-radius:24px;box-shadow:var(--sh-md)} .panel .cap uses the flying-white mask; no border."}

## 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-019f8afe-446d-7e93-8071-b7d811181137/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 Keep cinnabar rationed to a single voice
- Do Let reserved space carry weight
- Do Render depth with ink shadow and wash
- Do Draw controls as strokes with flying-white texture
- Do Style every form control
- Do Cap cards and mark active tabs with the dry-brush texture
- Don't Use pure white or cold grey
- Don't Add a card edge-accent or container border
- Don't Box navigation in a floating pill bar
- Don't Exceed cinnabar plus one supporting note in a viewport
- Don't Ship pillowy oversized controls or inflated mid-scale text
- Don't Mix arbitrary radii

### Usage Context

Film restoration tools, meditative media archives, nature-documentary libraries, art-gallery interpretation, storytelling products, and wellness applications.

### Accessibility

- **Contrast**: #16130F on #EDEBE3 exceeds WCAG AA; #6B6459 for larger or secondary copy only
- **Focus**: 3px cinnabar ring with offset on all controls
- **Motion**: prefers-reduced-motion disables the film's pins and the ink veil; the settled document stays fully readable

## Imagery Direction

### Pairs With

xieyi

### Description

Expressive Chinese literati ink-wash with flying-white dry-brush and reserved silk. Misty mountains, pine and pavilion, waterfalls whose water is unpainted silk, a lone boat, and one cinnabar sun.

### Subjects

- misty mountain ranges
- pine and pavilion on a cliff
- waterfall with reserved-white water
- lake, reeds and a lone boat
- a single cinnabar sun

### Treatment

monochrome sumi with wet-to-dry ink-load gradient, flying-white streaks, soft wet blooms, generous reserved space, one restrained cinnabar note

### Do

- Keep copy in reserved space, never on busy brushwork
- Let mist be soft value
- Reserve the paper as structure

### Dont

- Stretch or distort plates
- Add a second bright hue
- Bury information under artwork

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feibai",
  "type": "registry:theme",
  "title": "Feibai shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#EDEBE3",
      "foreground": "#16130F",
      "card": "#F7F5EE",
      "card-foreground": "#16130F",
      "popover": "#F7F5EE",
      "popover-foreground": "#16130F",
      "primary": "#16130F",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6B6459",
      "muted-foreground": "#16130F",
      "accent": "#B4372A",
      "accent-foreground": "#ffffff",
      "destructive": "#9E2B1E",
      "border": "rgba(22,19,15,0.11)",
      "input": "rgba(22,19,15,0.11)",
      "ring": "#B4372A",
      "chart-1": "#16130F",
      "chart-2": "#f4f4f5",
      "chart-3": "#B4372A",
      "chart-4": "#3C6152",
      "chart-5": "#9A6A2E",
      "sidebar": "#F7F5EE",
      "sidebar-foreground": "#16130F",
      "sidebar-primary": "#16130F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3A5566",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "rgba(22,19,15,0.11)",
      "sidebar-ring": "#B4372A",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#16130F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B4372A",
      "accent-foreground": "#ffffff",
      "destructive": "#9E2B1E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B4372A",
      "chart-1": "#16130F",
      "chart-2": "#f4f4f5",
      "chart-3": "#B4372A",
      "chart-4": "#3C6152",
      "chart-5": "#9A6A2E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#16130F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B4372A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B4372A",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f8afe-446d-7e93-8071-b7d811181137",
    "slug": "feibai",
    "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_soft",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface_solid",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```