design language·fusen-board

Fusen Board

A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.

Published

Download DESIGN.md

Portable DESIGN.md source of truth for most agents and apps.

the spec

specification

philosophy

summary

Fusen Board translates Japanese sticky-note planning culture into a warm corkboard interface where every container behaves like a physical paper note. The language favors tactile clustering, readable imperfection, visible pins and tape, and a cheerful high-density rhythm that feels actively used rather than digitally sterile.

values

Tactile paper presenceCheerful organizationReadable imperfectionSpatial groupingStationery craftHigh-density clarity

anti-values

×Glassmorphism and synthetic shine×Perfectly aligned SaaS grids×Pure black and pure white surfaces×Heavy corporate chrome

tokens

borders8 items

accent width: 0px; use separate tape/pin pseudo-elements instead of one-sided accent borders
character: near-invisible paper edges, no heavy grey SaaS outlines
color: rgba(45,41,38,0.10)
default width: 1px
focus: 2px solid #c84d63
note edge: 1px solid rgba(45,41,38,0.08)
style: solid
width: 1px

colors18 items

accent

#b97918

background

#f0ece4

border

rgba(45,41,38,0.10)

error

#a83f3f

info

#357f99

muted

#7a7268

primary

#c84d63

secondary

#357f99

success

#4c7a4f

surface

#fff8b8

surface_blue

#c8e6ff

surface_green

#c8f0d4

surface_orange

#ffe0b8

surface_pink

#ffd4e0

surface_purple

#e0d0f0

surface_yellow

#fff8b8

text

#2d2926

warning

#b97918

motion7 items

duration fast: 120ms
duration normal: 200ms
duration slow: 350ms
easing default: cubic-bezier(0.34, 1.56, 0.64, 1)
easing gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94)
hover: lift notes 2px and reduce rotation slightly; never fade-only interactions
reduced motion: remove rotations and disable lift transforms when prefers-reduced-motion is active

radii4 items

board: 16px
note: 4px
pin: 9999px
tape: 0px

shadows4 items

note: 2px 3px 6px rgba(45,41,38,0.16)
note hover: 4px 7px 12px rgba(45,41,38,0.20)
pin: 1px 2px 3px rgba(45,41,38,0.35)
stack: 1px 2px 4px rgba(45,41,38,0.10)

spacing10 items

board: 72px
lg: 16px
md: 12px
sm: 8px
unit: 4px
xl: 24px
xs: 4px
xxl: 32px
xxs: 2px
xxxl: 48px

surfaces4 items

board: Warm cork base with layered radial-gradient speckles and no white panels.
note: Solid pastel paper colors with a faint transparent paper-fiber texture using pseudo-elements.
pin: Small circular radial-gradient thumbtacks with compact drop shadows.
tape: Semi-transparent cream rectangles with multiply blending and square corners.

typography15 items

base size: 16px
body font: Inter
font body: Inter
font heading: Nunito Sans
font mono: JetBrains Mono
google fonts url: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&family=Nunito+Sans:wght@600;700;800;900&display=swap
heading font: Nunito Sans
leading: body 1.55·display 1.12
letter spacing: -0.02em body, -0.035em display
line height: 1.55 body, 1.12 display
mono font: JetBrains Mono
scale ratio: 1.22
sizes: base 1rem·display 3.3rem·lg 1.49rem·md 1.22rem·sm 0.875rem·xl 1.82rem·xs 0.75rem·xxl 2.22rem
tracking: body -0.02em·display -0.035em·mono -0.01em
weights: black 900·bold 700·medium 500·normal 400·semibold 600

rules

composition

Build screens as one corkboard with notes attached to it, not as independent white cards on a page.Create asymmetry with one oversized planning note, several medium notes, and small pinned reminders rather than equal card rows.Cluster related notes with tight 8-12px internal gaps and reserve broad exposed cork margins between major groups.Let notes overlap by 4-10px where relationships are strong, while maintaining readable text blocks.Use physical artifacts — pins, tape, marker strokes — only where they communicate hierarchy or action.

density

High density is encouraged — a full board signals productive activity. Notes should be close together with 8-16px gaps inside clusters, while major clusters are separated by exposed corkboard. Rotations must be subtle enough to keep long text readable.

hierarchy

Oversized yellow or blue notes carry the main task or decision.Primary actions use saturated marker pink as handwritten pill controls on the note itself.Secondary information uses blue marker text or compact tape labels.Pinned notes are priority items and must include both a pin decoration and a text label.Muted pencil-gray metadata sits in mono type at small sizes but never below 12px.

signature patterns

Sticky note cards with solid pastel paper backgrounds, 4px border-radius, 2px 3px 6px paper shadows, faint fiber pseudo-elements, and transforms such as rotate(-1.4deg) or rotate(1.2deg).Thumbtack decorations built as 9px circular pseudo-elements with radial-gradient highlights, centered near the top of important notes and paired with a compact shadow to imply pressure into cork.Corkboard background using #f0ece4 plus multiple radial-gradient speckles and linear-gradient fibers so the root surface has tactile board texture without image assets.Hand-drawn marker underlines and separators created with inline SVG paths or irregular CSS borders, used under project names and section labels rather than generic horizontal rules.Washi tape strips as square-corner pseudo-elements in translucent cream, rotated slightly at note corners to attach featured or temporarily grouped notes.

