design language·storyboard-product-humanism

Storyboard Product Humanism

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

Storyboard Product Humanism treats illustration as the operating grammar of a product, not as decoration added after the interface is finished. It builds every screen from reusable narrative panels, pictogram strokes, caption rules, and product-image crops so teams can explain workflows with warmth while preserving brand coherence, accessibility, and clear decision hierarchy.

values

Use illustration to clarify product behavior before it entertains; every drawing must teach a state, action, or relationship.Keep the palette structured and reusable, with calm neutrals carrying the interface and one restrained coral accent for moments of human attention.Make imagery modular: scenes, pictograms, avatars, product cards, and empty states share the same stroke weight, corner geometry, and caption rhythm.Preserve product credibility through high contrast, measurable grids, explicit labels, and data panels that remain functional without the artwork.Center people through soft figures, conversational captions, and hand-authored microcopy while avoiding childish ornament or mascot overload.Let brand systems scale by swapping illustrated panels and accent fields without changing the underlying layout grammar.

anti-values

×Avoid loose spot illustrations that float outside the grid or compete with product tasks.×Avoid rainbow palettes, gratuitous gradients, and accent colors applied to every control.×Avoid generic SaaS dashboards where imagery is confined to a hero banner and does not shape the interface.×Avoid default icon sets; pictograms must share the language stroke, joints, and caption-lockup system.

tokens

colors12 items

primary

#1F4E5F

secondary

#6E7F80

accent

#E45F4C

background

#F7F0E4

surface

#FFFDF7

text

#172A2F

muted

#5F6E70

border

#23393F

error

#B83A34

success

#2F7A59

warning

#B9792A

info

#2E6E9E

typography8 items

heading font: Afacad Flux
body font: Schibsted Grotesk
mono font: M PLUS 1 Code
base size: 16px
scale ratio: 1.24
line height: 1.54
letter spacing: -0.02em
google fonts url: https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@500;600;700;800&family=Schibsted+Grotesk:wght@400;500;600;700&family=M+PLUS+1+Code:wght@500;600&display=swap

spacing2 items

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

radii5 items

none: 0
sm: 16px
md: 16px
lg: 24px
full: 9999px

shadows3 items

sm: 3px 3px 0 #23393F
md: 6px 6px 0 rgba(35, 57, 63, 0.22)
lg: 10px 10px 0 rgba(35, 57, 63, 0.18)

surfaces3 items

treatment: Warm paper surfaces with visible 2px ink outlines, sparse hatch overlays, and offset duplicate cards instead of blur or glass effects.
card style: 24px rounded storyboard panels, caption tabs attached to top-left edges, and small registration dots anchoring illustrated details.
bg pattern: Subtle cream dot grid plus diagonal hatch islands created with repeating-linear-gradient at low opacity.

borders4 items

default width: 2px
accent width: 4px
style: solid ink outlines with occasional dashed annotation connectors
character: Borders behave like illustration strokes: rounded joins, visible offsets, and clear separation between product planes and narrative panels.

motion3 items

duration: 180ms
easing: cubic-bezier(0.2, 0.8, 0.2, 1)
philosophy: Motion is a quick storyboard page-turn: controls lift by a few pixels, annotation pins pulse once, and panels never drift or bounce.

rules

composition

Build screens as a product storyboard: a left navigation rail, a primary narrative panel, supporting product-image tiles, and an evidence column. Keep every illustrated module snapped to an 8px grid, use caption tabs as section anchors, reserve accent color for one active decision path, and let pictograms sit inside functional containers rather than decorative margins.

hierarchy

Large Afacad Flux headings introduce the user problem, Schibsted Grotesk labels explain product actions, and M PLUS 1 Code is reserved for states, counts, and system identifiers. Hierarchy is created through bordered panel size, caption-tab position, stroke weight, and selective coral fills rather than heavy shadows or saturated color fields.

density

Medium density with generous breathing room around illustration panels and tighter spacing inside data rows, so the screen can carry many UI elements while still feeling like a guided product story.

signature patterns

