design language·watercolor-digital-hybrid

Watercolor Digital Hybrid

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

Watercolor Digital Hybrid treats interface design as a crafted sheet rather than a machine-perfect frame. It preserves the atmospheric bloom, pigment pooling, edge feathering, and paper warmth associated with watercolor illustration, but it does not collapse into nostalgia, scrapbook sentimentality, or bohemian chaos. Instead, it translates those handmade cues into a legible, modern interface rhythm where navigation remains crisp, interactions are immediate, and information architecture stays disciplined. The thesis is that digital products can feel authored by a hand without becoming fuzzy, childish, or imprecise. Surfaces look absorbent, gradients behave like pigment dilution rather than synthetic lighting, and dividers resemble controlled brush passes that separate content with gesture rather than rigid mechanical lines. Yet typography, spacing, and component alignment remain exact enough for contemporary product use. This language is especially suited to editorial tools, wellbeing products, creative utilities, education interfaces, and slow-tech applications that benefit from warmth and trust. Its values are tactility, humane pacing, and emotional softness in service of clarity. It rejects both sterile software flatness and retro craft theater. The result should feel like a designer used watercolor techniques to soften the emotional tone of a mature UI system, then carefully tuned contrast, hierarchy, and interaction states for real digital use. It is expressive, breathable, and intimate, but never vague about what is clickable, selected, disabled, or urgent.

values

Crafted tactility: every major surface should imply pigment on paper rather than plastic on glass, creating emotional warmth without sacrificing interface precision.Softened clarity: edges may bloom, feather, or diffuse in accents, but content blocks, labels, and interaction boundaries remain understandable at a glance.Organic pacing: spacing, color transitions, and sectional rhythm should feel composed like a page wash, with gentle transitions instead of abrupt fragmentation.Digital discipline: the system must still behave like modern software, with robust hierarchy, accessible contrast, and clear state changes for forms and controls.Atmospheric depth: value changes should come from translucent layering, paper shadow, and pigment density rather than glossy skeuomorphic tricks.Human intimacy: the interface should suggest care, patience, and authorship, making the product feel guided by a person rather than generated by a machine.Expressive restraint: decorative flourishes are meaningful and sparse; the language avoids flooding every surface with texture or illustration noise.

anti-values

×Sterile monochrome minimalism that removes all tactility and emotional warmth.×Vintage cosplay that imitates old stationery so literally that the product feels nostalgic instead of current.×Chaotic boho layering with uncontrolled color mixing, weak hierarchy, or decoration that obscures usability.×Glossy synthetic gradients and hard-edged neon effects that read as screen-light rather than pigment.×Handmade messiness used as an excuse for poor spacing, weak alignment, or inaccessible contrast.

tokens

colors12 items

primary

#6A8FA6

secondary

#C98A7D

accent

#C7A94A

background

#F5EDE2

surface

#FFF9F2

text

#3F3A36

muted

#8F8378

border

#CDBAA7

error

#B85C5C

success

#6F9273

warning

#D49A4C

info

#7A9BB8

typography8 items

heading font: Cormorant Garamond
body font: Manrope
mono font: IBM Plex Mono
base size: 16px
scale ratio: 1.25
line height: 1.6
letter spacing: 0.01em
google fonts url: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap

spacing2 items

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

radii5 items

none: 0
sm: 10px
md: 18px
lg: 28px
full: 9999px

shadows3 items

sm: 0 8px 18px rgba(106, 143, 166, 0.10)
md: 0 18px 40px rgba(118, 102, 88, 0.14)
lg: 0 26px 70px rgba(91, 73, 59, 0.16)

surfaces3 items

treatment: paper
card style: Layered vellum cards with translucent watercolor washes, edge bloom, and faint inner paper highlights
bg pattern: noise

borders4 items

default width: 1.5px
accent width: 3px
style: solid
character: Soft mineral borders that look slightly absorbed into paper, often reinforced by brush accents rather than heavy mechanical strokes

motion3 items

duration: 220ms
easing: cubic-bezier(0.22, 1, 0.36, 1)
philosophy: deliberate

responsive2 items

breakpoints: 1200px, 1024px, 768px, 480px
column progression: 12 -> 8 -> 4 -> 1

rules

composition

Compose the screen as an editorial workspace with one atmospheric hero zone, several softly separated tool panels, and a clear operational center. Large surfaces should feel washed in translucent color before they are subdivided into smaller crisp controls. Use asymmetry sparingly: pair broad open margins with dense islands of information so the page feels painted, not templated. Let major modules sit on independent paper sheets or vellum slips layered over the background wash. Separate content sections with brush dividers or tonal pools instead of sterile hairlines. Reserve the most saturated pigment for active moments and key calls to action. Allow decorative color bleed near the perimeter of modules, but keep internal alignment strict. Empty space should read like unpainted paper, offering breath between interaction clusters.