layout

density

High-density corkboard with compact 8-16px note clusters separated by broad 48-96px exposed cork fields; one oversized planning note anchors the scene.

grid

Asymmetric board grid: desktop uses 12 columns with a dominant 5-column note, dense 4-column work lane, and narrow 3-column reminders. Tablet collapses to 6 columns; mobile becomes one column with rotations removed.

responsive

Breakpoints at 1100px, 760px, and 520px. All grid/flex layout lives in CSS classes, no inline layout styles. Mobile removes overlaps, rotation, and side-by-side control rows for readability.

whitespace

Whitespace is exposed cork, not blank page. Use dramatic rhythm from 4px note details to 96px board margins so grouped thoughts feel close and separate projects breathe.

guidance

Use pastel sticky note colors as primary surface backgrounds for cards and controls.
Apply slight rotations (-2deg to 2deg) to note elements and remove them on small screens.
Include pin or tape decorations on important notes, but not on every element.
Use marker-pen accent colors for actions, emphasis, and hand-drawn underlines.
Layer notes with slight overlap to create physical depth and spatial grouping.
Use Nunito Sans for headings with tight tracking and Inter for legible body copy.
Apply paper-like box-shadows to all note elements for physical presence.
Keep note corners at 4px; pins remain fully round and tape remains square.

avoid

Never use sharp 0px on sticky notes or large 16/24px card rounding for note surfaces.
Avoid pure white or pure black surfaces; the warm cork and paper palette should dominate.
Do not remove shadows from notes because paper depth is essential to the metaphor.
Never align all notes perfectly or make three equal cards in a row.
Avoid heavy borders; notes are defined by fill, texture, and shadow.
Do not use gradient fills on note paper; gradients are reserved for tiny metallic pins only.
Never rely on color alone for category or priority; include labels and placement.
Avoid generic SaaS dashboard labels such as Controls, Feedback, and Data.

katagami spec

# Fusen Board

## Philosophy

### Values

- Tactile paper presence
- Cheerful organization
- Readable imperfection
- Spatial grouping
- Stationery craft
- High-density clarity

### Anti-Values

- Glassmorphism and synthetic shine
- Perfectly aligned SaaS grids
- Pure black and pure white surfaces
- Heavy corporate chrome

### Visual Character

- Pastel sticky-note surfaces use solid paper colors, small 4px rounded corners, subtle fiber overlays, and offset paper shadows so every content region reads as a movable note rather than a digital panel.
- A warm corkboard foundation appears behind the interface through dotted and speckled CSS background layers, making whitespace feel like exposed board material instead of empty web page space.
- Priority and anchoring are expressed with thumbtack circles, cream tape strips, and hand-drawn marker underlines built in CSS/SVG, giving hierarchy through stationery artifacts instead of generic badges.
- Composition is intentionally imperfect: note cards rotate between -2deg and 2deg, overlap in clustered columns, and vary in size so the product feels hand-arranged while preserving scanability.

## Tokens

### Borders

- **Accent Width**: 0px; use separate tape/pin pseudo-elements instead of one-sided accent borders
- **Character**: near-invisible paper edges, no heavy grey SaaS outlines
- **Color**: rgba(45,41,38,0.10)
- **Default Width**: 1px
- **Focus**: 2px solid #c84d63
- **Note Edge**: 1px solid rgba(45,41,38,0.08)
- **Style**: solid
- **Width**: 1px

### Colors

| Name | Value |
|------|-------|
| accent | `#b97918` |
| background | `#f0ece4` |
| border | `rgba(45,41,38,0.10)` |
| error | `#a83f3f` |
| info | `#357f99` |
| muted | `#7a7268` |
| primary | `#c84d63` |
| secondary | `#357f99` |
| success | `#4c7a4f` |
| surface | `#fff8b8` |
| surface_blue | `#c8e6ff` |
| surface_green | `#c8f0d4` |
| surface_orange | `#ffe0b8` |
| surface_pink | `#ffd4e0` |
| surface_purple | `#e0d0f0` |
| surface_yellow | `#fff8b8` |
| text | `#2d2926` |
| warning | `#b97918` |

### Motion

- **Duration Fast**: 120ms
- **Duration Normal**: 200ms
- **Duration Slow**: 350ms
- **Easing Default**: cubic-bezier(0.34, 1.56, 0.64, 1)
- **Easing Gentle**: cubic-bezier(0.25, 0.46, 0.45, 0.94)
- **Hover**: lift notes 2px and reduce rotation slightly; never fade-only interactions
- **Reduced Motion**: remove rotations and disable lift transforms when prefers-reduced-motion is active

### Radii