Caption-tab panels: every major card has a small attached label tab, 2px border, and offset shadow that makes the module read like an annotated storyboard frame.Stroke-matched pictograms: inline SVG icons and mini scenes use CSS variables for a 2.25px rounded ink stroke, cream fills, and coral registration dots.Product-image collage tiles: screenshot bars, avatar chips, progress meters, and tiny table rows are composed inside illustration frames to make product imagery reusable.Dashed annotation connectors: coral pins connect people, decisions, and controls with dashed CSS lines so emphasis stays explanatory rather than decorative.Hatched accent shelves: restrained diagonal hatch textures appear behind selected panels and status bands, giving brand texture without relying on gradients.

layout

grid

Twelve-column desktop grid with 24px gutters and a 1360px max width; the main scene spans eight columns while evidence and controls occupy four columns.

breakpoints

Desktop 1200px and up uses storyboard plus evidence columns; tablet 768-1199px collapses the evidence rail below the narrative panel; mobile under 640px stacks panels, turns navigation into horizontal chips, and keeps tables scrollable.

whitespace

Use 24px between related storyboard panels, 32-48px between narrative zones, and compact 12px spacing inside controls so illustration has room without weakening product utility.

density

The language supports complex product education screens by clustering controls into captioned groups while leaving illustrated frames visually calm.

guidance

Use illustration frames to explain a real product state, onboarding step, empty state, or workflow handoff.
Keep one restrained accent path per screen: primary button, annotation pins, and one selected data row may share coral.
Reuse the same stroke width, rounded joints, caption tabs, and product-image tile grammar across icons, people, and UI mockups.
Write captions as helpful product guidance, not marketing slogans; the tab should clarify what the panel teaches.
Maintain AA contrast by placing text on cream or white surfaces and checking coral accents against dark ink when used for text.
Let data tables, forms, and controls remain fully usable when illustrations are removed; imagery should clarify, not carry core function alone.

avoid

Do not scatter unrelated spot illustrations around otherwise generic dashboard cards.
Do not use multiple accent colors or rainbow scene fills; the system depends on restrained coral emphasis.
Do not mix icon libraries with different stroke widths, filled glyphs, or sharp corner geometry.
Do not use glassmorphism, heavy blurred shadows, or glossy gradients because they conflict with the paper storyboard surface.
Do not hide labels behind icons only; the language is caption-forward and instructional.
Do not let decorative hatching reduce text readability or appear behind dense tables.

katagami spec

# Storyboard Product Humanism

## Philosophy

### Values

- Use illustration to clarify product behavior before it entertains; every drawing must teach a state, action, or relationship.
- Keep the palette structured and reusable, with calm neutrals carrying the interface and one restrained coral accent for moments of human attention.
- Make imagery modular: scenes, pictograms, avatars, product cards, and empty states share the same stroke weight, corner geometry, and caption rhythm.
- Preserve product credibility through high contrast, measurable grids, explicit labels, and data panels that remain functional without the artwork.
- Center people through soft figures, conversational captions, and hand-authored microcopy while avoiding childish ornament or mascot overload.
- Let brand systems scale by swapping illustrated panels and accent fields without changing the underlying layout grammar.

### Anti-Values

- Avoid loose spot illustrations that float outside the grid or compete with product tasks.
- Avoid rainbow palettes, gratuitous gradients, and accent colors applied to every control.
- Avoid generic SaaS dashboards where imagery is confined to a hero banner and does not shape the interface.
- Avoid default icon sets; pictograms must share the language stroke, joints, and caption-lockup system.

### Visual Character

- Use panelized illustration frames with 24px radii, 2px ink borders, caption tabs, and CSS grid placement so product imagery becomes layout structure.
- Draw pictograms and scene details with inline SVG using a consistent 2.25px rounded stroke, minimal fills, and small coral registration dots.
- Pair warm cream surfaces with blue-black text, slate product planes, and restrained coral accent blocks limited to calls-to-action and annotation pins.
- Create reusable product-image tiles that combine screenshot-like rectangles, avatar chips, progress meters, and caption strips inside the same bordered frame.
- Use offset paper-card layering with diagonal hatch textures and tiny label rails to make every module feel authored, systematic, and human-held.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#1F4E5F` |
| secondary | `#6E7F80` |
| accent | `#E45F4C` |
| background | `#F7F0E4` |
| surface | `#FFFDF7` |
| text | `#172A2F` |
| muted | `#5F6E70` |
| border | `#23393F` |
| error | `#B83A34` |
| success | `#2F7A59` |
| warning | `#B9792A` |
| info | `#2E6E9E` |

### Typography

