Storybook Press

# Storybook Press

## Philosophy

Storybook Press translates classic and mid-century children’s book illustration into a product language for planning visual stories. It treats the interface like a freshly opened picture book: readable at arm’s length, built from simplified silhouettes, shaped by page-turn pacing, and warmed by the tactile evidence of ink, gouache, and limited-color printing. The language is not childish UI decoration; it borrows the craft discipline of picture books, where every spread must carry narrative, emotion, and orientation for a young reader before a word is read. Controls become caption slips, cards become pasted illustration boards, and large areas of white paper create the same anticipation that a quiet page does before the turn.

### Values

- {"name":"Sequential storytelling","explanation":"Arrange information as a left-to-right and top-to-bottom reading journey with clear beginnings, pauses, reveals, and endings rather than as a neutral dashboard grid."}
- {"name":"Print tactility","explanation":"Use paper grain, slight ink offsets, stippled shadows, and flat gouache blocks so digital surfaces feel printed and handled without becoming distressed or nostalgic pastiche."}
- {"name":"Child-readable clarity","explanation":"Favor large shapes, few competing colors, strong labels, and generous negative space so hierarchy is grasped quickly by readers with varied attention and literacy levels."}
- {"name":"Author-illustrator partnership","explanation":"Let text and image complete one another: captions, notes, and controls should sit beside visual story cards instead of overwhelming them."}
- {"name":"Limited-palette discipline","explanation":"Build pages from black ink, white paper, one warm red accent, muted blue, ochre, and green; reserve bright emphasis for moments that need a page-turn cue."}
- {"name":"Nursery-era ornament with restraint","explanation":"Use scallops, dotted rules, corner stamps, and tiny motif marks as framing devices, never as random confetti or decorative clutter."}

### Anti-Values

- {"name":"Toy-like interface gimmicks","explanation":"Avoid cartoon bounciness, rainbow palettes, sticker overload, or novelty fonts that reduce the craft tradition to children’s branding."}
- {"name":"Generic SaaS neutrality","explanation":"Do not make interchangeable white cards with a color swap; the printed page structure must be visible in borders, spacing, and composition."}
- {"name":"Synthetic polish","explanation":"Avoid glossy gradients, glassmorphism, excessive shadows, and hyper-smooth surfaces that contradict ink-and-paper warmth."}
- {"name":"Dense administrative tables","explanation":"Do not compress the narrative workspace into spreadsheet density; children’s-book pacing needs pauses and spacious spreads."}

### Visual Character

- Every major panel uses a 2px black ink border with a second offset pseudo-element shadow, creating the feel of a misregistered printed plate.
- Large white paper fields include fine radial speckle and faint horizontal fiber lines made with CSS background layers, while content remains on pure #FFFFFF.
- Story cards use simplified geometric illustration patches: flat gouache circles, hills, moons, and character silhouettes built from CSS shapes inside each card.
- Section headers sit on small caption ribbons with scalloped dotted underlines and tiny corner motif stamps, echoing nursery book title pages.
- Composition alternates roomy picture-spread cards with narrow caption columns, using playful negative space rather than uniform dashboard tiles.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#121212` |
| secondary | `#2F5F8F` |
| accent | `#C23B2A` |
| background | `#FFFFFF` |
| surface | `#FFFFFF` |
| text | `#121212` |
| muted | `#6F6A60` |
| border | `#121212` |
| error | `#B3261E` |
| success | `#2F6F4E` |
| warning | `#B77A18` |
| info | `#2F5F8F` |
| paper_fiber | `#E8E0D2` |
| ochre | `#D6A43A` |
| leaf | `#5F7F4F` |
| ink_soft | `#33302C` |

### Typography

- **Heading Font**: Fraunces
- **Body Font**: IBM Plex Sans
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.5
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap
- **Display Size**: clamp(2.5rem, 7vw, 6.25rem)
- **H1**: clamp(2rem, 4vw, 4rem)
- **H2**: clamp(1.375rem, 2vw, 2rem)
- **Body**: 1rem
- **Small**: 0.875rem

### Spacing

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

### Radii

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

### Shadows