- **Board**: 16px
- **Note**: 4px
- **Pin**: 9999px
- **Tape**: 0px

### Shadows

- **Note**: 2px 3px 6px rgba(45,41,38,0.16)
- **Note Hover**: 4px 7px 12px rgba(45,41,38,0.20)
- **Pin**: 1px 2px 3px rgba(45,41,38,0.35)
- **Stack**: 1px 2px 4px rgba(45,41,38,0.10)

### Spacing

- **Board**: 72px
- **Lg**: 16px
- **Md**: 12px
- **Sm**: 8px
- **Unit**: 4px
- **Xl**: 24px
- **Xs**: 4px
- **Xxl**: 32px
- **Xxs**: 2px
- **Xxxl**: 48px

### Surfaces

- **Board**: Warm cork base with layered radial-gradient speckles and no white panels.
- **Note**: Solid pastel paper colors with a faint transparent paper-fiber texture using pseudo-elements.
- **Pin**: Small circular radial-gradient thumbtacks with compact drop shadows.
- **Tape**: Semi-transparent cream rectangles with multiply blending and square corners.

### Typography

- **Base Size**: 16px
- **Body Font**: Inter
- **Font Body**: Inter
- **Font Heading**: Nunito Sans
- **Font Mono**: JetBrains Mono
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&family=Nunito+Sans:wght@600;700;800;900&display=swap
- **Heading Font**: Nunito Sans
- **Leading**: {"body":"1.55","display":"1.12"}
- **Letter Spacing**: -0.02em body, -0.035em display
- **Line Height**: 1.55 body, 1.12 display
- **Mono Font**: JetBrains Mono
- **Scale Ratio**: 1.22
- **Sizes**: {"base":"1rem","display":"3.3rem","lg":"1.49rem","md":"1.22rem","sm":"0.875rem","xl":"1.82rem","xs":"0.75rem","xxl":"2.22rem"}
- **Tracking**: {"body":"-0.02em","display":"-0.035em","mono":"-0.01em"}
- **Weights**: {"black":900,"bold":700,"medium":500,"normal":400,"semibold":600}

## Rules

### Composition

- Build screens as one corkboard with notes attached to it, not as independent white cards on a page.
- Create asymmetry with one oversized planning note, several medium notes, and small pinned reminders rather than equal card rows.
- Cluster related notes with tight 8-12px internal gaps and reserve broad exposed cork margins between major groups.
- Let notes overlap by 4-10px where relationships are strong, while maintaining readable text blocks.
- Use physical artifacts — pins, tape, marker strokes — only where they communicate hierarchy or action.

### Density

High density is encouraged — a full board signals productive activity. Notes should be close together with 8-16px gaps inside clusters, while major clusters are separated by exposed corkboard. Rotations must be subtle enough to keep long text readable.

### Hierarchy

- Oversized yellow or blue notes carry the main task or decision.
- Primary actions use saturated marker pink as handwritten pill controls on the note itself.
- Secondary information uses blue marker text or compact tape labels.
- Pinned notes are priority items and must include both a pin decoration and a text label.
- Muted pencil-gray metadata sits in mono type at small sizes but never below 12px.

### Signature Patterns

- Sticky note cards with solid pastel paper backgrounds, 4px border-radius, 2px 3px 6px paper shadows, faint fiber pseudo-elements, and transforms such as rotate(-1.4deg) or rotate(1.2deg).
- Thumbtack decorations built as 9px circular pseudo-elements with radial-gradient highlights, centered near the top of important notes and paired with a compact shadow to imply pressure into cork.
- Corkboard background using #f0ece4 plus multiple radial-gradient speckles and linear-gradient fibers so the root surface has tactile board texture without image assets.
- Hand-drawn marker underlines and separators created with inline SVG paths or irregular CSS borders, used under project names and section labels rather than generic horizontal rules.
- Washi tape strips as square-corner pseudo-elements in translucent cream, rotated slightly at note corners to attach featured or temporarily grouped notes.

## Layout

### Density

High-density corkboard with compact 8-16px note clusters separated by broad 48-96px exposed cork fields; one oversized planning note anchors the scene.

### Grid

Asymmetric board grid: desktop uses 12 columns with a dominant 5-column note, dense 4-column work lane, and narrow 3-column reminders. Tablet collapses to 6 columns; mobile becomes one column with rotations removed.

### Responsive

Breakpoints at 1100px, 760px, and 520px. All grid/flex layout lives in CSS classes, no inline layout styles. Mobile removes overlaps, rotation, and side-by-side control rows for readability.

### Whitespace

Whitespace is exposed cork, not blank page. Use dramatic rhythm from 4px note details to 96px board margins so grouped thoughts feel close and separate projects breathe.

## Guidance

### Do

- Use pastel sticky note colors as primary surface backgrounds for cards and controls.
- Apply slight rotations (-2deg to 2deg) to note elements and remove them on small screens.
- Include pin or tape decorations on important notes, but not on every element.
- Use marker-pen accent colors for actions, emphasis, and hand-drawn underlines.
- Layer notes with slight overlap to create physical depth and spatial grouping.
- Use Nunito Sans for headings with tight tracking and Inter for legible body copy.
- Apply paper-like box-shadows to all note elements for physical presence.
- Keep note corners at 4px; pins remain fully round and tape remains square.

