design language·washi-editorial-workspace-minimalism

Washi Editorial Workspace Minimalism

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

Draft

Download DESIGN.md

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

the spec

specification

philosophy

summary

A quiet text-first workspace language for weaving large amounts of context into readable editorial surfaces, using washi-like warmth, stencil-derived segmentation, and restrained marginal signals rather than decoration.

values

legible synthesis over dashboard spectaclenegative space as a working toollayered context with calm provenancecraft restraint translated into product structure

anti-values

×literal Japanese motifs or ornamental patterning×generic white SaaS cards with blue accents×dense metric walls that compete with reading×heavy shadows, gradients, or glossy surfaces

tokens

borders4 items

accent width: 2px
character: cool grey dividers define reading structure while tiny indigo or persimmon segments mark active state
default width: 1px
style: solid hairline with interrupted stencil gaps

colors12 items

accent

#315B7C

background

#F7F1E6

border

#C9C4B8

error

#A44735

info

#496D87

muted

#746F66

primary

#1F2A44

secondary

#D86B3D

success

#5F7B54

surface

#FFFCF4

text

#1B1A17

warning

#B97824

motion3 items

duration: 160ms
easing: cubic-bezier(0.2, 0, 0.1, 1)
philosophy: motion is a paper-settle response: short opacity and 1px translate transitions only, no bouncy movement

radii5 items

full: 9999px
lg: 8px
md: 4px
none: 0
sm: 2px

shadows3 items

lg: 0 18px 48px rgba(31, 42, 68, 0.10)
md: 0 8px 24px rgba(31, 42, 68, 0.07)
sm: 0 1px 0 rgba(31, 42, 68, 0.08)

spacing2 items

base: 8px
scale: 4, 8, 12, 16, 24, 32, 48, 64

surfaces3 items

bg pattern: barely visible vertical fibre texture and sparse registration ticks, never illustrative motifs
card style: flat document panels with hairline borders, cut-line corner notches, and reserved margins for annotations
treatment: matte washi paper fields with subtle fibre grain from layered radial gradients

typography8 items

base size: 16px
body font: IBM Plex Sans
google fonts url: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,650&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap
heading font: Fraunces
letter spacing: -0.012em
line height: 1.56
mono font: IBM Plex Mono
scale ratio: 1.22

rules

composition

Compose screens as document workbenches: a fixed context map at left, a wide editorial synthesis stream in the center, and a slim marginal column for provenance, metrics, and state.

density

Moderate density with high information content: compact summaries are allowed only when separated by rules, margins, and calm line-height.

hierarchy

Use serif headings and roomy paragraph rhythm for the main reading path, while labels, controls, and analytics remain small, sans, and rule-aligned.

signature patterns

Interrupted stencil borders use pseudo-elements to remove tiny segments from card edges and create a cut-paper registration feeling.Marginal metric slips sit outside the main text measure with mono numerals, hairline leaders, and tiny colored state pins.Context-map navigation uses stacked paper strips with left-edge ticks instead of filled tabs or large icons.Layered evidence blocks overlap by a few pixels with alternating off-white surfaces to show woven context without shadows.

layout

breakpoints

desktop >= 1180px keeps three columns; tablet 720-1179px stacks the margin rail under the editor; mobile < 720px becomes one column with horizontal context chips.

grid

Desktop uses 232px context rail, minmax(560px, 1fr) reading column, and 252px margin rail with 24px gutters on a 8px spacing base.

whitespace

Whitespace is asymmetric and editorial: the reading column has generous internal padding while metrics occupy narrow margins with clear air around every rule.

guidance

Keep color nearly absent and use indigo or persimmon only for state, focus, and small deltas.
Align analytics to document margins so metrics feel adjacent to reading rather than separate.
Use interrupted rules, registration ticks, and paper layering as structural devices.
Maintain accessible contrast between sumi text and warm paper backgrounds.

avoid

Do not use literal sakura, waves, fans, kanji decoration, or obvious Japanese ornament.
Do not turn the workspace into a generic card dashboard with bright charts.
Do not add soft glassmorphism, glossy gradients, or heavy elevation.
Do not let marginal signals overwhelm the primary text measure.

katagami spec

# Washi Editorial Workspace Minimalism

## Philosophy