- **Sm**: 3px 3px 0 #121212
- **Md**: 6px 6px 0 #121212
- **Lg**: 10px 10px 0 rgba(18,18,18,0.18)

### Surfaces

- **Treatment**: paper
- **Card Style**: Pure white paper cards with visible black ink rules, offset plate shadows, and subtle printed grain backgrounds.
- **Bg Pattern**: noise

### Borders

- **Default Width**: 2px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: Hand-inked black rules that are square and confident, sometimes doubled or offset like imperfect letterpress registration.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: snappy page-turn motion: tiny lifts, short slides, and no elastic bounce

## Rules

### Composition

Use spread-like compositions: a broad visual board paired with a narrower caption rail, then break rhythm with full-width page-turn panels. Keep no more than three major content clusters visible at a time. Anchor each cluster with an illustrated shape or printed motif. Let white space carry anticipation, especially before primary actions. Align controls to caption blocks, not to arbitrary card centers. Use framed panels, ribbons, and rule lines to create page architecture.

### Hierarchy

Display headings use Fraunces with strong optical sizing and black ink weight. Body text uses IBM Plex Sans for editorial clarity. Metadata and page numbers use IBM Plex Mono in small uppercase slips. Primary hierarchy is created by scale, border weight, and placement on the spread rather than color alone. Alerts and active states may use the warm red accent, but most information remains black on white.

### Density

Medium-low density with deliberate pauses: cards have 24px to 32px internal padding, large gutters, and short text measures. Dense data is converted into story strips, caption lists, and status stamps.

### Signature Patterns

- Apply an offset-registration pseudo-element to panels and cards using ::after with 6px translation and a solid ink or muted color layer behind the white surface.
- Create paper texture on body and cards with layered radial-gradient speckles and repeating-linear-gradient fiber lines at very low opacity on #FFFFFF.
- Use scalloped caption rules under section labels via repeating-radial-gradient backgrounds clipped to a 6px high underline strip.
- Build flat gouache illustration inserts from CSS-only circles, arches, hills, moons, and simplified silhouettes inside story cards.
- Use page-turn tabs and corner stamps: small square or round motif badges positioned at panel corners with mono page numbers and tiny decorative marks.

## Layout

### Density

Medium-low, chosen to preserve picture-book pacing and allow image-text interplay. Controls are grouped into caption rails while large panels keep narrative breathing room.

### Grid

Desktop uses a 12-column max-width 1280px grid with 24px gutters; the main spread spans 8 columns and the caption rail spans 4. Secondary cards form a 3-column story-strip grid. All containers use CSS grid or flex classes, never inline layout.

### Whitespace

Whitespace behaves like blank paper before a page turn: generous outer margins, quiet interior padding, and empty areas around illustrated shapes. Negative space should feel intentional and playful, not unfinished.

### Breakpoints

- **Desktop**: 1200px and up: 12 columns with spread plus rail
- **Tablet**: 768px-1199px: 6 columns, rail drops below hero and cards become two columns
- **Mobile**: 0-767px: single column, full-width controls, sticky navigation becomes compact story tabs
- **Small Mobile**: 480px and below: reduce display type and stack all action groups

## Guidance

### Do

- Start each screen by deciding the story sequence: what the user should notice, read, adjust, and turn to next.
- Use pure #FFFFFF as the page ground, then add paper texture with subtle CSS layers rather than cream backgrounds.
- Keep letter-spacing at -0.02em across headings, body, labels, and controls for a crafted editorial feel.
- Make borders structural: panels, inputs, buttons, and cards should use the black ink rule system consistently.
- Pair text with a visual cue such as a stamp, illustration patch, or caption ribbon when it marks a major state change.
- Use the warm red accent sparingly for page-turn actions, active tabs, warnings, and small emphasis stamps.
- Design responsive screens as reflowed book spreads: caption rails move below image panels before content becomes cramped.
- Style every input, select, checkbox, toggle, and focus state so no browser-default chrome breaks the printed world.

### Don't