### Don't

- Never use sharp 0px on sticky notes or large 16/24px card rounding for note surfaces.
- Avoid pure white or pure black surfaces; the warm cork and paper palette should dominate.
- Do not remove shadows from notes because paper depth is essential to the metaphor.
- Never align all notes perfectly or make three equal cards in a row.
- Avoid heavy borders; notes are defined by fill, texture, and shadow.
- Do not use gradient fills on note paper; gradients are reserved for tiny metallic pins only.
- Never rely on color alone for category or priority; include labels and placement.
- Avoid generic SaaS dashboard labels such as Controls, Feedback, and Data.

### Accessibility

Ensure 4.5:1 contrast ratio between #2d2926 text and pastel note backgrounds. Provide non-color labels for categories and priority. Pin decorations must never be the sole indicator of importance. Rotation transforms must stay within 2deg and be removed for prefers-reduced-motion. Focus states use a 2px #c84d63 outline with 2px offset. Body text remains 15-16px.

### Usage Context

Best for brainstorming boards, editorial planning walls, classroom activities, household planning, lightweight task boards, and creative team rituals where movable units and color-coded notes clarify relationships.

DESIGN.md

---
version: "alpha"
name: "Fusen Board"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
accent: "#b97918"
background: "#f0ece4"
error: "#a83f3f"
info: "#357f99"
muted: "#7a7268"
primary: "#c84d63"
secondary: "#357f99"
success: "#4c7a4f"
surface: "#fff8b8"
surface_blue: "#c8e6ff"
surface_green: "#c8f0d4"
surface_orange: "#ffe0b8"
surface_pink: "#ffd4e0"
surface_purple: "#e0d0f0"
surface_yellow: "#fff8b8"
text: "#2d2926"
warning: "#b97918"
typography:
headline-lg:
fontFamily: "Nunito Sans"
fontSize: "1.816rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Nunito Sans"
fontSize: "1.488rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "Inter"
fontSize: "16px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.02em"
label-md:
fontFamily: "JetBrains Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
board: "16px"
note: "4px"
pin: "9999px"
tape: "0px"
spacing:
board: "72px"
lg: "16px"
md: "12px"
sm: "8px"
unit: "4px"
xl: "24px"
xs: "4px"
xxl: "32px"
xxs: "2px"
xxxl: "48px"
components:
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-background:
backgroundColor: "{colors.background}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-info:
backgroundColor: "{colors.info}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-primary:
backgroundColor: "{colors.primary}"
color-reference-secondary:
backgroundColor: "{colors.secondary}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface_blue:
backgroundColor: "{colors.surface_blue}"
color-reference-surface_green:
backgroundColor: "{colors.surface_green}"
color-reference-surface_orange:
backgroundColor: "{colors.surface_orange}"
color-reference-surface_pink:
backgroundColor: "{colors.surface_pink}"
color-reference-surface_purple:
backgroundColor: "{colors.surface_purple}"
color-reference-surface_yellow:
backgroundColor: "{colors.surface_yellow}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-warning:
backgroundColor: "{colors.warning}"
button-primary:
backgroundColor: "{colors.primary}"
textColor: "#000000"
typography: "{typography.label-md}"
rounded: "16px"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "16px"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "16px"
height: "44px"
---

# Fusen Board

## Overview

### Values

- Tactile paper presence
- Cheerful organization
- Readable imperfection
- Spatial grouping
- Stationery craft
- High-density clarity

### Anti-Values

- Glassmorphism and synthetic shine
- Perfectly aligned SaaS grids
- Pure black and pure white surfaces
- Heavy corporate chrome

### Visual Character

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| accent | `#b97918` |
| background | `#f0ece4` |
| error | `#a83f3f` |
| info | `#357f99` |
| muted | `#7a7268` |
| primary | `#c84d63` |
| secondary | `#357f99` |
| success | `#4c7a4f` |
| surface | `#fff8b8` |
| surface_blue | `#c8e6ff` |
| surface_green | `#c8f0d4` |
| surface_orange | `#ffe0b8` |
| surface_pink | `#ffd4e0` |
| surface_purple | `#e0d0f0` |
| surface_yellow | `#fff8b8` |
| text | `#2d2926` |
| warning | `#b97918` |

## Typography

- **Headline-Lg**: Nunito Sans, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: Nunito Sans, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 16px, weight 400, line-height 1.5.
- **Label-Md**: JetBrains Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Board**: `72px`
- **Lg**: `16px`
- **Md**: `12px`
- **Sm**: `8px`
- **Unit**: `4px`
- **Xl**: `24px`
- **Xs**: `4px`
- **Xxl**: `32px`
- **Xxs**: `2px`
- **Xxxl**: `48px`

### Density