hierarchy

Headlines use elegant serif contrast and carry the emotional tone of the interface. Body copy and controls use a clean, contemporary sans to keep interactions legible. Metadata, timestamps, and numeric details use restrained mono typography. The highest hierarchy combines type scale, darker ink values, and stronger pigment concentration rather than larger blocks of chrome. Section intros may float above their containers like handwritten editorial notes, but actionable controls must sit inside stable card boundaries. Alerts and selections intensify color saturation while preserving the same soft edge logic. Buttons should never outshout the page; they should feel like deliberate brush-backed labels. Navigation relies on tone, underline washes, and weight shifts instead of rigid tab bars alone.

density

Moderate density with generous breathing room at the macro level and compact, precise rhythm within each card. The interface should feel spacious enough to notice texture and atmosphere, but not so sparse that it loses its usefulness as a working product.

signature patterns

Section dividers rendered as horizontal brush strokes using layered gradients and blurred feathered ends.Cards and panels with watercolor bloom overlays created by pseudo-elements that deepen pigment in one corner and diffuse toward the opposite edge.Paper-grain backgrounds built from subtle radial textures and low-contrast noise overlays across the page and major surfaces.Interactive highlights expressed as soft underpaint halos behind text labels and controls instead of hard glow outlines.Rounded geometry with selective edge blurring, where containers remain crisp in layout but shadows and overlays introduce handmade softness.

layout

grid

A 12-column desktop grid on a 1280px max-width canvas with 24px gutters, collapsing to 8 columns at 1024px, 4 columns at 768px, and a single-column stack at 480px. The hero summary occupies the wider left span while tools, alerts, and status modules occupy narrower companion columns. Tables live inside horizontally scrollable paper trays on smaller screens.

breakpoints

Desktop default above 1200px. At 1024px major regions reduce to two stacked bands with side modules moved below the hero. At 768px the planning board, metrics, and form panels stack vertically with preserved internal grouping. At 480px all action rows become full-width button stacks, tabs wrap, and filter controls collapse into a single column.

whitespace

Whitespace behaves like exposed paper and is essential to the tone. Outer margins are generous, allowing the background wash to breathe around content sheets. Inside cards, spacing follows an 8px rhythm but expands to 24px and 32px around section openings so texture is perceptible and content never feels glued to the border.

density

Macro density is low-to-moderate to preserve atmosphere; micro density is deliberate so data, forms, and status controls remain practical. Decorative texture should never consume the space needed for scanning, tapping, or editing.

responsive

The system maintains emotional softness at all sizes by preserving brush dividers, halo highlights, and paper backgrounds while simplifying multi-column arrangements. No module should require pinch zoom; tables gain horizontal scroll and supporting sidebars move below primary content.

guidance

Do use texture as atmosphere first and ornament second; let paper grain support readability rather than compete with text.
Do pair expressive serif headlines with calm sans-serif interface text so the product feels authored but still usable.
Do concentrate pigment in key states such as selection, completion, or active navigation to create emotional emphasis.
Do keep component edges consistent even when overlays and shadows are soft, preserving trustworthy interaction boundaries.
Do use brush dividers and underpaint halos to guide attention through the screen in place of generic separators.
Do reserve the warmest tones for human-facing, reflective, or encouraging moments like notes, progress, and recommendations.
Do test contrast on top of textured surfaces and increase text opacity where necessary rather than flattening the entire language.
Do let empty margins remain visible so the composition feels like a page with breathing room, not a fully flooded canvas.

avoid

Do not cover every surface in heavy watercolor effects; oversaturation makes the design theatrical and hard to scan.
Do not use nostalgic props such as torn tape, faux deckled edges, or literal stationery metaphors unless the product explicitly calls for them.
Do not let decorative blooms overlap essential text, icons, or form values.
Do not replace crisp state communication with vague softness; users must still recognize focus, selected, disabled, and error states instantly.
Do not use sharp neon gradients, metallic highlights, or glossy skeuomorphic reflections.
Do not rely on thin gray enterprise defaults for tables and inputs; even utility components should carry the language.
Do not compress spacing so tightly that the paper and pigment behaviors become invisible.
Do not confuse handmade warmth with inconsistency; alignment and spacing must remain rigorously intentional.

katagami spec

# Watercolor Digital Hybrid

## Philosophy

### Values