- **Heading Font**: Afacad Flux
- **Body Font**: Schibsted Grotesk
- **Mono Font**: M PLUS 1 Code
- **Base Size**: 16px
- **Scale Ratio**: 1.24
- **Line Height**: 1.54
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@500;600;700;800&family=Schibsted+Grotesk:wght@400;500;600;700&family=M+PLUS+1+Code:wght@500;600&display=swap

### Spacing

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

### Radii

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

### Shadows

- **Sm**: 3px 3px 0 #23393F
- **Md**: 6px 6px 0 rgba(35, 57, 63, 0.22)
- **Lg**: 10px 10px 0 rgba(35, 57, 63, 0.18)

### Surfaces

- **Treatment**: Warm paper surfaces with visible 2px ink outlines, sparse hatch overlays, and offset duplicate cards instead of blur or glass effects.
- **Card Style**: 24px rounded storyboard panels, caption tabs attached to top-left edges, and small registration dots anchoring illustrated details.
- **Bg Pattern**: Subtle cream dot grid plus diagonal hatch islands created with repeating-linear-gradient at low opacity.

### Borders

- **Default Width**: 2px
- **Accent Width**: 4px
- **Style**: solid ink outlines with occasional dashed annotation connectors
- **Character**: Borders behave like illustration strokes: rounded joins, visible offsets, and clear separation between product planes and narrative panels.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: Motion is a quick storyboard page-turn: controls lift by a few pixels, annotation pins pulse once, and panels never drift or bounce.

## Rules

### Composition

Build screens as a product storyboard: a left navigation rail, a primary narrative panel, supporting product-image tiles, and an evidence column. Keep every illustrated module snapped to an 8px grid, use caption tabs as section anchors, reserve accent color for one active decision path, and let pictograms sit inside functional containers rather than decorative margins.

### Hierarchy

Large Afacad Flux headings introduce the user problem, Schibsted Grotesk labels explain product actions, and M PLUS 1 Code is reserved for states, counts, and system identifiers. Hierarchy is created through bordered panel size, caption-tab position, stroke weight, and selective coral fills rather than heavy shadows or saturated color fields.

### Density

Medium density with generous breathing room around illustration panels and tighter spacing inside data rows, so the screen can carry many UI elements while still feeling like a guided product story.

### Signature Patterns

- Caption-tab panels: every major card has a small attached label tab, 2px border, and offset shadow that makes the module read like an annotated storyboard frame.
- Stroke-matched pictograms: inline SVG icons and mini scenes use CSS variables for a 2.25px rounded ink stroke, cream fills, and coral registration dots.
- Product-image collage tiles: screenshot bars, avatar chips, progress meters, and tiny table rows are composed inside illustration frames to make product imagery reusable.
- Dashed annotation connectors: coral pins connect people, decisions, and controls with dashed CSS lines so emphasis stays explanatory rather than decorative.
- Hatched accent shelves: restrained diagonal hatch textures appear behind selected panels and status bands, giving brand texture without relying on gradients.

## Layout

### Grid

Twelve-column desktop grid with 24px gutters and a 1360px max width; the main scene spans eight columns while evidence and controls occupy four columns.

### Breakpoints

Desktop 1200px and up uses storyboard plus evidence columns; tablet 768-1199px collapses the evidence rail below the narrative panel; mobile under 640px stacks panels, turns navigation into horizontal chips, and keeps tables scrollable.

### Whitespace

Use 24px between related storyboard panels, 32-48px between narrative zones, and compact 12px spacing inside controls so illustration has room without weakening product utility.

### Density

The language supports complex product education screens by clustering controls into captioned groups while leaving illustrated frames visually calm.

## Guidance

### Do

- Use illustration frames to explain a real product state, onboarding step, empty state, or workflow handoff.
- Keep one restrained accent path per screen: primary button, annotation pins, and one selected data row may share coral.
- Reuse the same stroke width, rounded joints, caption tabs, and product-image tile grammar across icons, people, and UI mockups.
- Write captions as helpful product guidance, not marketing slogans; the tab should clarify what the panel teaches.
- Maintain AA contrast by placing text on cream or white surfaces and checking coral accents against dark ink when used for text.
- Let data tables, forms, and controls remain fully usable when illustrations are removed; imagery should clarify, not carry core function alone.

### Don't