High-density corkboard with compact 8-16px note clusters separated by broad 48-96px exposed cork fields; one oversized planning note anchors the scene.

### Grid

### Responsive

Breakpoints at 1100px, 760px, and 520px. All grid/flex layout lives in CSS classes, no inline layout styles. Mobile removes overlaps, rotation, and side-by-side control rows for readability.

### Whitespace

Whitespace is exposed cork, not blank page. Use dramatic rhythm from 4px note details to 96px board margins so grouped thoughts feel close and separate projects breathe.

## Elevation & Depth

### Shadows

- **Note**: 2px 3px 6px rgba(45,41,38,0.16)
- **Note Hover**: 4px 7px 12px rgba(45,41,38,0.20)
- **Pin**: 1px 2px 3px rgba(45,41,38,0.35)
- **Stack**: 1px 2px 4px rgba(45,41,38,0.10)

## Shapes

### Rounded

- **Board**: `16px`
- **Note**: `4px`
- **Pin**: `9999px`
- **Tape**: `0px`

### Surfaces

### Borders

## Components

### Composition

### Density

### Hierarchy

### Signature Patterns

## 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-019dacd4-66ef-7d12-a005-aa22019a140b/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 Use pastel sticky note colors as primary surface backgrounds for cards and controls.
- Do Apply slight rotations (-2deg to 2deg) to note elements and remove them on small screens.
- Do Include pin or tape decorations on important notes, but not on every element.
- Do Use marker-pen accent colors for actions, emphasis, and hand-drawn underlines.
- Do Layer notes with slight overlap to create physical depth and spatial grouping.
- Do Use Nunito Sans for headings with tight tracking and Inter for legible body copy.
- Do Apply paper-like box-shadows to all note elements for physical presence.
- Do Keep note corners at 4px; pins remain fully round and tape remains square.
- Don't Never use sharp 0px on sticky notes or large 16/24px card rounding for note surfaces.
- Don't Avoid pure white or pure black surfaces; the warm cork and paper palette should dominate.
- Don't Do not remove shadows from notes because paper depth is essential to the metaphor.
- Don't Never align all notes perfectly or make three equal cards in a row.
- Don't Avoid heavy borders; notes are defined by fill, texture, and shadow.
- Don't Do not use gradient fills on note paper; gradients are reserved for tiny metallic pins only.
- Don't Never rely on color alone for category or priority; include labels and placement.
- Don't Avoid generic SaaS dashboard labels such as Controls, Feedback, and Data.

### Accessibility