- Crafted tactility: every major surface should imply pigment on paper rather than plastic on glass, creating emotional warmth without sacrificing interface precision.
- Softened clarity: edges may bloom, feather, or diffuse in accents, but content blocks, labels, and interaction boundaries remain understandable at a glance.
- Organic pacing: spacing, color transitions, and sectional rhythm should feel composed like a page wash, with gentle transitions instead of abrupt fragmentation.
- Digital discipline: the system must still behave like modern software, with robust hierarchy, accessible contrast, and clear state changes for forms and controls.
- Atmospheric depth: value changes should come from translucent layering, paper shadow, and pigment density rather than glossy skeuomorphic tricks.
- Human intimacy: the interface should suggest care, patience, and authorship, making the product feel guided by a person rather than generated by a machine.
- Expressive restraint: decorative flourishes are meaningful and sparse; the language avoids flooding every surface with texture or illustration noise.

### Anti-Values

- Sterile monochrome minimalism that removes all tactility and emotional warmth.
- Vintage cosplay that imitates old stationery so literally that the product feels nostalgic instead of current.
- Chaotic boho layering with uncontrolled color mixing, weak hierarchy, or decoration that obscures usability.
- Glossy synthetic gradients and hard-edged neon effects that read as screen-light rather than pigment.
- Handmade messiness used as an excuse for poor spacing, weak alignment, or inaccessible contrast.

### Visual Character

- Brush-stroke dividers with feathered ends that separate sections like a single loaded paint pass.
- Pigment-like opacity shifts inside cards and panels, with translucent pools that deepen near edges or corners.
- Subtle paper grain and fibrous noise across backgrounds and surfaces, suggesting absorbent stock rather than flat pixels.
- Warm organic palettes built from mineral blues, clay rose, diluted moss, parchment cream, and dusk ink.
- Handmade softness around otherwise crisp UI geometry, where corners, shadows, and highlights feel lightly blotted instead of mathematically hard.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#6A8FA6` |
| secondary | `#C98A7D` |
| accent | `#C7A94A` |
| background | `#F5EDE2` |
| surface | `#FFF9F2` |
| text | `#3F3A36` |
| muted | `#8F8378` |
| border | `#CDBAA7` |
| error | `#B85C5C` |
| success | `#6F9273` |
| warning | `#D49A4C` |
| info | `#7A9BB8` |

### Typography

- **Heading Font**: Cormorant Garamond
- **Body Font**: Manrope
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.6
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap

### Spacing

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

### Radii

- **None**: 0
- **Sm**: 10px
- **Md**: 18px
- **Lg**: 28px
- **Full**: 9999px

### Shadows

- **Sm**: 0 8px 18px rgba(106, 143, 166, 0.10)
- **Md**: 0 18px 40px rgba(118, 102, 88, 0.14)
- **Lg**: 0 26px 70px rgba(91, 73, 59, 0.16)

### Surfaces

- **Treatment**: paper
- **Card Style**: Layered vellum cards with translucent watercolor washes, edge bloom, and faint inner paper highlights
- **Bg Pattern**: noise

### Borders

- **Default Width**: 1.5px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: Soft mineral borders that look slightly absorbed into paper, often reinforced by brush accents rather than heavy mechanical strokes

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(0.22, 1, 0.36, 1)
- **Philosophy**: deliberate

### Responsive

- **Breakpoints**: ["1200px","1024px","768px","480px"]
- **Column Progression**: 12 -> 8 -> 4 -> 1

## Rules

### Composition

Compose the screen as an editorial workspace with one atmospheric hero zone, several softly separated tool panels, and a clear operational center. Large surfaces should feel washed in translucent color before they are subdivided into smaller crisp controls. Use asymmetry sparingly: pair broad open margins with dense islands of information so the page feels painted, not templated. Let major modules sit on independent paper sheets or vellum slips layered over the background wash. Separate content sections with brush dividers or tonal pools instead of sterile hairlines. Reserve the most saturated pigment for active moments and key calls to action. Allow decorative color bleed near the perimeter of modules, but keep internal alignment strict. Empty space should read like unpainted paper, offering breath between interaction clusters.

### Hierarchy

Headlines use elegant serif contrast and carry the emotional tone of the interface. Body copy and controls use a clean, contemporary sans to keep interactions legible. Metadata, timestamps, and numeric details use restrained mono typography. The highest hierarchy combines type scale, darker ink values, and stronger pigment concentration rather than larger blocks of chrome. Section intros may float above their containers like handwritten editorial notes, but actionable controls must sit inside stable card boundaries. Alerts and selections intensify color saturation while preserving the same soft edge logic. Buttons should never outshout the page; they should feel like deliberate brush-backed labels. Navigation relies on tone, underline washes, and weight shifts instead of rigid tab bars alone.

### Density

Moderate density with generous breathing room at the macro level and compact, precise rhythm within each card. The interface should feel spacious enough to notice texture and atmosphere, but not so sparse that it loses its usefulness as a working product.