A quiet text-first workspace language for weaving large amounts of context into readable editorial surfaces, using washi-like warmth, stencil-derived segmentation, and restrained marginal signals rather than decoration.

### Values

- legible synthesis over dashboard spectacle
- negative space as a working tool
- layered context with calm provenance
- craft restraint translated into product structure

### Anti-Values

- literal Japanese motifs or ornamental patterning
- generic white SaaS cards with blue accents
- dense metric walls that compete with reading
- heavy shadows, gradients, or glossy surfaces

### Visual Character

- Warm off-white page background with slightly darker paper panels separated by 1px cool grey rules and almost no drop shadow.
- Three-column editorial shell using a narrow context rail, a generous reading column, and a right marginal signal column that collapses responsively.
- Katagami stencil logic expressed as interrupted borders, small cut-line notches, and repeated registration ticks around modules.
- Typography pairs a humanist serif for document headings with a restrained sans for interface labels and a mono face for inline metrics.
- Indigo and persimmon appear only in tiny state chips, focus rings, metric deltas, and active navigation marks on otherwise neutral surfaces.

## Tokens

### Borders

- **Accent Width**: 2px
- **Character**: cool grey dividers define reading structure while tiny indigo or persimmon segments mark active state
- **Default Width**: 1px
- **Style**: solid hairline with interrupted stencil gaps

### Colors

| Name | Value |
|------|-------|
| accent | `#315B7C` |
| background | `#F7F1E6` |
| border | `#C9C4B8` |
| error | `#A44735` |
| info | `#496D87` |
| muted | `#746F66` |
| primary | `#1F2A44` |
| secondary | `#D86B3D` |
| success | `#5F7B54` |
| surface | `#FFFCF4` |
| text | `#1B1A17` |
| warning | `#B97824` |

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(0.2, 0, 0.1, 1)
- **Philosophy**: motion is a paper-settle response: short opacity and 1px translate transitions only, no bouncy movement

### Radii

- **Full**: 9999px
- **Lg**: 8px
- **Md**: 4px
- **None**: 0
- **Sm**: 2px

### Shadows

- **Lg**: 0 18px 48px rgba(31, 42, 68, 0.10)
- **Md**: 0 8px 24px rgba(31, 42, 68, 0.07)
- **Sm**: 0 1px 0 rgba(31, 42, 68, 0.08)

### Spacing

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

### Surfaces

- **Bg Pattern**: barely visible vertical fibre texture and sparse registration ticks, never illustrative motifs
- **Card Style**: flat document panels with hairline borders, cut-line corner notches, and reserved margins for annotations
- **Treatment**: matte washi paper fields with subtle fibre grain from layered radial gradients

### Typography

- **Base Size**: 16px
- **Body Font**: IBM Plex Sans
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,650&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap
- **Heading Font**: Fraunces
- **Letter Spacing**: -0.012em
- **Line Height**: 1.56
- **Mono Font**: IBM Plex Mono
- **Scale Ratio**: 1.22

## Rules

### Composition

Compose screens as document workbenches: a fixed context map at left, a wide editorial synthesis stream in the center, and a slim marginal column for provenance, metrics, and state.

### Density

Moderate density with high information content: compact summaries are allowed only when separated by rules, margins, and calm line-height.

### Hierarchy

Use serif headings and roomy paragraph rhythm for the main reading path, while labels, controls, and analytics remain small, sans, and rule-aligned.

### Signature Patterns

- Interrupted stencil borders use pseudo-elements to remove tiny segments from card edges and create a cut-paper registration feeling.
- Marginal metric slips sit outside the main text measure with mono numerals, hairline leaders, and tiny colored state pins.
- Context-map navigation uses stacked paper strips with left-edge ticks instead of filled tabs or large icons.
- Layered evidence blocks overlap by a few pixels with alternating off-white surfaces to show woven context without shadows.

## Layout

### Breakpoints

desktop >= 1180px keeps three columns; tablet 720-1179px stacks the margin rail under the editor; mobile < 720px becomes one column with horizontal context chips.

### Grid

Desktop uses 232px context rail, minmax(560px, 1fr) reading column, and 252px margin rail with 24px gutters on a 8px spacing base.

### Whitespace

Whitespace is asymmetric and editorial: the reading column has generous internal padding while metrics occupy narrow margins with clear air around every rule.

## Guidance

### Do