### Usage Context

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fusen-board",
  "type": "registry:theme",
  "title": "Fusen Board shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#f0ece4",
      "foreground": "#2d2926",
      "card": "#fff8b8",
      "card-foreground": "#2d2926",
      "popover": "#fff8b8",
      "popover-foreground": "#2d2926",
      "primary": "#c84d63",
      "primary-foreground": "#ffffff",
      "secondary": "#357f99",
      "secondary-foreground": "#ffffff",
      "muted": "#7a7268",
      "muted-foreground": "#2d2926",
      "accent": "#b97918",
      "accent-foreground": "#ffffff",
      "destructive": "#a83f3f",
      "border": "rgba(45,41,38,0.10)",
      "input": "rgba(45,41,38,0.10)",
      "ring": "#b97918",
      "chart-1": "#c84d63",
      "chart-2": "#357f99",
      "chart-3": "#b97918",
      "chart-4": "#4c7a4f",
      "chart-5": "#b97918",
      "sidebar": "#fff8b8",
      "sidebar-foreground": "#2d2926",
      "sidebar-primary": "#c84d63",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#357f99",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "rgba(45,41,38,0.10)",
      "sidebar-ring": "#b97918",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#c84d63",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#b97918",
      "accent-foreground": "#ffffff",
      "destructive": "#a83f3f",
      "border": "#303642",
      "input": "#303642",
      "ring": "#b97918",
      "chart-1": "#c84d63",
      "chart-2": "#357f99",
      "chart-3": "#b97918",
      "chart-4": "#4c7a4f",
      "chart-5": "#b97918",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#c84d63",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#b97918",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#b97918",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019dacd4-66ef-7d12-a005-aa22019a140b",
    "slug": "fusen-board",
    "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": {
      "borders": [
        "accent_width",
        "character",
        "color",
        "default_width",
        "focus",
        "note_edge",
        "style",
        "width"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "surface_blue",
        "surface_green",
        "surface_orange",
        "surface_pink",
        "surface_purple",
        "surface_yellow",
        "text",
        "warning"
      ],
      "motion": [
        "duration_fast",
        "duration_normal",
        "duration_slow",
        "easing_default",
        "easing_gentle",
        "hover",
        "reduced_motion"
      ],
      "radii": [
        "board",
        "note",
        "pin",
        "tape"
      ],
      "shadows": [
        "note",
        "note_hover",
        "pin",
        "stack"
      ],
      "spacing": [
        "board",
        "lg",
        "md",
        "sm",
        "unit",
        "xl",
        "xs",
        "xxl",
        "xxs",
        "xxxl"
      ],
      "surfaces": [
        "board",
        "note",
        "pin",
        "tape"
      ],
      "typography": [
        "base_size",
        "body_font",
        "font_body",
        "font_heading",
        "font_mono",
        "google_fonts_url",
        "heading_font",
        "leading",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio",
        "sizes",
        "tracking",
        "weights"
      ]
    }
  }
}
```

in the wild

embodiments

the full element showcase

embodiment · fusen-board

DESIGN.md

at a glance

Palette

Typography

headline-lgNunito Sans · 29px · 700

The quick brown fox jumps

headline-mdNunito Sans · 24px · 600

The quick brown fox jumps

body-mdInter · 16px · 400

The quick brown fox jumps

label-mdJetBrains Mono · 12px · 600

The quick brown fox jumps

Components

New

Card title

Components rendered with this language’s tokens — colors, type, and rounded corners as specified.

Spacing

board72px
lg16px
md12px
sm8px
unit4px
xl24px
xs4px
xxl32px
xxs2px
xxxl48px

Shape

board16px

note4px

pin9999px

tape0px

shadcn/ui

implementation kit

needs agent-authored kitcompatibility fallback

shadcn compatibility only

The generated theme variables are available, but the polished shadcn component recipes and shots have not been authored by the Katagami agent yet.

fallbackprimitives render

Compatibility proof

Local shadcn-style primitives accept the generated theme variables.

primaryaccentsurfacemutederror

table rhythm

button	ok
card	ok
input	ok

recommendedcompatibility fallback

DESIGN.md with shadcn

Copy this when the target app uses shadcn/ui. It packages the Katagami DESIGN.md context with the install list, theme variables, component recipes, preview-shot contract, and starter TSX in one Markdown companion.

advanced implementation filesoptional machine-readable theme, CSS, TSX starter, recipes, and preview contract

shadcn add

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

theme css

:root {
  --background: #f0ece4;
  --foreground: #2d2926;
  --card: #fff8b8;
  --card-foreground: #2d2926;
  --popover: #fff8b8;
  --popover-foreground: #2d2926;
  --primary: #c84d63;
  --primary-foreground: #ffffff;
  --secondary: #357f99;
  --secondary-foreground: #ffffff;
  --muted: #7a7268;
  --muted-foreground: #2d2926;
  --accent: #b97918;
  --accent-foreground: #ffffff;
  --destructive: #a83f3f;
  --border: rgba(45,41,38,0.10);
  --input: rgba(45,41,38,0.10);
  --ring: #b97918;
  --chart-1: #c84d63;
  --chart-2: #357f99;
  --chart-3: #b97918;
  --chart-4: #4c7a4f;
  --chart-5: #b97918;
  --sidebar: #fff8b8;
  --sidebar-foreground: #2d2926;
  --sidebar-primary: #c84d63;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #357f99;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(45,41,38,0.10);
  --sidebar-ring: #b97918;
  --radius: 0.625rem;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #c84d63;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #b97918;
  --accent-foreground: #ffffff;
  --destructive: #a83f3f;
  --border: #303642;
  --input: #303642;
  --ring: #b97918;
  --chart-1: #c84d63;
  --chart-2: #357f99;
  --chart-3: #b97918;
  --chart-4: #4c7a4f;
  --chart-5: #b97918;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #c84d63;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #b97918;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #b97918;
  --radius: 0.625rem;
}

tsx starter

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function FusenBoardShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Fusen Board</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}

theme JSONcompatibility fallback

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fusen-board",
  "type": "registry:theme",
  "title": "Fusen Board shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#f0ece4",
      "foreground": "#2d2926",
      "card": "#fff8b8",
      "card-foreground": "#2d2926",
      "popover": "#fff8b8",
      "popover-foreground": "#2d2926",
      "primary": "#c84d63",
      "primary-foreground": "#ffffff",
      "secondary": "#357f99",
      "secondary-foreground": "#ffffff",
      "muted": "#7a7268",
      "muted-foreground": "#2d2926",
      "accent": "#b97918",
      "accent-foreground": "#ffffff",
      "destructive": "#a83f3f",
      "border": "rgba(45,41,38,0.10)",
      "input": "rgba(45,41,38,0.10)",
      "ring": "#b97918",
      "chart-1": "#c84d63",
      "chart-2": "#357f99",
      "chart-3": "#b97918",
      "chart-4": "#4c7a4f",
      "chart-5": "#b97918",
      "sidebar": "#fff8b8",
      "sidebar-foreground": "#2d2926",
      "sidebar-primary": "#c84d63",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#357f99",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "rgba(45,41,38,0.10)",
      "sidebar-ring": "#b97918",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#c84d63",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#b97918",
      "accent-foreground": "#ffffff",
      "destructive": "#a83f3f",
      "border": "#303642",
      "input": "#303642",
      "ring": "#b97918",
      "chart-1": "#c84d63",
      "chart-2": "#357f99",
      "chart-3": "#b97918",
      "chart-4": "#4c7a4f",
      "chart-5": "#b97918",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#c84d63",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#b97918",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#b97918",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019dacd4-66ef-7d12-a005-aa22019a140b",
    "slug": "fusen-board",
    "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": {
      "borders": [
        "accent_width",
        "character",
        "color",
        "default_width",
        "focus",
        "note_edge",
        "style",
        "width"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "surface_blue",
        "surface_green",
        "surface_orange",
        "surface_pink",
        "surface_purple",
        "surface_yellow",
        "text",
        "warning"
      ],
      "motion": [
        "duration_fast",
        "duration_normal",
        "duration_slow",
        "easing_default",
        "easing_gentle",
        "hover",
        "reduced_motion"
      ],
      "radii": [
        "board",
        "note",
        "pin",
        "tape"
      ],
      "shadows": [
        "note",
        "note_hover",
        "pin",
        "stack"
      ],
      "spacing": [
        "board",
        "lg",
        "md",
        "sm",
        "unit",
        "xl",
        "xs",
        "xxl",
        "xxs",
        "xxxl"
      ],
      "surfaces": [
        "board",
        "note",
        "pin",
        "tape"
      ],
      "typography": [
        "base_size",
        "body_font",
        "font_body",
        "font_heading",
        "font_mono",
        "google_fonts_url",
        "heading_font",
        "leading",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio",
        "sizes",
        "tracking",
        "weights"
      ]
    }
  }
}

component recipescompatibility fallback

# Fusen Board shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019dacd4-66ef-7d12-a005-aa22019a140b`
Slug: `fusen-board`