### Signature Patterns

- Section dividers rendered as horizontal brush strokes using layered gradients and blurred feathered ends.
- Cards and panels with watercolor bloom overlays created by pseudo-elements that deepen pigment in one corner and diffuse toward the opposite edge.
- Paper-grain backgrounds built from subtle radial textures and low-contrast noise overlays across the page and major surfaces.
- Interactive highlights expressed as soft underpaint halos behind text labels and controls instead of hard glow outlines.
- Rounded geometry with selective edge blurring, where containers remain crisp in layout but shadows and overlays introduce handmade softness.

## Layout

### Grid

A 12-column desktop grid on a 1280px max-width canvas with 24px gutters, collapsing to 8 columns at 1024px, 4 columns at 768px, and a single-column stack at 480px. The hero summary occupies the wider left span while tools, alerts, and status modules occupy narrower companion columns. Tables live inside horizontally scrollable paper trays on smaller screens.

### Breakpoints

Desktop default above 1200px. At 1024px major regions reduce to two stacked bands with side modules moved below the hero. At 768px the planning board, metrics, and form panels stack vertically with preserved internal grouping. At 480px all action rows become full-width button stacks, tabs wrap, and filter controls collapse into a single column.

### Whitespace

Whitespace behaves like exposed paper and is essential to the tone. Outer margins are generous, allowing the background wash to breathe around content sheets. Inside cards, spacing follows an 8px rhythm but expands to 24px and 32px around section openings so texture is perceptible and content never feels glued to the border.

### Density

Macro density is low-to-moderate to preserve atmosphere; micro density is deliberate so data, forms, and status controls remain practical. Decorative texture should never consume the space needed for scanning, tapping, or editing.

### Responsive

The system maintains emotional softness at all sizes by preserving brush dividers, halo highlights, and paper backgrounds while simplifying multi-column arrangements. No module should require pinch zoom; tables gain horizontal scroll and supporting sidebars move below primary content.

## Guidance

### Do

- Do use texture as atmosphere first and ornament second; let paper grain support readability rather than compete with text.
- Do pair expressive serif headlines with calm sans-serif interface text so the product feels authored but still usable.
- Do concentrate pigment in key states such as selection, completion, or active navigation to create emotional emphasis.
- Do keep component edges consistent even when overlays and shadows are soft, preserving trustworthy interaction boundaries.
- Do use brush dividers and underpaint halos to guide attention through the screen in place of generic separators.
- Do reserve the warmest tones for human-facing, reflective, or encouraging moments like notes, progress, and recommendations.
- Do test contrast on top of textured surfaces and increase text opacity where necessary rather than flattening the entire language.
- Do let empty margins remain visible so the composition feels like a page with breathing room, not a fully flooded canvas.

### Don't

- Do not cover every surface in heavy watercolor effects; oversaturation makes the design theatrical and hard to scan.
- Do not use nostalgic props such as torn tape, faux deckled edges, or literal stationery metaphors unless the product explicitly calls for them.
- Do not let decorative blooms overlap essential text, icons, or form values.
- Do not replace crisp state communication with vague softness; users must still recognize focus, selected, disabled, and error states instantly.
- Do not use sharp neon gradients, metallic highlights, or glossy skeuomorphic reflections.
- Do not rely on thin gray enterprise defaults for tables and inputs; even utility components should carry the language.
- Do not compress spacing so tightly that the paper and pigment behaviors become invisible.
- Do not confuse handmade warmth with inconsistency; alignment and spacing must remain rigorously intentional.

### Usage Context

Best for editorial workflows, journaling or wellbeing products, educational tools, portfolio systems, creative dashboards, and any interface that benefits from calm warmth and a sense of human care. Less suitable for extreme high-frequency trading contexts, hyper-technical monitoring consoles, or products that require aggressively dense tabular control surfaces.

### Accessibility

Maintain strong ink-to-paper contrast, especially on textured surfaces. Provide hover, focus, active, disabled, and error states through both color and shape treatments. Keep texture opacity low enough to avoid muddy reading conditions. Ensure interactive targets remain generously sized, with mobile controls expanding to full width where needed. Do not communicate meaning through watercolor hue alone; pair tone shifts with text labels, icons, borders, or checked states.

DESIGN.md