- Keep color nearly absent and use indigo or persimmon only for state, focus, and small deltas.
- Align analytics to document margins so metrics feel adjacent to reading rather than separate.
- Use interrupted rules, registration ticks, and paper layering as structural devices.
- Maintain accessible contrast between sumi text and warm paper backgrounds.

### Don't

- Do not use literal sakura, waves, fans, kanji decoration, or obvious Japanese ornament.
- Do not turn the workspace into a generic card dashboard with bright charts.
- Do not add soft glassmorphism, glossy gradients, or heavy elevation.
- Do not let marginal signals overwhelm the primary text measure.

DESIGN.md

---
version: "alpha"
name: "Washi Editorial Workspace Minimalism"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#315B7C"
  background: "#F7F1E6"
  border: "#C9C4B8"
  error: "#A44735"
  info: "#496D87"
  muted: "#746F66"
  primary: "#1F2A44"
  secondary: "#D86B3D"
  success: "#5F7B54"
  surface: "#FFFCF4"
  text: "#1B1A17"
  warning: "#B97824"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "1.816rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.012em"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "1.488rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.012em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: "-0.012em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "8px"
  md: "4px"
  none: "0px"
  sm: "2px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
components:
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  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-text:
    backgroundColor: "{colors.text}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  button-primary:
    backgroundColor: "{colors.primary}"
    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"
---

# Washi Editorial Workspace Minimalism

## Overview

A quiet text-first workspace language for weaving large amounts of context into readable editorial surfaces, using washi-like warmth, stencil-derived segmentation, and restrained marginal signals rather than decoration.

### Values

- legible synthesis over dashboard spectacle
- negative space as a working tool
- layered context with calm provenance
- craft restraint translated into product structure

### Anti-Values

- literal Japanese motifs or ornamental patterning
- generic white SaaS cards with blue accents
- dense metric walls that compete with reading
- heavy shadows, gradients, or glossy surfaces

### Visual Character

- Warm off-white page background with slightly darker paper panels separated by 1px cool grey rules and almost no drop shadow.
- Three-column editorial shell using a narrow context rail, a generous reading column, and a right marginal signal column that collapses responsively.
- Katagami stencil logic expressed as interrupted borders, small cut-line notches, and repeated registration ticks around modules.
- Typography pairs a humanist serif for document headings with a restrained sans for interface labels and a mono face for inline metrics.
- Indigo and persimmon appear only in tiny state chips, focus rings, metric deltas, and active navigation marks on otherwise neutral surfaces.

## 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 | `#315B7C` |
| background | `#F7F1E6` |
| border | `#C9C4B8` |
| error | `#A44735` |
| info | `#496D87` |
| muted | `#746F66` |
| primary | `#1F2A44` |
| secondary | `#D86B3D` |
| success | `#5F7B54` |
| surface | `#FFFCF4` |
| text | `#1B1A17` |
| warning | `#B97824` |

## Typography