## Intent

Fusen Board translates Japanese sticky-note planning culture into a warm corkboard interface where every container behaves like a physical paper note. The language favors tactile clustering, readable imperfection, visible pins and tape, and a cheerful high-density rhythm that feels actively used rather than digitally sterile.

## Required primitives

- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Install with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

## Token cues

Colors:

{
  "accent": "#b97918",
  "background": "#f0ece4",
  "border": "rgba(45,41,38,0.10)",
  "error": "#a83f3f",
  "info": "#357f99",
  "muted": "#7a7268",
  "primary": "#c84d63",
  "secondary": "#357f99",
  "success": "#4c7a4f",
  "surface": "#fff8b8",
  "surface_blue": "#c8e6ff",
  "surface_green": "#c8f0d4",
  "surface_orange": "#ffe0b8",
  "surface_pink": "#ffd4e0",
  "surface_purple": "#e0d0f0",
  "surface_yellow": "#fff8b8",
  "text": "#2d2926",
  "warning": "#b97918"
}

Typography:

{
  "base_size": "16px",
  "body_font": "Inter",
  "font_body": "Inter",
  "font_heading": "Nunito Sans",
  "font_mono": "JetBrains Mono",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&family=Nunito+Sans:wght@600;700;800;900&display=swap",
  "heading_font": "Nunito Sans",
  "leading": {
    "body": "1.55",
    "display": "1.12"
  },
  "letter_spacing": "-0.02em body, -0.035em display",
  "line_height": "1.55 body, 1.12 display",
  "mono_font": "JetBrains Mono",
  "scale_ratio": 1.22,
  "sizes": {
    "base": "1rem",
    "display": "3.3rem",
    "lg": "1.49rem",
    "md": "1.22rem",
    "sm": "0.875rem",
    "xl": "1.82rem",
    "xs": "0.75rem",
    "xxl": "2.22rem"
  },
  "tracking": {
    "body": "-0.02em",
    "display": "-0.035em",
    "mono": "-0.01em"
  },
  "weights": {
    "black": 900,
    "bold": 700,
    "medium": 500,
    "normal": 400,
    "semibold": 600
  }
}

## Visual character to preserve

- Pastel sticky-note surfaces use solid paper colors, small 4px rounded corners, subtle fiber overlays, and offset paper shadows so every content region reads as a movable note rather than a digital panel.
- A warm corkboard foundation appears behind the interface through dotted and speckled CSS background layers, making whitespace feel like exposed board material instead of empty web page space.
- Priority and anchoring are expressed with thumbtack circles, cream tape strips, and hand-drawn marker underlines built in CSS/SVG, giving hierarchy through stationery artifacts instead of generic badges.
- Composition is intentionally imperfect: note cards rotate between -2deg and 2deg, overlap in clustered columns, and vary in size so the product feels hand-arranged while preserving scanability.

## ShadSync visual profile

{
  "family": "paper-collage",
  "material": "paper",
  "contour": "blob",
  "border": "dashed",
  "underlay": true,
  "grain": true,
  "stickerBadges": true,
  "motion": "lift-rotate",
  "density": "dense",
  "accents": [
    "primary",
    "accent",
    "secondary",
    "muted"
  ]
}

## Signature component recipes

### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.

### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.

### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.

### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.

### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.

## Preview shots

- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.

## Implementation contract

- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/fusen-board/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: Use pastel sticky note colors as primary surface backgrounds for cards and controls.; Apply slight rotations (-2deg to 2deg) to note elements and remove them on small screens.; Include pin or tape decorations on important notes, but not on every element.; Use marker-pen accent colors for actions, emphasis, and hand-drawn underlines.; Layer notes with slight overlap to create physical depth and spatial grouping.; Use Nunito Sans for headings with tight tracking and Inter for legible body copy.; Apply paper-like box-shadows to all note elements for physical presence.; Keep note corners at 4px; pins remain fully round and tape remains square.
- Do not: Never use sharp 0px on sticky notes or large 16/24px card rounding for note surfaces.; Avoid pure white or pure black surfaces; the warm cork and paper palette should dominate.; Do not remove shadows from notes because paper depth is essential to the metaphor.; Never align all notes perfectly or make three equal cards in a row.; Avoid heavy borders; notes are defined by fill, texture, and shadow.; Do not use gradient fills on note paper; gradients are reserved for tiny metallic pins only.; Never rely on color alone for category or priority; include labels and placement.; Avoid generic SaaS dashboard labels such as Controls, Feedback, and Data.

## Copy-paste component example

This generated starter proves the import shape. Production Katagami agents should replace it with a language-specific product composition.

```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function FusenBoardShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Fusen Board</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}
```

## Layout notes

{
  "density": "High-density corkboard with compact 8-16px note clusters separated by broad 48-96px exposed cork fields; one oversized planning note anchors the scene.",
  "grid": "Asymmetric board grid: desktop uses 12 columns with a dominant 5-column note, dense 4-column work lane, and narrow 3-column reminders. Tablet collapses to 6 columns; mobile becomes one column with rotations removed.",
  "responsive": "Breakpoints at 1100px, 760px, and 520px. All grid/flex layout lives in CSS classes, no inline layout styles. Mobile removes overlaps, rotation, and side-by-side control rows for readability.",
  "whitespace": "Whitespace is exposed cork, not blank page. Use dramatic rhythm from 4px note details to 96px board margins so grouped thoughts feel close and separate projects breathe."
}

preview shotscompatibility fallback

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-019dacd4-66ef-7d12-a005-aa22019a140b",
    "name": "Fusen Board",
    "slug": "fusen-board"
  },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [
    "Pastel sticky-note surfaces use solid paper colors, small 4px rounded corners, subtle fiber overlays, and offset paper shadows so every content region reads as a movable note rather than a digital panel.",
    "A warm corkboard foundation appears behind the interface through dotted and speckled CSS background layers, making whitespace feel like exposed board material instead of empty web page space.",
    "Priority and anchoring are expressed with thumbtack circles, cream tape strips, and hand-drawn marker underlines built in CSS/SVG, giving hierarchy through stationery artifacts instead of generic badges.",
    "Composition is intentionally imperfect: note cards rotate between -2deg and 2deg, overlap in clustered columns, and vary in size so the product feels hand-arranged while preserving scanability."
  ],
  "visualProfile": {
    "family": "paper-collage",
    "material": "paper",
    "contour": "blob",
    "border": "dashed",
    "underlay": true,
    "grain": true,
    "stickerBadges": true,
    "motion": "lift-rotate",
    "density": "dense",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Fusen Board launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "Use pastel sticky note colors as primary surface backgrounds for cards and controls.",
      "Apply slight rotations (-2deg to 2deg) to note elements and remove them on small screens.",
      "Include pin or tape decorations on important notes, but not on every element.",
      "Use marker-pen accent colors for actions, emphasis, and hand-drawn underlines.",
      "Layer notes with slight overlap to create physical depth and spatial grouping.",
      "Use Nunito Sans for headings with tight tracking and Inter for legible body copy.",
      "Apply paper-like box-shadows to all note elements for physical presence.",
      "Keep note corners at 4px; pins remain fully round and tape remains square."
    ],
    "dont": [
      "Never use sharp 0px on sticky notes or large 16/24px card rounding for note surfaces.",
      "Avoid pure white or pure black surfaces; the warm cork and paper palette should dominate.",
      "Do not remove shadows from notes because paper depth is essential to the metaphor.",
      "Never align all notes perfectly or make three equal cards in a row.",
      "Avoid heavy borders; notes are defined by fill, texture, and shadow.",
      "Do not use gradient fills on note paper; gradients are reserved for tiny metallic pins only.",
      "Never rely on color alone for category or priority; include labels and placement.",
      "Avoid generic SaaS dashboard labels such as Controls, Feedback, and Data."
    ]
  }
}

More like this

Buncho Scrapbookshares japanese-ma · paper-texture · asymmetric-space Bungu Minimalshares japanese-ma · paper-texture · asymmetric-space Ink Wash Motionshares japanese-ma · paper-texture · asymmetric-space Japanese Stationery Grid Systemshares japanese-ma · paper-texture · asymmetric-space Kukan Press Gridshares japanese-ma · paper-texture · asymmetric-space Shuimo Mistshares japanese-ma · paper-texture · asymmetric-space