- Do not scatter unrelated spot illustrations around otherwise generic dashboard cards.
- Do not use multiple accent colors or rainbow scene fills; the system depends on restrained coral emphasis.
- Do not mix icon libraries with different stroke widths, filled glyphs, or sharp corner geometry.
- Do not use glassmorphism, heavy blurred shadows, or glossy gradients because they conflict with the paper storyboard surface.
- Do not hide labels behind icons only; the language is caption-forward and instructional.
- Do not let decorative hatching reduce text readability or appear behind dense tables.

### Usage Context

Best for product onboarding, feature education, design-system documentation, empty states, help centers, and product-led growth surfaces that need imagery to behave as a governed visual language.

### Accessibility

All controls require visible focus rings, text contrast must meet WCAG AA, pictograms need text labels or aria labels, and annotation color must never be the only carrier of state.

DESIGN.md

---
version: "alpha"
name: "Storyboard Product Humanism"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  primary: "#1F4E5F"
  secondary: "#6E7F80"
  accent: "#E45F4C"
  background: "#F7F0E4"
  surface: "#FFFDF7"
  text: "#172A2F"
  muted: "#5F6E70"
  border: "#23393F"
  error: "#B83A34"
  success: "#2F7A59"
  warning: "#B9792A"
  info: "#2E6E9E"
typography:
  headline-lg:
    fontFamily: "Afacad Flux"
    fontSize: "1.907rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Afacad Flux"
    fontSize: "1.538rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Schibsted Grotesk"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.54
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "M PLUS 1 Code"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "16px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "20px"
  2xl: "24px"
  3xl: "32px"
  4xl: "48px"
  step-8: "64px"
  step-9: "96px"
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: "#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"
---

# Storyboard Product Humanism

## Overview

Storyboard Product Humanism treats illustration as the operating grammar of a product, not as decoration added after the interface is finished. It builds every screen from reusable narrative panels, pictogram strokes, caption rules, and product-image crops so teams can explain workflows with warmth while preserving brand coherence, accessibility, and clear decision hierarchy.

### Values

- Use illustration to clarify product behavior before it entertains; every drawing must teach a state, action, or relationship.
- Keep the palette structured and reusable, with calm neutrals carrying the interface and one restrained coral accent for moments of human attention.
- Make imagery modular: scenes, pictograms, avatars, product cards, and empty states share the same stroke weight, corner geometry, and caption rhythm.
- Preserve product credibility through high contrast, measurable grids, explicit labels, and data panels that remain functional without the artwork.
- Center people through soft figures, conversational captions, and hand-authored microcopy while avoiding childish ornament or mascot overload.
- Let brand systems scale by swapping illustrated panels and accent fields without changing the underlying layout grammar.

### Anti-Values

- Avoid loose spot illustrations that float outside the grid or compete with product tasks.
- Avoid rainbow palettes, gratuitous gradients, and accent colors applied to every control.
- Avoid generic SaaS dashboards where imagery is confined to a hero banner and does not shape the interface.
- Avoid default icon sets; pictograms must share the language stroke, joints, and caption-lockup system.

### Visual Character

- Use panelized illustration frames with 24px radii, 2px ink borders, caption tabs, and CSS grid placement so product imagery becomes layout structure.
- Draw pictograms and scene details with inline SVG using a consistent 2.25px rounded stroke, minimal fills, and small coral registration dots.
- Pair warm cream surfaces with blue-black text, slate product planes, and restrained coral accent blocks limited to calls-to-action and annotation pins.
- Create reusable product-image tiles that combine screenshot-like rectangles, avatar chips, progress meters, and caption strips inside the same bordered frame.
- Use offset paper-card layering with diagonal hatch textures and tiny label rails to make every module feel authored, systematic, and human-held.

## 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 | `#1F4E5F` |
| secondary | `#6E7F80` |
| accent | `#E45F4C` |
| background | `#F7F0E4` |
| surface | `#FFFDF7` |
| text | `#172A2F` |
| muted | `#5F6E70` |
| border | `#23393F` |
| error | `#B83A34` |
| success | `#2F7A59` |
| warning | `#B9792A` |
| info | `#2E6E9E` |

## Typography

