Storybook Page Turn

# Storybook Page Turn

## Philosophy

Storybook Page Turn is a child-centered interface language for sequential visual storytelling: it treats screens like picture-book spreads where composition, cropped illustration panels, and the emotional beat of the next page carry as much meaning as the words. It borrows from picture-book mechanics rather than decorative nostalgia: page turns create anticipation, image and text clarify each other, full-bleed moments contrast with quiet vignettes, and palette shifts mark changes in feeling. The result is warm, legible, museum-aware, and designed for children and caregivers to understand at a glance without flattening the artwork into a generic kid app.

### Values

- {"name":"Sequential pacing","explanation":"Every screen should imply before and after. Panels, page tabs, progress markers, and cropped scenes create the feeling of a spread in motion rather than an isolated dashboard."}
- {"name":"Image-text partnership","explanation":"Text blocks are short, caption-like, and positioned as companions to images. Illustrations do narrative work; copy points, labels, and confirms rather than overexplaining."}
- {"name":"Warm clarity","explanation":"The palette is warm and inviting but not pastel or low contrast. White paper fields, black ink text, and one sunny accent keep accessibility and focus intact."}
- {"name":"Page-turn emotion","explanation":"Color temperature and surface scale shift between calm planning areas and high-energy reveal areas, echoing how picture books use page turns to change mood."}
- {"name":"Child-scale affordances","explanation":"Controls are large, plain-spoken, and tactile. Roundness is consistent, borders are visible, and actions are understandable from shape and placement."}
- {"name":"Craft without clutter","explanation":"Paper grain, ink rules, and sticker-like cutouts appear as disciplined structural devices, never as a scrapbook of random decorations."}

### Anti-Values

- {"name":"Cartoon chaos","explanation":"Avoid rainbow palettes, novelty fonts, and overanimated mascots that make the interface noisy or patronizing."}
- {"name":"Component catalog thinking","explanation":"Do not arrange controls as a specimen sheet. The language must live inside a real story-planning or reading scene."}
- {"name":"Soft low-contrast pastels","explanation":"Do not use pale backgrounds or washed-out type. Children need clarity, strong figure-ground contrast, and obvious states."}
- {"name":"Generic edtech templates","explanation":"Avoid card grids that could belong to any SaaS product after a palette swap; the page mechanics must shape the layout."}

### Visual Character

- Open-spread composition: the main workspace is split by a visible center gutter and mirrored paper panels, with content aligned like left and right picture-book pages.
- Full-bleed reveal panel beside smaller vignette cards, using large cropped illustration blocks to create page-turn contrast and narrative emphasis.
- Ink-frame containers: every major surface uses a 2px black border with a subtle offset warm shadow, making panels feel printed and tactile.
- Caption-ribbon typography: short labels sit in rounded pill ribbons that overlap image corners like picture-book captions and reading prompts.
- Emotion-coded page tabs: a single golden accent appears on tabs, progress marks, and current actions to signal the next story beat without rainbow clutter.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#000000` |
| secondary | `#7A3E1D` |
| accent | `#F5B82E` |
| background | `#FFFFFF` |
| surface | `#FFFFFF` |
| text | `#000000` |
| muted | `#5F5A52` |
| border | `#000000` |
| error | `#B3261E` |
| success | `#1F7A3A` |
| warning | `#B26B00` |
| info | `#2457A6` |
| paper_warm | `#FFF6E2` |
| ink_soft | `#24211E` |
| sky_page | `#D9EBFF` |
| leaf_page | `#DDEECF` |
| coral_page | `#FFDDD2` |

### 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
- **Sizes**: {"caption":"12px","body":"16px","lead":"20px","h3":"25px","h2":"32px","h1":"48px"}
- **Weights**: {"regular":400,"medium":500,"semibold":600,"bold":700}

### Spacing

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

### Radii

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

### Shadows

- **Sm**: 3px 3px 0 #000000
- **Md**: 6px 6px 0 rgba(0,0,0,0.92)
- **Lg**: 10px 10px 0 rgba(0,0,0,0.86)