- **Headline-Lg**: Fraunces, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: Fraunces, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 16px, weight 400, line-height 1.56.
- **Label-Md**: IBM Plex 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`

### Breakpoints

desktop >= 1180px keeps three columns; tablet 720-1179px stacks the margin rail under the editor; mobile < 720px becomes one column with horizontal context chips.

### Grid

Desktop uses 232px context rail, minmax(560px, 1fr) reading column, and 252px margin rail with 24px gutters on a 8px spacing base.

### Whitespace

Whitespace is asymmetric and editorial: the reading column has generous internal padding while metrics occupy narrow margins with clear air around every rule.

## Elevation & Depth

### Shadows

- **Lg**: 0 18px 48px rgba(31, 42, 68, 0.10)
- **Md**: 0 8px 24px rgba(31, 42, 68, 0.07)
- **Sm**: 0 1px 0 rgba(31, 42, 68, 0.08)

## Shapes

### Rounded

- **Full**: `9999px`
- **Lg**: `8px`
- **Md**: `4px`
- **None**: `0px`
- **Sm**: `2px`

### Surfaces

- **Bg Pattern**: barely visible vertical fibre texture and sparse registration ticks, never illustrative motifs
- **Card Style**: flat document panels with hairline borders, cut-line corner notches, and reserved margins for annotations
- **Treatment**: matte washi paper fields with subtle fibre grain from layered radial gradients

### Borders

- **Accent Width**: 2px
- **Character**: cool grey dividers define reading structure while tiny indigo or persimmon segments mark active state
- **Default Width**: 1px
- **Style**: solid hairline with interrupted stencil gaps

## Components

### Composition

Compose screens as document workbenches: a fixed context map at left, a wide editorial synthesis stream in the center, and a slim marginal column for provenance, metrics, and state.

### Density

Moderate density with high information content: compact summaries are allowed only when separated by rules, margins, and calm line-height.

### Hierarchy

Use serif headings and roomy paragraph rhythm for the main reading path, while labels, controls, and analytics remain small, sans, and rule-aligned.

### Signature Patterns

- Interrupted stencil borders use pseudo-elements to remove tiny segments from card edges and create a cut-paper registration feeling.
- Marginal metric slips sit outside the main text measure with mono numerals, hairline leaders, and tiny colored state pins.
- Context-map navigation uses stacked paper strips with left-edge ticks instead of filled tabs or large icons.
- Layered evidence blocks overlap by a few pixels with alternating off-white surfaces to show woven context without shadows.

## 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-019ee039-b06d-7bf0-9506-c50471e34e14/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 color nearly absent and use indigo or persimmon only for state, focus, and small deltas.
- Do Align analytics to document margins so metrics feel adjacent to reading rather than separate.
- Do Use interrupted rules, registration ticks, and paper layering as structural devices.
- Do Maintain accessible contrast between sumi text and warm paper backgrounds.
- Don't Do not use literal sakura, waves, fans, kanji decoration, or obvious Japanese ornament.
- Don't Do not turn the workspace into a generic card dashboard with bright charts.
- Don't Do not add soft glassmorphism, glossy gradients, or heavy elevation.
- Don't Do not let marginal signals overwhelm the primary text measure.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "washi-editorial-workspace-minimalism",
  "type": "registry:theme",
  "title": "Washi Editorial Workspace Minimalism shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F1E6",
      "foreground": "#1B1A17",
      "card": "#FFFCF4",
      "card-foreground": "#1B1A17",
      "popover": "#FFFCF4",
      "popover-foreground": "#1B1A17",
      "primary": "#1F2A44",
      "primary-foreground": "#ffffff",
      "secondary": "#D86B3D",
      "secondary-foreground": "#ffffff",
      "muted": "#746F66",
      "muted-foreground": "#1B1A17",
      "accent": "#315B7C",
      "accent-foreground": "#ffffff",
      "destructive": "#A44735",
      "border": "#C9C4B8",
      "input": "#C9C4B8",
      "ring": "#315B7C",
      "chart-1": "#1F2A44",
      "chart-2": "#D86B3D",
      "chart-3": "#315B7C",
      "chart-4": "#5F7B54",
      "chart-5": "#B97824",
      "sidebar": "#FFFCF4",
      "sidebar-foreground": "#1B1A17",
      "sidebar-primary": "#1F2A44",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#496D87",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#C9C4B8",
      "sidebar-ring": "#315B7C",
      "radius": "4px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1F2A44",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#315B7C",
      "accent-foreground": "#ffffff",
      "destructive": "#A44735",
      "border": "#303642",
      "input": "#303642",
      "ring": "#315B7C",
      "chart-1": "#1F2A44",
      "chart-2": "#D86B3D",
      "chart-3": "#315B7C",
      "chart-4": "#5F7B54",
      "chart-5": "#B97824",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1F2A44",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#315B7C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#315B7C",
      "radius": "4px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ee039-b06d-7bf0-9506-c50471e34e14",
    "slug": "washi-editorial-workspace-minimalism",
    "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",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}
```

in the wild

embodiments

the full element showcase

embodiment · washi-editorial-workspace-minimalism

DESIGN.md

at a glance

Palette

Typography

headline-lgFraunces · 29px · 700

The quick brown fox jumps

headline-mdFraunces · 24px · 600

The quick brown fox jumps

body-mdIBM Plex Sans · 16px · 400

The quick brown fox jumps

label-mdIBM Plex 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

base8px
xs4px
sm8px
md12px
lg16px
xl24px
2xl32px
3xl48px
4xl64px

Shape

full9999px

lg8px

md4px

none0px

sm2px

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.