- **Headline-Lg**: Afacad Flux, 1.907rem, weight 700, line-height 1.1.
- **Headline-Md**: Afacad Flux, 1.538rem, weight 600, line-height 1.15.
- **Body-Md**: Schibsted Grotesk, 16px, weight 400, line-height 1.54.
- **Label-Md**: M PLUS 1 Code, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `20px`
- **2xl**: `24px`
- **3xl**: `32px`
- **4xl**: `48px`
- **Step-8**: `64px`
- **Step-9**: `96px`

### Grid

Twelve-column desktop grid with 24px gutters and a 1360px max width; the main scene spans eight columns while evidence and controls occupy four columns.

### Breakpoints

Desktop 1200px and up uses storyboard plus evidence columns; tablet 768-1199px collapses the evidence rail below the narrative panel; mobile under 640px stacks panels, turns navigation into horizontal chips, and keeps tables scrollable.

### Whitespace

Use 24px between related storyboard panels, 32-48px between narrative zones, and compact 12px spacing inside controls so illustration has room without weakening product utility.

### Density

The language supports complex product education screens by clustering controls into captioned groups while leaving illustrated frames visually calm.

## Elevation & Depth

### Shadows

- **Sm**: 3px 3px 0 #23393F
- **Md**: 6px 6px 0 rgba(35, 57, 63, 0.22)
- **Lg**: 10px 10px 0 rgba(35, 57, 63, 0.18)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: Warm paper surfaces with visible 2px ink outlines, sparse hatch overlays, and offset duplicate cards instead of blur or glass effects.
- **Card Style**: 24px rounded storyboard panels, caption tabs attached to top-left edges, and small registration dots anchoring illustrated details.
- **Bg Pattern**: Subtle cream dot grid plus diagonal hatch islands created with repeating-linear-gradient at low opacity.

### Borders

- **Default Width**: 2px
- **Accent Width**: 4px
- **Style**: solid ink outlines with occasional dashed annotation connectors
- **Character**: Borders behave like illustration strokes: rounded joins, visible offsets, and clear separation between product planes and narrative panels.

## Components

### Composition

Build screens as a product storyboard: a left navigation rail, a primary narrative panel, supporting product-image tiles, and an evidence column. Keep every illustrated module snapped to an 8px grid, use caption tabs as section anchors, reserve accent color for one active decision path, and let pictograms sit inside functional containers rather than decorative margins.

### Hierarchy

Large Afacad Flux headings introduce the user problem, Schibsted Grotesk labels explain product actions, and M PLUS 1 Code is reserved for states, counts, and system identifiers. Hierarchy is created through bordered panel size, caption-tab position, stroke weight, and selective coral fills rather than heavy shadows or saturated color fields.

### Density

Medium density with generous breathing room around illustration panels and tighter spacing inside data rows, so the screen can carry many UI elements while still feeling like a guided product story.

### Signature Patterns

- Caption-tab panels: every major card has a small attached label tab, 2px border, and offset shadow that makes the module read like an annotated storyboard frame.
- Stroke-matched pictograms: inline SVG icons and mini scenes use CSS variables for a 2.25px rounded ink stroke, cream fills, and coral registration dots.
- Product-image collage tiles: screenshot bars, avatar chips, progress meters, and tiny table rows are composed inside illustration frames to make product imagery reusable.
- Dashed annotation connectors: coral pins connect people, decisions, and controls with dashed CSS lines so emphasis stays explanatory rather than decorative.
- Hatched accent shelves: restrained diagonal hatch textures appear behind selected panels and status bands, giving brand texture without relying on gradients.

## 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-019dde36-b96c-7e90-b0ba-34203947526b/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.

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

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Use illustration frames to explain a real product state, onboarding step, empty state, or workflow handoff.
- Do Keep one restrained accent path per screen: primary button, annotation pins, and one selected data row may share coral.
- Do Reuse the same stroke width, rounded joints, caption tabs, and product-image tile grammar across icons, people, and UI mockups.
- Do Write captions as helpful product guidance, not marketing slogans; the tab should clarify what the panel teaches.
- Do Maintain AA contrast by placing text on cream or white surfaces and checking coral accents against dark ink when used for text.
- Do Let data tables, forms, and controls remain fully usable when illustrations are removed; imagery should clarify, not carry core function alone.
- Don't Do not scatter unrelated spot illustrations around otherwise generic dashboard cards.
- Don't Do not use multiple accent colors or rainbow scene fills; the system depends on restrained coral emphasis.
- Don't Do not mix icon libraries with different stroke widths, filled glyphs, or sharp corner geometry.
- Don't Do not use glassmorphism, heavy blurred shadows, or glossy gradients because they conflict with the paper storyboard surface.
- Don't Do not hide labels behind icons only; the language is caption-forward and instructional.
- Don't Do not let decorative hatching reduce text readability or appear behind dense tables.