---
version: "alpha"
name: "Watercolor Digital Hybrid"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
primary: "#6A8FA6"
secondary: "#C98A7D"
accent: "#C7A94A"
background: "#F5EDE2"
surface: "#FFF9F2"
text: "#3F3A36"
muted: "#8F8378"
border: "#CDBAA7"
error: "#B85C5C"
success: "#6F9273"
warning: "#D49A4C"
info: "#7A9BB8"
typography:
headline-lg:
fontFamily: "Cormorant Garamond"
fontSize: "1.953rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "0.01em"
headline-md:
fontFamily: "Cormorant Garamond"
fontSize: "1.563rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "0.01em"
body-md:
fontFamily: "Manrope"
fontSize: "16px"
fontWeight: 400
lineHeight: 1.6
letterSpacing: "0.01em"
label-md:
fontFamily: "IBM Plex Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
sm: "10px"
md: "18px"
lg: "28px"
full: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
step-8: "88px"
components:
color-reference-primary:
backgroundColor: "{colors.primary}"
color-reference-secondary:
backgroundColor: "{colors.secondary}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-background:
backgroundColor: "{colors.background}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-warning:
backgroundColor: "{colors.warning}"
color-reference-info:
backgroundColor: "{colors.info}"
button-primary:
backgroundColor: "{colors.primary}"
textColor: "#000000"
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"
---

# Watercolor Digital Hybrid

## Overview

### Values

### Anti-Values

### 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 |
|-------|-------|
| primary | `#6A8FA6` |
| secondary | `#C98A7D` |
| accent | `#C7A94A` |
| background | `#F5EDE2` |
| surface | `#FFF9F2` |
| text | `#3F3A36` |
| muted | `#8F8378` |
| border | `#CDBAA7` |
| error | `#B85C5C` |
| success | `#6F9273` |
| warning | `#D49A4C` |
| info | `#7A9BB8` |

## Typography

- **Headline-Lg**: Cormorant Garamond, 1.953rem, weight 700, line-height 1.1.
- **Headline-Md**: Cormorant Garamond, 1.563rem, weight 600, line-height 1.15.
- **Body-Md**: Manrope, 16px, weight 400, line-height 1.6.
- **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`
- **Step-8**: `88px`

### Grid

### Breakpoints

### Whitespace

### Density

### Responsive

## Elevation & Depth

### Shadows

- **Sm**: 0 8px 18px rgba(106, 143, 166, 0.10)
- **Md**: 0 18px 40px rgba(118, 102, 88, 0.14)
- **Lg**: 0 26px 70px rgba(91, 73, 59, 0.16)

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `10px`
- **Md**: `18px`
- **Lg**: `28px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: paper
- **Card Style**: Layered vellum cards with translucent watercolor washes, edge bloom, and faint inner paper highlights
- **Bg Pattern**: noise

### Borders

## Components

### Composition

### Hierarchy

### Density

### 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-019d9bb9-b7f1-7693-8b74-bf2939a156fa/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 Do use texture as atmosphere first and ornament second; let paper grain support readability rather than compete with text.
- Do Do pair expressive serif headlines with calm sans-serif interface text so the product feels authored but still usable.
- Do Do concentrate pigment in key states such as selection, completion, or active navigation to create emotional emphasis.
- Do Do keep component edges consistent even when overlays and shadows are soft, preserving trustworthy interaction boundaries.
- Do Do use brush dividers and underpaint halos to guide attention through the screen in place of generic separators.
- Do Do reserve the warmest tones for human-facing, reflective, or encouraging moments like notes, progress, and recommendations.
- Do Do test contrast on top of textured surfaces and increase text opacity where necessary rather than flattening the entire language.
- Do Do let empty margins remain visible so the composition feels like a page with breathing room, not a fully flooded canvas.
- Don't Do not cover every surface in heavy watercolor effects; oversaturation makes the design theatrical and hard to scan.
- Don't Do not use nostalgic props such as torn tape, faux deckled edges, or literal stationery metaphors unless the product explicitly calls for them.
- Don't Do not let decorative blooms overlap essential text, icons, or form values.
- Don't Do not replace crisp state communication with vague softness; users must still recognize focus, selected, disabled, and error states instantly.
- Don't Do not use sharp neon gradients, metallic highlights, or glossy skeuomorphic reflections.
- Don't Do not rely on thin gray enterprise defaults for tables and inputs; even utility components should carry the language.
- Don't Do not compress spacing so tightly that the paper and pigment behaviors become invisible.
- Don't Do not confuse handmade warmth with inconsistency; alignment and spacing must remain rigorously intentional.

### Usage Context