- Do not use pastel page backgrounds, glossy gradients, glass panels, or rainbow accents.
- Do not mix random border radii; use 0px for square print cuts, 16px or 24px for rare soft cards, and 9999px only for pills.
- Do not treat motifs as confetti; each scallop, stamp, or dot rule must frame content or guide reading order.
- Do not replace narrative structure with a component catalog or generic analytics dashboard.
- Do not use Poppins, Montserrat, DM Sans, Space Grotesk, or loose default letter spacing.
- Do not compress story material into dense tables unless it can scroll horizontally on mobile as a deliberate ledger.
- Do not rely on color alone for state; combine stamps, borders, labels, and text.

### Usage Context

Best for editorial planning tools, children’s literature archives, classroom visual-story builders, museum education interfaces, creative writing workspaces, and publishing review screens where warmth and narrative clarity matter.

### Accessibility

Maintain black-on-white contrast for primary text, pair red and blue states with labels and icons, keep touch targets at least 44px, preserve visible focus outlines, and avoid motion beyond short transform transitions.

---
version: "alpha"
name: "Storybook Press"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  primary: "#121212"
  secondary: "#2F5F8F"
  accent: "#C23B2A"
  background: "#FFFFFF"
  surface: "#FFFFFF"
  text: "#121212"
  muted: "#6F6A60"
  border: "#121212"
  error: "#B3261E"
  success: "#2F6F4E"
  warning: "#B77A18"
  info: "#2F5F8F"
  paper_fiber: "#E8E0D2"
  ochre: "#D6A43A"
  leaf: "#5F7F4F"
  ink_soft: "#33302C"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "1.953rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "1.563rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "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}"
  color-reference-paper_fiber:
    backgroundColor: "{colors.paper_fiber}"
  color-reference-ochre:
    backgroundColor: "{colors.ochre}"
  color-reference-leaf:
    backgroundColor: "{colors.leaf}"
  color-reference-ink_soft:
    backgroundColor: "{colors.ink_soft}"
  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"
---

# Storybook Press

## Overview

Storybook Press translates classic and mid-century children’s book illustration into a product language for planning visual stories. It treats the interface like a freshly opened picture book: readable at arm’s length, built from simplified silhouettes, shaped by page-turn pacing, and warmed by the tactile evidence of ink, gouache, and limited-color printing. The language is not childish UI decoration; it borrows the craft discipline of picture books, where every spread must carry narrative, emotion, and orientation for a young reader before a word is read. Controls become caption slips, cards become pasted illustration boards, and large areas of white paper create the same anticipation that a quiet page does before the turn.

### Values

- {"name":"Sequential storytelling","explanation":"Arrange information as a left-to-right and top-to-bottom reading journey with clear beginnings, pauses, reveals, and endings rather than as a neutral dashboard grid."}
- {"name":"Print tactility","explanation":"Use paper grain, slight ink offsets, stippled shadows, and flat gouache blocks so digital surfaces feel printed and handled without becoming distressed or nostalgic pastiche."}
- {"name":"Child-readable clarity","explanation":"Favor large shapes, few competing colors, strong labels, and generous negative space so hierarchy is grasped quickly by readers with varied attention and literacy levels."}
- {"name":"Author-illustrator partnership","explanation":"Let text and image complete one another: captions, notes, and controls should sit beside visual story cards instead of overwhelming them."}
- {"name":"Limited-palette discipline","explanation":"Build pages from black ink, white paper, one warm red accent, muted blue, ochre, and green; reserve bright emphasis for moments that need a page-turn cue."}
- {"name":"Nursery-era ornament with restraint","explanation":"Use scallops, dotted rules, corner stamps, and tiny motif marks as framing devices, never as random confetti or decorative clutter."}

### Anti-Values

- {"name":"Toy-like interface gimmicks","explanation":"Avoid cartoon bounciness, rainbow palettes, sticker overload, or novelty fonts that reduce the craft tradition to children’s branding."}
- {"name":"Generic SaaS neutrality","explanation":"Do not make interchangeable white cards with a color swap; the printed page structure must be visible in borders, spacing, and composition."}
- {"name":"Synthetic polish","explanation":"Avoid glossy gradients, glassmorphism, excessive shadows, and hyper-smooth surfaces that contradict ink-and-paper warmth."}
- {"name":"Dense administrative tables","explanation":"Do not compress the narrative workspace into spreadsheet density; children’s-book pacing needs pauses and spacious spreads."}