### Usage Context

Best for product onboarding, feature education, design-system documentation, empty states, help centers, and product-led growth surfaces that need imagery to behave as a governed visual language.

### Accessibility

All controls require visible focus rings, text contrast must meet WCAG AA, pictograms need text labels or aria labels, and annotation color must never be the only carrier of state.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "storyboard-product-humanism",
  "type": "registry:theme",
  "title": "Storyboard Product Humanism shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F0E4",
      "foreground": "#172A2F",
      "card": "#FFFDF7",
      "card-foreground": "#172A2F",
      "popover": "#FFFDF7",
      "popover-foreground": "#172A2F",
      "primary": "#1F4E5F",
      "primary-foreground": "#ffffff",
      "secondary": "#6E7F80",
      "secondary-foreground": "#ffffff",
      "muted": "#5F6E70",
      "muted-foreground": "#172A2F",
      "accent": "#E45F4C",
      "accent-foreground": "#ffffff",
      "destructive": "#B83A34",
      "border": "#23393F",
      "input": "#23393F",
      "ring": "#E45F4C",
      "chart-1": "#1F4E5F",
      "chart-2": "#6E7F80",
      "chart-3": "#E45F4C",
      "chart-4": "#2F7A59",
      "chart-5": "#B9792A",
      "sidebar": "#FFFDF7",
      "sidebar-foreground": "#172A2F",
      "sidebar-primary": "#1F4E5F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2E6E9E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#23393F",
      "sidebar-ring": "#E45F4C",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1F4E5F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#E45F4C",
      "accent-foreground": "#ffffff",
      "destructive": "#B83A34",
      "border": "#303642",
      "input": "#303642",
      "ring": "#E45F4C",
      "chart-1": "#1F4E5F",
      "chart-2": "#6E7F80",
      "chart-3": "#E45F4C",
      "chart-4": "#2F7A59",
      "chart-5": "#B9792A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1F4E5F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#E45F4C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#E45F4C",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019dde36-b96c-7e90-b0ba-34203947526b",
    "slug": "storyboard-product-humanism",
    "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"
      ]
    }
  }
}
```

in the wild

embodiments

the full element showcase

embodiment · storyboard-product-humanism

DESIGN.md

at a glance

Palette

Typography

headline-lgAfacad Flux · 31px · 700

The quick brown fox jumps

headline-mdAfacad Flux · 25px · 600

The quick brown fox jumps

body-mdSchibsted Grotesk · 16px · 400

The quick brown fox jumps

label-mdM PLUS 1 Code · 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
xl20px
2xl24px
3xl32px
4xl48px
step-864px
step-996px

Shape

none0px

sm16px

md16px

lg24px

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: #F7F0E4;
  --foreground: #172A2F;
  --card: #FFFDF7;
  --card-foreground: #172A2F;
  --popover: #FFFDF7;
  --popover-foreground: #172A2F;
  --primary: #1F4E5F;
  --primary-foreground: #ffffff;
  --secondary: #6E7F80;
  --secondary-foreground: #ffffff;
  --muted: #5F6E70;
  --muted-foreground: #172A2F;
  --accent: #E45F4C;
  --accent-foreground: #ffffff;
  --destructive: #B83A34;
  --border: #23393F;
  --input: #23393F;
  --ring: #E45F4C;
  --chart-1: #1F4E5F;
  --chart-2: #6E7F80;
  --chart-3: #E45F4C;
  --chart-4: #2F7A59;
  --chart-5: #B9792A;
  --sidebar: #FFFDF7;
  --sidebar-foreground: #172A2F;
  --sidebar-primary: #1F4E5F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2E6E9E;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #23393F;
  --sidebar-ring: #E45F4C;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #1F4E5F;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #E45F4C;
  --accent-foreground: #ffffff;
  --destructive: #B83A34;
  --border: #303642;
  --input: #303642;
  --ring: #E45F4C;
  --chart-1: #1F4E5F;
  --chart-2: #6E7F80;
  --chart-3: #E45F4C;
  --chart-4: #2F7A59;
  --chart-5: #B9792A;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #1F4E5F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #E45F4C;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #E45F4C;
  --radius: 16px;
}

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 StoryboardProductHumanismShadcnKit() {
  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">Storyboard Product Humanism</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": "storyboard-product-humanism",
  "type": "registry:theme",
  "title": "Storyboard Product Humanism shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F0E4",
      "foreground": "#172A2F",
      "card": "#FFFDF7",
      "card-foreground": "#172A2F",
      "popover": "#FFFDF7",
      "popover-foreground": "#172A2F",
      "primary": "#1F4E5F",
      "primary-foreground": "#ffffff",
      "secondary": "#6E7F80",
      "secondary-foreground": "#ffffff",
      "muted": "#5F6E70",
      "muted-foreground": "#172A2F",
      "accent": "#E45F4C",
      "accent-foreground": "#ffffff",
      "destructive": "#B83A34",
      "border": "#23393F",
      "input": "#23393F",
      "ring": "#E45F4C",
      "chart-1": "#1F4E5F",
      "chart-2": "#6E7F80",
      "chart-3": "#E45F4C",
      "chart-4": "#2F7A59",
      "chart-5": "#B9792A",
      "sidebar": "#FFFDF7",
      "sidebar-foreground": "#172A2F",
      "sidebar-primary": "#1F4E5F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2E6E9E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#23393F",
      "sidebar-ring": "#E45F4C",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1F4E5F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#E45F4C",
      "accent-foreground": "#ffffff",
      "destructive": "#B83A34",
      "border": "#303642",
      "input": "#303642",
      "ring": "#E45F4C",
      "chart-1": "#1F4E5F",
      "chart-2": "#6E7F80",
      "chart-3": "#E45F4C",
      "chart-4": "#2F7A59",
      "chart-5": "#B9792A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1F4E5F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#E45F4C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#E45F4C",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019dde36-b96c-7e90-b0ba-34203947526b",
    "slug": "storyboard-product-humanism",
    "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"
      ]
    }
  }
}

component recipescompatibility fallback

# Storyboard Product Humanism shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019dde36-b96c-7e90-b0ba-34203947526b`
Slug: `storyboard-product-humanism`