### Surfaces

- **Treatment**: paper
- **Card Style**: white printed-paper panels with black ink borders, light paper grain, and controlled warm accent washes
- **Bg Pattern**: noise

### Borders

- **Default Width**: 2px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: crisp black ink outlines that define every story page, card, and control with friendly publication clarity

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: snappy page-turn motion: small lifts and slides suggest paper handling without distracting animation

## Rules

### Composition

Use a spread-first composition with a dominant two-page stage, a visible gutter, and an intentional alternation between full-bleed story art and small supporting vignettes. Keep primary controls in the lower or side margin like reading aids, not floating SaaS chrome. Reserve the golden accent for current page, next action, and emotional emphasis. Build narrative direction left-to-right with arrows, tabs, or page numbers. Use white as the main background so warm color blocks read as illustrations rather than UI wallpaper. Keep each cluster visually complete enough that a child can infer what to do from proximity and scale.

### Hierarchy

Fraunces headlines create story-title hierarchy; IBM Plex Sans handles readable instructions; IBM Plex Mono is limited to page numbers, spread codes, and tiny production labels. The largest illustration or panel always marks the current emotional beat. Captions are short and ribboned. Controls are high-contrast, 44px or taller, and grouped by story task rather than component type.

### Density

Moderate density with generous page margins and compact captions. The interface should feel like a working picture-book spread: enough tools to plan the story, but never so many equal cards that the narrative sequence disappears.

### Signature Patterns

- A CSS center-gutter pseudo-element divides the main stage into left and right pages, including small binding dots to make the spread structure visible.
- Cards and buttons use 2px black borders plus translate-on-hover with offset box-shadow, creating a printed cutout lift instead of soft SaaS depth.
- Caption ribbons are absolutely positioned pill labels that overlap image panels and use IBM Plex Mono uppercase page language.
- Full-bleed illustration panels use simple CSS shape scenery with high value contrast, while smaller vignette cards use the same border system at reduced scale.
- Page-turn tabs use one golden accent fill and triangular folded-corner pseudo-elements to mark current and upcoming emotional beats.

## Layout

### Density

Moderate child-centered density: large reading targets, strong contrast, and enough whitespace for adults and children to point, scan, and discuss the story sequence together.

### Grid

Desktop uses a 12-column max-width 1280px stage with a 32px gutter; the central spread spans 8 columns and the planning rail spans 4. Inside the spread, a two-column page grid is divided by a 16px center gutter. Tablet collapses to an 8-column flow with the planning rail below. Mobile becomes a single-column stack with the gutter rendered as a horizontal page seam.

### Breakpoints

- **Desktop**: 1200px and up
- **Tablet**: 768px to 1199px
- **Mobile**: 480px and below

### Whitespace

Whitespace behaves like paper margin: 24px minimum around cards, 32px around the main spread, and 48px around hero areas on desktop. Never fill every corner; leave breathing room where page turns need anticipation.

### Responsive

At 1024px reduce the outer grid to one main column plus compact rail. At 768px stack the spread and rail. At 480px convert the two-page spread into sequential full-width panels and make all controls full-width.

## Guidance

### Do

- Design screens as narrative spreads with a clear current beat, next beat, and supporting vignettes.
- Use pure white backgrounds, black ink text, and the golden accent sparingly for page-turn emphasis.
- Keep letter-spacing at -0.02em across headings, body, labels, and controls.
- Give every important surface a visible 2px black border and consistent 16px or 24px radius.
- Place captions so they overlap images or panels, reinforcing image-text interplay.
- Use full-bleed illustration areas for emotional reveals and smaller vignette cards for setup details.
- Make controls at least 44px high with obvious hover, focus, disabled, and selected states.
- Shift warm supporting colors by scene emotion, but keep one accent color as the UI signal.

### Don't