### Visual Character

- Every major panel uses a 2px black ink border with a second offset pseudo-element shadow, creating the feel of a misregistered printed plate.
- Large white paper fields include fine radial speckle and faint horizontal fiber lines made with CSS background layers, while content remains on pure #FFFFFF.
- Story cards use simplified geometric illustration patches: flat gouache circles, hills, moons, and character silhouettes built from CSS shapes inside each card.
- Section headers sit on small caption ribbons with scalloped dotted underlines and tiny corner motif stamps, echoing nursery book title pages.
- Composition alternates roomy picture-spread cards with narrow caption columns, using playful negative space rather than uniform dashboard tiles.

## 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 | `#121212` |
| secondary | `#2F5F8F` |
| accent | `#C23B2A` |
| background | `#FFFFFF` |
| surface | `#FFFFFF` |
| text | `#121212` |
| muted | `#6F6A60` |
| border | `#121212` |
| error | `#B3261E` |
| success | `#2F6F4E` |
| warning | `#B77A18` |
| info | `#2F5F8F` |
| paper_fiber | `#E8E0D2` |
| ochre | `#D6A43A` |
| leaf | `#5F7F4F` |
| ink_soft | `#33302C` |

## Typography

- **Headline-Lg**: Fraunces, 1.953rem, weight 700, line-height 1.1.
- **Headline-Md**: Fraunces, 1.563rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 16px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

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

### Density

Medium-low, chosen to preserve picture-book pacing and allow image-text interplay. Controls are grouped into caption rails while large panels keep narrative breathing room.

### Grid

Desktop uses a 12-column max-width 1280px grid with 24px gutters; the main spread spans 8 columns and the caption rail spans 4. Secondary cards form a 3-column story-strip grid. All containers use CSS grid or flex classes, never inline layout.

### Whitespace

Whitespace behaves like blank paper before a page turn: generous outer margins, quiet interior padding, and empty areas around illustrated shapes. Negative space should feel intentional and playful, not unfinished.

### Breakpoints

- **Desktop**: 1200px and up: 12 columns with spread plus rail
- **Tablet**: 768px-1199px: 6 columns, rail drops below hero and cards become two columns
- **Mobile**: 0-767px: single column, full-width controls, sticky navigation becomes compact story tabs
- **Small Mobile**: 480px and below: reduce display type and stack all action groups

## Elevation & Depth

### Shadows

- **Sm**: 3px 3px 0 #121212
- **Md**: 6px 6px 0 #121212
- **Lg**: 10px 10px 0 rgba(18,18,18,0.18)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Card Style**: Pure white paper cards with visible black ink rules, offset plate shadows, and subtle printed grain backgrounds.
- **Bg Pattern**: noise

### Borders

- **Default Width**: 2px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: Hand-inked black rules that are square and confident, sometimes doubled or offset like imperfect letterpress registration.

## Components

### Composition

Use spread-like compositions: a broad visual board paired with a narrower caption rail, then break rhythm with full-width page-turn panels. Keep no more than three major content clusters visible at a time. Anchor each cluster with an illustrated shape or printed motif. Let white space carry anticipation, especially before primary actions. Align controls to caption blocks, not to arbitrary card centers. Use framed panels, ribbons, and rule lines to create page architecture.

### Hierarchy

Display headings use Fraunces with strong optical sizing and black ink weight. Body text uses IBM Plex Sans for editorial clarity. Metadata and page numbers use IBM Plex Mono in small uppercase slips. Primary hierarchy is created by scale, border weight, and placement on the spread rather than color alone. Alerts and active states may use the warm red accent, but most information remains black on white.

### Density

Medium-low density with deliberate pauses: cards have 24px to 32px internal padding, large gutters, and short text measures. Dense data is converted into story strips, caption lists, and status stamps.

### Signature Patterns