## Intent

Storyboard Product Humanism treats illustration as the operating grammar of a product, not as decoration added after the interface is finished. It builds every screen from reusable narrative panels, pictogram strokes, caption rules, and product-image crops so teams can explain workflows with warmth while preserving brand coherence, accessibility, and clear decision hierarchy.

## 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": "#1F4E5F",
  "secondary": "#6E7F80",
  "accent": "#E45F4C",
  "background": "#F7F0E4",
  "surface": "#FFFDF7",
  "text": "#172A2F",
  "muted": "#5F6E70",
  "border": "#23393F",
  "error": "#B83A34",
  "success": "#2F7A59",
  "warning": "#B9792A",
  "info": "#2E6E9E"
}

Typography:

{
  "heading_font": "Afacad Flux",
  "body_font": "Schibsted Grotesk",
  "mono_font": "M PLUS 1 Code",
  "base_size": "16px",
  "scale_ratio": 1.24,
  "line_height": 1.54,
  "letter_spacing": "-0.02em",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@500;600;700;800&family=Schibsted+Grotesk:wght@400;500;600;700&family=M+PLUS+1+Code:wght@500;600&display=swap"
}

## Visual character to preserve

- Use panelized illustration frames with 24px radii, 2px ink borders, caption tabs, and CSS grid placement so product imagery becomes layout structure.
- Draw pictograms and scene details with inline SVG using a consistent 2.25px rounded stroke, minimal fills, and small coral registration dots.
- Pair warm cream surfaces with blue-black text, slate product planes, and restrained coral accent blocks limited to calls-to-action and annotation pins.
- Create reusable product-image tiles that combine screenshot-like rectangles, avatar chips, progress meters, and caption strips inside the same bordered frame.
- Use offset paper-card layering with diagonal hatch textures and tiny label rails to make every module feel authored, systematic, and human-held.

## ShadSync visual profile