### Accessibility

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "watercolor-digital-hybrid",
  "type": "registry:theme",
  "title": "Watercolor Digital Hybrid shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F5EDE2",
      "foreground": "#3F3A36",
      "card": "#FFF9F2",
      "card-foreground": "#3F3A36",
      "popover": "#FFF9F2",
      "popover-foreground": "#3F3A36",
      "primary": "#6A8FA6",
      "primary-foreground": "#ffffff",
      "secondary": "#C98A7D",
      "secondary-foreground": "#ffffff",
      "muted": "#8F8378",
      "muted-foreground": "#3F3A36",
      "accent": "#C7A94A",
      "accent-foreground": "#ffffff",
      "destructive": "#B85C5C",
      "border": "#CDBAA7",
      "input": "#CDBAA7",
      "ring": "#C7A94A",
      "chart-1": "#6A8FA6",
      "chart-2": "#C98A7D",
      "chart-3": "#C7A94A",
      "chart-4": "#6F9273",
      "chart-5": "#D49A4C",
      "sidebar": "#FFF9F2",
      "sidebar-foreground": "#3F3A36",
      "sidebar-primary": "#6A8FA6",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#7A9BB8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#CDBAA7",
      "sidebar-ring": "#C7A94A",
      "radius": "18px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#6A8FA6",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C7A94A",
      "accent-foreground": "#ffffff",
      "destructive": "#B85C5C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C7A94A",
      "chart-1": "#6A8FA6",
      "chart-2": "#C98A7D",
      "chart-3": "#C7A94A",
      "chart-4": "#6F9273",
      "chart-5": "#D49A4C",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#6A8FA6",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C7A94A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C7A94A",
      "radius": "18px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019d9bb9-b7f1-7693-8b74-bf2939a156fa",
    "slug": "watercolor-digital-hybrid",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "responsive": [
        "breakpoints",
        "column_progression"
      ]
    }
  }
}
```

in the wild

embodiments

the full element showcase

embodiment · watercolor-digital-hybrid

DESIGN.md

at a glance

Palette

Typography

headline-lgCormorant Garamond · 31px · 700

The quick brown fox jumps

headline-mdCormorant Garamond · 25px · 600

The quick brown fox jumps

body-mdManrope · 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
step-888px

Shape

none0px

sm10px

md18px

lg28px

full9999px

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: #F5EDE2;
  --foreground: #3F3A36;
  --card: #FFF9F2;
  --card-foreground: #3F3A36;
  --popover: #FFF9F2;
  --popover-foreground: #3F3A36;
  --primary: #6A8FA6;
  --primary-foreground: #ffffff;
  --secondary: #C98A7D;
  --secondary-foreground: #ffffff;
  --muted: #8F8378;
  --muted-foreground: #3F3A36;
  --accent: #C7A94A;
  --accent-foreground: #ffffff;
  --destructive: #B85C5C;
  --border: #CDBAA7;
  --input: #CDBAA7;
  --ring: #C7A94A;
  --chart-1: #6A8FA6;
  --chart-2: #C98A7D;
  --chart-3: #C7A94A;
  --chart-4: #6F9273;
  --chart-5: #D49A4C;
  --sidebar: #FFF9F2;
  --sidebar-foreground: #3F3A36;
  --sidebar-primary: #6A8FA6;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #7A9BB8;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #CDBAA7;
  --sidebar-ring: #C7A94A;
  --radius: 18px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #6A8FA6;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #C7A94A;
  --accent-foreground: #ffffff;
  --destructive: #B85C5C;
  --border: #303642;
  --input: #303642;
  --ring: #C7A94A;
  --chart-1: #6A8FA6;
  --chart-2: #C98A7D;
  --chart-3: #C7A94A;
  --chart-4: #6F9273;
  --chart-5: #D49A4C;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #6A8FA6;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #C7A94A;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #C7A94A;
  --radius: 18px;
}

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 WatercolorDigitalHybridShadcnKit() {
  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">Watercolor Digital Hybrid</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": "watercolor-digital-hybrid",
  "type": "registry:theme",
  "title": "Watercolor Digital Hybrid shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F5EDE2",
      "foreground": "#3F3A36",
      "card": "#FFF9F2",
      "card-foreground": "#3F3A36",
      "popover": "#FFF9F2",
      "popover-foreground": "#3F3A36",
      "primary": "#6A8FA6",
      "primary-foreground": "#ffffff",
      "secondary": "#C98A7D",
      "secondary-foreground": "#ffffff",
      "muted": "#8F8378",
      "muted-foreground": "#3F3A36",
      "accent": "#C7A94A",
      "accent-foreground": "#ffffff",
      "destructive": "#B85C5C",
      "border": "#CDBAA7",
      "input": "#CDBAA7",
      "ring": "#C7A94A",
      "chart-1": "#6A8FA6",
      "chart-2": "#C98A7D",
      "chart-3": "#C7A94A",
      "chart-4": "#6F9273",
      "chart-5": "#D49A4C",
      "sidebar": "#FFF9F2",
      "sidebar-foreground": "#3F3A36",
      "sidebar-primary": "#6A8FA6",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#7A9BB8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#CDBAA7",
      "sidebar-ring": "#C7A94A",
      "radius": "18px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#6A8FA6",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C7A94A",
      "accent-foreground": "#ffffff",
      "destructive": "#B85C5C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C7A94A",
      "chart-1": "#6A8FA6",
      "chart-2": "#C98A7D",
      "chart-3": "#C7A94A",
      "chart-4": "#6F9273",
      "chart-5": "#D49A4C",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#6A8FA6",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C7A94A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C7A94A",
      "radius": "18px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019d9bb9-b7f1-7693-8b74-bf2939a156fa",
    "slug": "watercolor-digital-hybrid",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "responsive": [
        "breakpoints",
        "column_progression"
      ]
    }
  }
}

component recipescompatibility fallback

# Watercolor Digital Hybrid shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019d9bb9-b7f1-7693-8b74-bf2939a156fa`
Slug: `watercolor-digital-hybrid`