primaryaccentsurfacemutedwarningerror

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: #F7F1E6;
  --foreground: #1B1A17;
  --card: #FFFCF4;
  --card-foreground: #1B1A17;
  --popover: #FFFCF4;
  --popover-foreground: #1B1A17;
  --primary: #1F2A44;
  --primary-foreground: #ffffff;
  --secondary: #D86B3D;
  --secondary-foreground: #ffffff;
  --muted: #746F66;
  --muted-foreground: #1B1A17;
  --accent: #315B7C;
  --accent-foreground: #ffffff;
  --destructive: #A44735;
  --border: #C9C4B8;
  --input: #C9C4B8;
  --ring: #315B7C;
  --chart-1: #1F2A44;
  --chart-2: #D86B3D;
  --chart-3: #315B7C;
  --chart-4: #5F7B54;
  --chart-5: #B97824;
  --sidebar: #FFFCF4;
  --sidebar-foreground: #1B1A17;
  --sidebar-primary: #1F2A44;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #496D87;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #C9C4B8;
  --sidebar-ring: #315B7C;
  --radius: 4px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #1F2A44;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #315B7C;
  --accent-foreground: #ffffff;
  --destructive: #A44735;
  --border: #303642;
  --input: #303642;
  --ring: #315B7C;
  --chart-1: #1F2A44;
  --chart-2: #D86B3D;
  --chart-3: #315B7C;
  --chart-4: #5F7B54;
  --chart-5: #B97824;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #1F2A44;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #315B7C;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #315B7C;
  --radius: 4px;
}

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 WashiEditorialWorkspaceMinimalismShadcnKit() {
  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">Washi Editorial Workspace Minimalism</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": "washi-editorial-workspace-minimalism",
  "type": "registry:theme",
  "title": "Washi Editorial Workspace Minimalism shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F1E6",
      "foreground": "#1B1A17",
      "card": "#FFFCF4",
      "card-foreground": "#1B1A17",
      "popover": "#FFFCF4",
      "popover-foreground": "#1B1A17",
      "primary": "#1F2A44",
      "primary-foreground": "#ffffff",
      "secondary": "#D86B3D",
      "secondary-foreground": "#ffffff",
      "muted": "#746F66",
      "muted-foreground": "#1B1A17",
      "accent": "#315B7C",
      "accent-foreground": "#ffffff",
      "destructive": "#A44735",
      "border": "#C9C4B8",
      "input": "#C9C4B8",
      "ring": "#315B7C",
      "chart-1": "#1F2A44",
      "chart-2": "#D86B3D",
      "chart-3": "#315B7C",
      "chart-4": "#5F7B54",
      "chart-5": "#B97824",
      "sidebar": "#FFFCF4",
      "sidebar-foreground": "#1B1A17",
      "sidebar-primary": "#1F2A44",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#496D87",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#C9C4B8",
      "sidebar-ring": "#315B7C",
      "radius": "4px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1F2A44",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#315B7C",
      "accent-foreground": "#ffffff",
      "destructive": "#A44735",
      "border": "#303642",
      "input": "#303642",
      "ring": "#315B7C",
      "chart-1": "#1F2A44",
      "chart-2": "#D86B3D",
      "chart-3": "#315B7C",
      "chart-4": "#5F7B54",
      "chart-5": "#B97824",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1F2A44",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#315B7C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#315B7C",
      "radius": "4px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ee039-b06d-7bf0-9506-c50471e34e14",
    "slug": "washi-editorial-workspace-minimalism",
    "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",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}

component recipescompatibility fallback

# Washi Editorial Workspace Minimalism shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ee039-b06d-7bf0-9506-c50471e34e14`
Slug: `washi-editorial-workspace-minimalism`

## Intent

A quiet text-first workspace language for weaving large amounts of context into readable editorial surfaces, using washi-like warmth, stencil-derived segmentation, and restrained marginal signals rather than decoration.

## 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": "#315B7C",
  "background": "#F7F1E6",
  "border": "#C9C4B8",
  "error": "#A44735",
  "info": "#496D87",
  "muted": "#746F66",
  "primary": "#1F2A44",
  "secondary": "#D86B3D",
  "success": "#5F7B54",
  "surface": "#FFFCF4",
  "text": "#1B1A17",
  "warning": "#B97824"
}

Typography:

{
  "base_size": "16px",
  "body_font": "IBM Plex Sans",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,650&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap",
  "heading_font": "Fraunces",
  "letter_spacing": "-0.012em",
  "line_height": 1.56,
  "mono_font": "IBM Plex Mono",
  "scale_ratio": 1.22
}