- Do not use pastel page backgrounds, rainbow accents, gradient text, or crypto-style gradient buttons.
- Do not build a component catalog with sections named controls, data, or feedback.
- Do not use Poppins, Montserrat, DM Sans, Space Grotesk, or novelty cartoon fonts.
- Do not mix random border radii; stay within 0px, 16px, 24px, and 9999px.
- Do not let decorative illustration reduce contrast or obscure text.
- Do not make all cards the same size; picture-book pacing needs contrast between reveal and vignette.
- Do not rely on animation to explain structure; the page sequence must be clear when static.

### Usage Context

Best for reading companions, storyboarding tools, children’s museum interactives, literacy dashboards, author-illustrator collaboration spaces, and publishing previews where sequential art and child comprehension matter.

### Accessibility

Maintain WCAG contrast with black text on white or warm light panels; never place small text over busy art. Use 44px touch targets, visible focus rings, semantic headings, reduced-motion-friendly transitions, and captions that restate essential visual meaning.

---
version: "alpha"
name: "Storybook Page Turn"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  primary: "#000000"
  secondary: "#7A3E1D"
  accent: "#F5B82E"
  background: "#FFFFFF"
  surface: "#FFFFFF"
  text: "#000000"
  muted: "#5F5A52"
  border: "#000000"
  error: "#B3261E"
  success: "#1F7A3A"
  warning: "#B26B00"
  info: "#2457A6"
  paper_warm: "#FFF6E2"
  ink_soft: "#24211E"
  sky_page: "#D9EBFF"
  leaf_page: "#DDEECF"
  coral_page: "#FFDDD2"
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: "16px"
  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_warm:
    backgroundColor: "{colors.paper_warm}"
  color-reference-ink_soft:
    backgroundColor: "{colors.ink_soft}"
  color-reference-sky_page:
    backgroundColor: "{colors.sky_page}"
  color-reference-leaf_page:
    backgroundColor: "{colors.leaf_page}"
  color-reference-coral_page:
    backgroundColor: "{colors.coral_page}"
  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 Page Turn

## Overview

Storybook Page Turn is a child-centered interface language for sequential visual storytelling: it treats screens like picture-book spreads where composition, cropped illustration panels, and the emotional beat of the next page carry as much meaning as the words. It borrows from picture-book mechanics rather than decorative nostalgia: page turns create anticipation, image and text clarify each other, full-bleed moments contrast with quiet vignettes, and palette shifts mark changes in feeling. The result is warm, legible, museum-aware, and designed for children and caregivers to understand at a glance without flattening the artwork into a generic kid app.

### Values

- {"name":"Sequential pacing","explanation":"Every screen should imply before and after. Panels, page tabs, progress markers, and cropped scenes create the feeling of a spread in motion rather than an isolated dashboard."}
- {"name":"Image-text partnership","explanation":"Text blocks are short, caption-like, and positioned as companions to images. Illustrations do narrative work; copy points, labels, and confirms rather than overexplaining."}
- {"name":"Warm clarity","explanation":"The palette is warm and inviting but not pastel or low contrast. White paper fields, black ink text, and one sunny accent keep accessibility and focus intact."}
- {"name":"Page-turn emotion","explanation":"Color temperature and surface scale shift between calm planning areas and high-energy reveal areas, echoing how picture books use page turns to change mood."}
- {"name":"Child-scale affordances","explanation":"Controls are large, plain-spoken, and tactile. Roundness is consistent, borders are visible, and actions are understandable from shape and placement."}
- {"name":"Craft without clutter","explanation":"Paper grain, ink rules, and sticker-like cutouts appear as disciplined structural devices, never as a scrapbook of random decorations."}

### Anti-Values

- {"name":"Cartoon chaos","explanation":"Avoid rainbow palettes, novelty fonts, and overanimated mascots that make the interface noisy or patronizing."}
- {"name":"Component catalog thinking","explanation":"Do not arrange controls as a specimen sheet. The language must live inside a real story-planning or reading scene."}
- {"name":"Soft low-contrast pastels","explanation":"Do not use pale backgrounds or washed-out type. Children need clarity, strong figure-ground contrast, and obvious states."}
- {"name":"Generic edtech templates","explanation":"Avoid card grids that could belong to any SaaS product after a palette swap; the page mechanics must shape the layout."}