## Intent

Watercolor Digital Hybrid treats interface design as a crafted sheet rather than a machine-perfect frame. It preserves the atmospheric bloom, pigment pooling, edge feathering, and paper warmth associated with watercolor illustration, but it does not collapse into nostalgia, scrapbook sentimentality, or bohemian chaos. Instead, it translates those handmade cues into a legible, modern interface rhythm where navigation remains crisp, interactions are immediate, and information architecture stays disciplined. The thesis is that digital products can feel authored by a hand without becoming fuzzy, childish, or imprecise. Surfaces look absorbent, gradients behave like pigment dilution rather than synthetic lighting, and dividers resemble controlled brush passes that separate content with gesture rather than rigid mechanical lines. Yet typography, spacing, and component alignment remain exact enough for contemporary product use. This language is especially suited to editorial tools, wellbeing products, creative utilities, education interfaces, and slow-tech applications that benefit from warmth and trust. Its values are tactility, humane pacing, and emotional softness in service of clarity. It rejects both sterile software flatness and retro craft theater. The result should feel like a designer used watercolor techniques to soften the emotional tone of a mature UI system, then carefully tuned contrast, hierarchy, and interaction states for real digital use. It is expressive, breathable, and intimate, but never vague about what is clickable, selected, disabled, or urgent.

## 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:

{
  "primary": "#6A8FA6",
  "secondary": "#C98A7D",
  "accent": "#C7A94A",
  "background": "#F5EDE2",
  "surface": "#FFF9F2",
  "text": "#3F3A36",
  "muted": "#8F8378",
  "border": "#CDBAA7",
  "error": "#B85C5C",
  "success": "#6F9273",
  "warning": "#D49A4C",
  "info": "#7A9BB8"
}

Typography:

{
  "heading_font": "Cormorant Garamond",
  "body_font": "Manrope",
  "mono_font": "IBM Plex Mono",
  "base_size": "16px",
  "scale_ratio": 1.25,
  "line_height": 1.6,
  "letter_spacing": "0.01em",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap"
}

## Visual character to preserve

- Brush-stroke dividers with feathered ends that separate sections like a single loaded paint pass.
- Pigment-like opacity shifts inside cards and panels, with translucent pools that deepen near edges or corners.
- Subtle paper grain and fibrous noise across backgrounds and surfaces, suggesting absorbent stock rather than flat pixels.
- Warm organic palettes built from mineral blues, clay rose, diluted moss, parchment cream, and dusk ink.
- Handmade softness around otherwise crisp UI geometry, where corners, shadows, and highlights feel lightly blotted instead of mathematically hard.

## 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/watercolor-digital-hybrid/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: Do use texture as atmosphere first and ornament second; let paper grain support readability rather than compete with text.; Do pair expressive serif headlines with calm sans-serif interface text so the product feels authored but still usable.; Do concentrate pigment in key states such as selection, completion, or active navigation to create emotional emphasis.; Do keep component edges consistent even when overlays and shadows are soft, preserving trustworthy interaction boundaries.; Do use brush dividers and underpaint halos to guide attention through the screen in place of generic separators.; Do reserve the warmest tones for human-facing, reflective, or encouraging moments like notes, progress, and recommendations.; Do test contrast on top of textured surfaces and increase text opacity where necessary rather than flattening the entire language.; Do let empty margins remain visible so the composition feels like a page with breathing room, not a fully flooded canvas.
- Do not: Do not cover every surface in heavy watercolor effects; oversaturation makes the design theatrical and hard to scan.; Do not use nostalgic props such as torn tape, faux deckled edges, or literal stationery metaphors unless the product explicitly calls for them.; Do not let decorative blooms overlap essential text, icons, or form values.; Do not replace crisp state communication with vague softness; users must still recognize focus, selected, disabled, and error states instantly.; Do not use sharp neon gradients, metallic highlights, or glossy skeuomorphic reflections.; Do not rely on thin gray enterprise defaults for tables and inputs; even utility components should carry the language.; Do not compress spacing so tightly that the paper and pigment behaviors become invisible.; Do not confuse handmade warmth with inconsistency; alignment and spacing must remain rigorously intentional.