## Visual character to preserve

- Warm off-white page background with slightly darker paper panels separated by 1px cool grey rules and almost no drop shadow.
- Three-column editorial shell using a narrow context rail, a generous reading column, and a right marginal signal column that collapses responsively.
- Katagami stencil logic expressed as interrupted borders, small cut-line notches, and repeated registration ticks around modules.
- Typography pairs a humanist serif for document headings with a restrained sans for interface labels and a mono face for inline metrics.
- Indigo and persimmon appear only in tiny state chips, focus rings, metric deltas, and active navigation marks on otherwise neutral surfaces.

## ShadSync visual profile

{
  "family": "paper-collage",
  "material": "paper",
  "contour": "default",
  "border": "solid",
  "underlay": true,
  "grain": true,
  "stickerBadges": false,
  "motion": "still",
  "density": "balanced",
  "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/washi-editorial-workspace-minimalism/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: Keep color nearly absent and use indigo or persimmon only for state, focus, and small deltas.; Align analytics to document margins so metrics feel adjacent to reading rather than separate.; Use interrupted rules, registration ticks, and paper layering as structural devices.; Maintain accessible contrast between sumi text and warm paper backgrounds.
- Do not: Do not use literal sakura, waves, fans, kanji decoration, or obvious Japanese ornament.; Do not turn the workspace into a generic card dashboard with bright charts.; Do not add soft glassmorphism, glossy gradients, or heavy elevation.; Do not let marginal signals overwhelm the primary text measure.

## 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 WashiEditorialWorkspaceMinimalismShadcnKit() {
  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">Washi Editorial Workspace Minimalism</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

{
  "breakpoints": "desktop >= 1180px keeps three columns; tablet 720-1179px stacks the margin rail under the editor; mobile < 720px becomes one column with horizontal context chips.",
  "grid": "Desktop uses 232px context rail, minmax(560px, 1fr) reading column, and 252px margin rail with 24px gutters on a 8px spacing base.",
  "whitespace": "Whitespace is asymmetric and editorial: the reading column has generous internal padding while metrics occupy narrow margins with clear air around every rule."
}

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-019ee039-b06d-7bf0-9506-c50471e34e14",
    "name": "Washi Editorial Workspace Minimalism",
    "slug": "washi-editorial-workspace-minimalism"
  },
  "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": [
    "Warm off-white page background with slightly darker paper panels separated by 1px cool grey rules and almost no drop shadow.",
    "Three-column editorial shell using a narrow context rail, a generous reading column, and a right marginal signal column that collapses responsively.",
    "Katagami stencil logic expressed as interrupted borders, small cut-line notches, and repeated registration ticks around modules.",
    "Typography pairs a humanist serif for document headings with a restrained sans for interface labels and a mono face for inline metrics.",
    "Indigo and persimmon appear only in tiny state chips, focus rings, metric deltas, and active navigation marks on otherwise neutral surfaces."
  ],
  "visualProfile": {
    "family": "paper-collage",
    "material": "paper",
    "contour": "default",
    "border": "solid",
    "underlay": true,
    "grain": true,
    "stickerBadges": false,
    "motion": "still",
    "density": "balanced",
    "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": "Washi Editorial Workspace Minimalism 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": [
      "Keep color nearly absent and use indigo or persimmon only for state, focus, and small deltas.",
      "Align analytics to document margins so metrics feel adjacent to reading rather than separate.",
      "Use interrupted rules, registration ticks, and paper layering as structural devices.",
      "Maintain accessible contrast between sumi text and warm paper backgrounds."
    ],
    "dont": [
      "Do not use literal sakura, waves, fans, kanji decoration, or obvious Japanese ornament.",
      "Do not turn the workspace into a generic card dashboard with bright charts.",
      "Do not add soft glassmorphism, glossy gradients, or heavy elevation.",
      "Do not let marginal signals overwhelm the primary text measure."
    ]
  }
}

More like this

Chromatic Decision Labshares katagami Cinematic Sci-Fi Screen Graphicsshares text-first CRT Phosphor Command Interfaceshares text-first Ledgerline Paper Shellshares minimal Retro Computing 8-Bitshares text-first Retro Futurism CRTshares text-first