### Visual Character

- Open-spread composition: the main workspace is split by a visible center gutter and mirrored paper panels, with content aligned like left and right picture-book pages.
- Full-bleed reveal panel beside smaller vignette cards, using large cropped illustration blocks to create page-turn contrast and narrative emphasis.
- Ink-frame containers: every major surface uses a 2px black border with a subtle offset warm shadow, making panels feel printed and tactile.
- Caption-ribbon typography: short labels sit in rounded pill ribbons that overlap image corners like picture-book captions and reading prompts.
- Emotion-coded page tabs: a single golden accent appears on tabs, progress marks, and current actions to signal the next story beat without rainbow clutter.

## 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 | `#000000` |
| secondary | `#7A3E1D` |
| accent | `#F5B82E` |
| background | `#FFFFFF` |
| surface | `#FFFFFF` |
| text | `#000000` |
| muted | `#5F5A52` |
| border | `#000000` |
| error | `#B3261E` |
| success | `#1F7A3A` |
| warning | `#B26B00` |
| info | `#2457A6` |
| paper_warm | `#FFF6E2` |
| ink_soft | `#24211E` |
| sky_page | `#D9EBFF` |
| leaf_page | `#DDEECF` |
| coral_page | `#FFDDD2` |

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

Moderate child-centered density: large reading targets, strong contrast, and enough whitespace for adults and children to point, scan, and discuss the story sequence together.

### Grid

Desktop uses a 12-column max-width 1280px stage with a 32px gutter; the central spread spans 8 columns and the planning rail spans 4. Inside the spread, a two-column page grid is divided by a 16px center gutter. Tablet collapses to an 8-column flow with the planning rail below. Mobile becomes a single-column stack with the gutter rendered as a horizontal page seam.

### Breakpoints

- **Desktop**: 1200px and up
- **Tablet**: 768px to 1199px
- **Mobile**: 480px and below

### Whitespace

Whitespace behaves like paper margin: 24px minimum around cards, 32px around the main spread, and 48px around hero areas on desktop. Never fill every corner; leave breathing room where page turns need anticipation.

### Responsive

At 1024px reduce the outer grid to one main column plus compact rail. At 768px stack the spread and rail. At 480px convert the two-page spread into sequential full-width panels and make all controls full-width.

## Elevation & Depth

### Shadows

- **Sm**: 3px 3px 0 #000000
- **Md**: 6px 6px 0 rgba(0,0,0,0.92)
- **Lg**: 10px 10px 0 rgba(0,0,0,0.86)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Card Style**: white printed-paper panels with black ink borders, light paper grain, and controlled warm accent washes
- **Bg Pattern**: noise

### Borders

- **Default Width**: 2px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: crisp black ink outlines that define every story page, card, and control with friendly publication clarity

## Components

### Composition

Use a spread-first composition with a dominant two-page stage, a visible gutter, and an intentional alternation between full-bleed story art and small supporting vignettes. Keep primary controls in the lower or side margin like reading aids, not floating SaaS chrome. Reserve the golden accent for current page, next action, and emotional emphasis. Build narrative direction left-to-right with arrows, tabs, or page numbers. Use white as the main background so warm color blocks read as illustrations rather than UI wallpaper. Keep each cluster visually complete enough that a child can infer what to do from proximity and scale.

### Hierarchy

Fraunces headlines create story-title hierarchy; IBM Plex Sans handles readable instructions; IBM Plex Mono is limited to page numbers, spread codes, and tiny production labels. The largest illustration or panel always marks the current emotional beat. Captions are short and ribboned. Controls are high-contrast, 44px or taller, and grouped by story task rather than component type.

### Density

Moderate density with generous page margins and compact captions. The interface should feel like a working picture-book spread: enough tools to plan the story, but never so many equal cards that the narrative sequence disappears.

### Signature Patterns