- Apply an offset-registration pseudo-element to panels and cards using ::after with 6px translation and a solid ink or muted color layer behind the white surface.
- Create paper texture on body and cards with layered radial-gradient speckles and repeating-linear-gradient fiber lines at very low opacity on #FFFFFF.
- Use scalloped caption rules under section labels via repeating-radial-gradient backgrounds clipped to a 6px high underline strip.
- Build flat gouache illustration inserts from CSS-only circles, arches, hills, moons, and simplified silhouettes inside story cards.
- Use page-turn tabs and corner stamps: small square or round motif badges positioned at panel corners with mono page numbers and tiny decorative marks.

## 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/storybook-press/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 Start each screen by deciding the story sequence: what the user should notice, read, adjust, and turn to next.
- Do Use pure #FFFFFF as the page ground, then add paper texture with subtle CSS layers rather than cream backgrounds.
- Do Keep letter-spacing at -0.02em across headings, body, labels, and controls for a crafted editorial feel.
- Do Make borders structural: panels, inputs, buttons, and cards should use the black ink rule system consistently.
- Do Pair text with a visual cue such as a stamp, illustration patch, or caption ribbon when it marks a major state change.
- Do Use the warm red accent sparingly for page-turn actions, active tabs, warnings, and small emphasis stamps.
- Do Design responsive screens as reflowed book spreads: caption rails move below image panels before content becomes cramped.
- Do Style every input, select, checkbox, toggle, and focus state so no browser-default chrome breaks the printed world.
- Don't Do not use pastel page backgrounds, glossy gradients, glass panels, or rainbow accents.
- Don't Do not mix random border radii; use 0px for square print cuts, 16px or 24px for rare soft cards, and 9999px only for pills.
- Don't Do not treat motifs as confetti; each scallop, stamp, or dot rule must frame content or guide reading order.
- Don't Do not replace narrative structure with a component catalog or generic analytics dashboard.
- Don't Do not use Poppins, Montserrat, DM Sans, Space Grotesk, or loose default letter spacing.
- Don't Do not compress story material into dense tables unless it can scroll horizontally on mobile as a deliberate ledger.
- Don't Do not rely on color alone for state; combine stamps, borders, labels, and text.

### Usage Context

Best for editorial planning tools, children’s literature archives, classroom visual-story builders, museum education interfaces, creative writing workspaces, and publishing review screens where warmth and narrative clarity matter.

### Accessibility

Maintain black-on-white contrast for primary text, pair red and blue states with labels and icons, keep touch targets at least 44px, preserve visible focus outlines, and avoid motion beyond short transform transitions.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "storybook-press",
  "type": "registry:theme",
  "title": "Storybook Press shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#121212",
      "card": "#FFFFFF",
      "card-foreground": "#121212",
      "popover": "#FFFFFF",
      "popover-foreground": "#121212",
      "primary": "#121212",
      "primary-foreground": "#ffffff",
      "secondary": "#2F5F8F",
      "secondary-foreground": "#ffffff",
      "muted": "#6F6A60",
      "muted-foreground": "#121212",
      "accent": "#C23B2A",
      "accent-foreground": "#ffffff",
      "destructive": "#B3261E",
      "border": "#121212",
      "input": "#121212",
      "ring": "#C23B2A",
      "chart-1": "#121212",
      "chart-2": "#2F5F8F",
      "chart-3": "#C23B2A",
      "chart-4": "#2F6F4E",
      "chart-5": "#B77A18",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#121212",
      "sidebar-primary": "#121212",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F5F8F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#121212",
      "sidebar-ring": "#C23B2A",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#121212",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C23B2A",
      "accent-foreground": "#ffffff",
      "destructive": "#B3261E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C23B2A",
      "chart-1": "#121212",
      "chart-2": "#2F5F8F",
      "chart-3": "#C23B2A",
      "chart-4": "#2F6F4E",
      "chart-5": "#B77A18",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#121212",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C23B2A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C23B2A",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "storybook-press",
    "slug": "storybook-press",
    "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",
        "ink_soft",
        "leaf",
        "muted",
        "ochre",
        "paper_fiber",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body",
        "body_font",
        "display_size",
        "google_fonts_url",
        "h1",
        "h2",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio",
        "small"
      ],
      "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"
      ]
    }
  }
}
```