{
  "family": "paper-collage",
  "material": "paper",
  "contour": "default",
  "border": "dashed",
  "underlay": true,
  "grain": true,
  "stickerBadges": false,
  "motion": "lift",
  "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/storyboard-product-humanism/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: Use illustration frames to explain a real product state, onboarding step, empty state, or workflow handoff.; Keep one restrained accent path per screen: primary button, annotation pins, and one selected data row may share coral.; Reuse the same stroke width, rounded joints, caption tabs, and product-image tile grammar across icons, people, and UI mockups.; Write captions as helpful product guidance, not marketing slogans; the tab should clarify what the panel teaches.; Maintain AA contrast by placing text on cream or white surfaces and checking coral accents against dark ink when used for text.; Let data tables, forms, and controls remain fully usable when illustrations are removed; imagery should clarify, not carry core function alone.
- Do not: Do not scatter unrelated spot illustrations around otherwise generic dashboard cards.; Do not use multiple accent colors or rainbow scene fills; the system depends on restrained coral emphasis.; Do not mix icon libraries with different stroke widths, filled glyphs, or sharp corner geometry.; Do not use glassmorphism, heavy blurred shadows, or glossy gradients because they conflict with the paper storyboard surface.; Do not hide labels behind icons only; the language is caption-forward and instructional.; Do not let decorative hatching reduce text readability or appear behind dense tables.

## 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 StoryboardProductHumanismShadcnKit() {
  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">Storyboard Product Humanism</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": "Twelve-column desktop grid with 24px gutters and a 1360px max width; the main scene spans eight columns while evidence and controls occupy four columns.",
  "breakpoints": "Desktop 1200px and up uses storyboard plus evidence columns; tablet 768-1199px collapses the evidence rail below the narrative panel; mobile under 640px stacks panels, turns navigation into horizontal chips, and keeps tables scrollable.",
  "whitespace": "Use 24px between related storyboard panels, 32-48px between narrative zones, and compact 12px spacing inside controls so illustration has room without weakening product utility.",
  "density": "The language supports complex product education screens by clustering controls into captioned groups while leaving illustrated frames visually calm."
}

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-019dde36-b96c-7e90-b0ba-34203947526b",
    "name": "Storyboard Product Humanism",
    "slug": "storyboard-product-humanism"
  },
  "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": [
    "Use panelized illustration frames with 24px radii, 2px ink borders, caption tabs, and CSS grid placement so product imagery becomes layout structure.",
    "Draw pictograms and scene details with inline SVG using a consistent 2.25px rounded stroke, minimal fills, and small coral registration dots.",
    "Pair warm cream surfaces with blue-black text, slate product planes, and restrained coral accent blocks limited to calls-to-action and annotation pins.",
    "Create reusable product-image tiles that combine screenshot-like rectangles, avatar chips, progress meters, and caption strips inside the same bordered frame.",
    "Use offset paper-card layering with diagonal hatch textures and tiny label rails to make every module feel authored, systematic, and human-held."
  ],
  "visualProfile": {
    "family": "paper-collage",
    "material": "paper",
    "contour": "default",
    "border": "dashed",
    "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": "Storyboard Product Humanism launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "Use illustration frames to explain a real product state, onboarding step, empty state, or workflow handoff.",
      "Keep one restrained accent path per screen: primary button, annotation pins, and one selected data row may share coral.",
      "Reuse the same stroke width, rounded joints, caption tabs, and product-image tile grammar across icons, people, and UI mockups.",
      "Write captions as helpful product guidance, not marketing slogans; the tab should clarify what the panel teaches.",
      "Maintain AA contrast by placing text on cream or white surfaces and checking coral accents against dark ink when used for text.",
      "Let data tables, forms, and controls remain fully usable when illustrations are removed; imagery should clarify, not carry core function alone."
    ],
    "dont": [
      "Do not scatter unrelated spot illustrations around otherwise generic dashboard cards.",
      "Do not use multiple accent colors or rainbow scene fills; the system depends on restrained coral emphasis.",
      "Do not mix icon libraries with different stroke widths, filled glyphs, or sharp corner geometry.",
      "Do not use glassmorphism, heavy blurred shadows, or glossy gradients because they conflict with the paper storyboard surface.",
      "Do not hide labels behind icons only; the language is caption-forward and instructional.",
      "Do not let decorative hatching reduce text readability or appear behind dense tables."
    ]
  }
}

More like this

Captioned Clarityshares product-education