- A CSS center-gutter pseudo-element divides the main stage into left and right pages, including small binding dots to make the spread structure visible.
- Cards and buttons use 2px black borders plus translate-on-hover with offset box-shadow, creating a printed cutout lift instead of soft SaaS depth.
- Caption ribbons are absolutely positioned pill labels that overlap image panels and use IBM Plex Mono uppercase page language.
- Full-bleed illustration panels use simple CSS shape scenery with high value contrast, while smaller vignette cards use the same border system at reduced scale.
- Page-turn tabs use one golden accent fill and triangular folded-corner pseudo-elements to mark current and upcoming emotional beats.

## 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-page-turn/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 Design screens as narrative spreads with a clear current beat, next beat, and supporting vignettes.
- Do Use pure white backgrounds, black ink text, and the golden accent sparingly for page-turn emphasis.
- Do Keep letter-spacing at -0.02em across headings, body, labels, and controls.
- Do Give every important surface a visible 2px black border and consistent 16px or 24px radius.
- Do Place captions so they overlap images or panels, reinforcing image-text interplay.
- Do Use full-bleed illustration areas for emotional reveals and smaller vignette cards for setup details.
- Do Make controls at least 44px high with obvious hover, focus, disabled, and selected states.
- Do Shift warm supporting colors by scene emotion, but keep one accent color as the UI signal.
- Don't Do not use pastel page backgrounds, rainbow accents, gradient text, or crypto-style gradient buttons.
- Don't Do not build a component catalog with sections named controls, data, or feedback.
- Don't Do not use Poppins, Montserrat, DM Sans, Space Grotesk, or novelty cartoon fonts.
- Don't Do not mix random border radii; stay within 0px, 16px, 24px, and 9999px.
- Don't Do not let decorative illustration reduce contrast or obscure text.
- Don't Do not make all cards the same size; picture-book pacing needs contrast between reveal and vignette.
- Don't Do not rely on animation to explain structure; the page sequence must be clear when static.

### Usage Context

Best for reading companions, storyboarding tools, children’s museum interactives, literacy dashboards, author-illustrator collaboration spaces, and publishing previews where sequential art and child comprehension matter.

### Accessibility

Maintain WCAG contrast with black text on white or warm light panels; never place small text over busy art. Use 44px touch targets, visible focus rings, semantic headings, reduced-motion-friendly transitions, and captions that restate essential visual meaning.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "storybook-page-turn",
  "type": "registry:theme",
  "title": "Storybook Page Turn shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#000000",
      "card": "#FFFFFF",
      "card-foreground": "#000000",
      "popover": "#FFFFFF",
      "popover-foreground": "#000000",
      "primary": "#000000",
      "primary-foreground": "#ffffff",
      "secondary": "#7A3E1D",
      "secondary-foreground": "#ffffff",
      "muted": "#5F5A52",
      "muted-foreground": "#000000",
      "accent": "#F5B82E",
      "accent-foreground": "#ffffff",
      "destructive": "#B3261E",
      "border": "#000000",
      "input": "#000000",
      "ring": "#F5B82E",
      "chart-1": "#000000",
      "chart-2": "#7A3E1D",
      "chart-3": "#F5B82E",
      "chart-4": "#1F7A3A",
      "chart-5": "#B26B00",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#000000",
      "sidebar-primary": "#000000",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2457A6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#000000",
      "sidebar-ring": "#F5B82E",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#000000",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#F5B82E",
      "accent-foreground": "#ffffff",
      "destructive": "#B3261E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#F5B82E",
      "chart-1": "#000000",
      "chart-2": "#7A3E1D",
      "chart-3": "#F5B82E",
      "chart-4": "#1F7A3A",
      "chart-5": "#B26B00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#000000",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#F5B82E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#F5B82E",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "storybook-page-turn",
    "slug": "storybook-page-turn",
    "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",
        "coral_page",
        "error",
        "info",
        "ink_soft",
        "leaf_page",
        "muted",
        "paper_warm",
        "primary",
        "secondary",
        "sky_page",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio",
        "sizes",
        "weights"
      ],
      "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"
      ]
    }
  }
}
```