## 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 WatercolorDigitalHybridShadcnKit() {
  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">Watercolor Digital Hybrid</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

{
  "grid": "A 12-column desktop grid on a 1280px max-width canvas with 24px gutters, collapsing to 8 columns at 1024px, 4 columns at 768px, and a single-column stack at 480px. The hero summary occupies the wider left span while tools, alerts, and status modules occupy narrower companion columns. Tables live inside horizontally scrollable paper trays on smaller screens.",
  "breakpoints": "Desktop default above 1200px. At 1024px major regions reduce to two stacked bands with side modules moved below the hero. At 768px the planning board, metrics, and form panels stack vertically with preserved internal grouping. At 480px all action rows become full-width button stacks, tabs wrap, and filter controls collapse into a single column.",
  "whitespace": "Whitespace behaves like exposed paper and is essential to the tone. Outer margins are generous, allowing the background wash to breathe around content sheets. Inside cards, spacing follows an 8px rhythm but expands to 24px and 32px around section openings so texture is perceptible and content never feels glued to the border.",
  "density": "Macro density is low-to-moderate to preserve atmosphere; micro density is deliberate so data, forms, and status controls remain practical. Decorative texture should never consume the space needed for scanning, tapping, or editing.",
  "responsive": "The system maintains emotional softness at all sizes by preserving brush dividers, halo highlights, and paper backgrounds while simplifying multi-column arrangements. No module should require pinch zoom; tables gain horizontal scroll and supporting sidebars move below primary content."
}

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-019d9bb9-b7f1-7693-8b74-bf2939a156fa",
    "name": "Watercolor Digital Hybrid",
    "slug": "watercolor-digital-hybrid"
  },
  "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": [
    "Brush-stroke dividers with feathered ends that separate sections like a single loaded paint pass.",
    "Pigment-like opacity shifts inside cards and panels, with translucent pools that deepen near edges or corners.",
    "Subtle paper grain and fibrous noise across backgrounds and surfaces, suggesting absorbent stock rather than flat pixels.",
    "Warm organic palettes built from mineral blues, clay rose, diluted moss, parchment cream, and dusk ink.",
    "Handmade softness around otherwise crisp UI geometry, where corners, shadows, and highlights feel lightly blotted instead of mathematically hard."
  ],
  "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": "Watercolor Digital Hybrid 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": [
      "Do use texture as atmosphere first and ornament second; let paper grain support readability rather than compete with text.",
      "Do pair expressive serif headlines with calm sans-serif interface text so the product feels authored but still usable.",
      "Do concentrate pigment in key states such as selection, completion, or active navigation to create emotional emphasis.",
      "Do keep component edges consistent even when overlays and shadows are soft, preserving trustworthy interaction boundaries.",
      "Do use brush dividers and underpaint halos to guide attention through the screen in place of generic separators.",
      "Do reserve the warmest tones for human-facing, reflective, or encouraging moments like notes, progress, and recommendations.",
      "Do test contrast on top of textured surfaces and increase text opacity where necessary rather than flattening the entire language.",
      "Do let empty margins remain visible so the composition feels like a page with breathing room, not a fully flooded canvas."
    ],
    "dont": [
      "Do not cover every surface in heavy watercolor effects; oversaturation makes the design theatrical and hard to scan.",
      "Do not use nostalgic props such as torn tape, faux deckled edges, or literal stationery metaphors unless the product explicitly calls for them.",
      "Do not let decorative blooms overlap essential text, icons, or form values.",
      "Do not replace crisp state communication with vague softness; users must still recognize focus, selected, disabled, and error states instantly.",
      "Do not use sharp neon gradients, metallic highlights, or glossy skeuomorphic reflections.",
      "Do not rely on thin gray enterprise defaults for tables and inputs; even utility components should carry the language.",
      "Do not compress spacing so tightly that the paper and pigment behaviors become invisible.",
      "Do not confuse handmade warmth with inconsistency; alignment and spacing must remain rigorously intentional."
    ]
  }
}

More like this

Compact Editorial Ink Fine Artshares ink-wash · brush-gesture · void-composition Crossover Editorial Ink Fine Artshares ink-wash · brush-gesture · monochrome-contrast Digital Watercolor Texture Systemshares ink-wash · brush-gesture · void-composition E-Ink Neurography Manualsshares ink-wash · brush-gesture · void-composition Editorial Ink Atelier with Electric Accentsshares ink-wash · brush-gesture · void-composition Editorial Ink Fine Artshares ink-wash · brush-gesture · void-composition