Folio

# Folio

## Philosophy

Folio is a picture-book language for planning visual stories. 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. It treats the interface like a freshly opened picture book: readable at arm's length, built from simplified gouache plates, shaped by page-turn pacing, and warmed by the tactile evidence of ink and limited-colour printing. Controls become caption slips, cards become pasted illustration plates, and large fields of white paper create the same anticipation a quiet page holds before the turn. It is not childish decoration — it is the print craft of the picture book, brought to a product.

### Values

- {"name":"Sequential storytelling","explanation":"Arrange information as a left-to-right, top-to-bottom reading journey with clear beginnings, pauses, reveals and endings — never a neutral dashboard grid."}
- {"name":"Print tactility","explanation":"Use paper grain, hard offset plates and one warm colour that lands exactly as the page does, so digital surfaces feel printed and handled without becoming distressed nostalgia."}
- {"name":"Child-readable clarity","explanation":"Favour large gouache shapes, few competing colours, strong labels and generous paper so hierarchy is grasped in a glance, before a single word is read."}
- {"name":"Author-illustrator partnership","explanation":"Let text and image complete one another: captions, notes and controls sit beside the visual story plate instead of overwhelming it."}
- {"name":"Limited-palette discipline","explanation":"Build pages from black ink, white paper and three highlighter inks — brick red, slate blue, ochre — reserving the one loud plate for the moment the page turns."}
- {"name":"Nursery-era ornament with restraint","explanation":"Use scallops, dotted rules, corner page-stamps and paper moons as framing devices that guide reading order, never confetti."}

### Anti-Values

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

### Visual Character

- Every plate is white paper lifted by a hard offset-registration shadow — a misprinted plate showing through — with a subtle colour-registration ghost on the one page-turn plate; no border, no one-sided accent edge.
- Large white fields carry a fine CSS grain and faint fibre lines while content stays on pure #FFFFFF.
- Story cards use simplified gouache patches — flat circles, hills, moons, birds and silhouettes built from CSS shapes.
- Section labels sit on caption ribbons with scalloped dotted underlines and tiny corner page-stamps.
- Composition alternates roomy picture-spread plates with narrow caption columns and playful, intentional negative space.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FFFFFF` |
| surface | `#FFFFFF` |
| surface_solid | `#FFFFFF` |
| text | `#171410` |
| muted | `#6B6558` |
| border | `#EBE3D3` |
| accent | `#C23B2A` |
| accent_2 | `#2F5F8F` |
| accent_soft | `#D6A43A` |
| on_accent | `#FFFFFF` |
| success | `#2F6F4E` |
| warning | `#B77A18` |
| error | `#B3261E` |
| info | `#2F5F8F` |

### Typography

- **Base Size**: 17px
- **Body Font**: IBM Plex Sans
- **Heading Font**: Fraunces
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 700
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.6
- **Scale Ratio**: 1.25
- **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

### Radii

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

### Shadows

- **Sm**: 5px 5px 0 rgba(23,20,16,0.13)
- **Md**: 6px 6px 0 rgba(23,20,16,0.14)
- **Lg**: 9px 9px 0 rgba(23,20,16,0.14)

### Spacing

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

### Surfaces

- **Treatment**: paper
- **Card Style**: A white paper plate lifted by a hard, square, two-sided offset-registration shadow; structure is the plate and the paper, never a border. The one page-turn plate per view carries a colour-registration ghost.
- **Bg Pattern**: grain

### Borders

- **Default Width**: 0px
- **Accent Width**: 0px
- **Style**: none
- **Character**: No border. Separation and elevation come from the offset-registration plate shadow — a hard, square, two-sided ink offset (5-9px, radius 0) reading as a misregistered printing plate — never a ruled edge and never a one-sided accent bar.

### 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. The landing is a scroll-controlled page-turn film; reduced-motion de-pins to the readable document.

## Rules

### Composition

Use spread-like compositions: a broad illustrated plate paired with a narrower caption rail, then break rhythm with a full-width page-turn moment. Keep no more than three major clusters visible at a time. Anchor each cluster with a gouache patch or a printed motif. Let white paper carry anticipation before primary actions. Align controls to caption blocks, not arbitrary card centres. Build page architecture from offset-registration plates, scalloped ribbons and corner page-stamps — never a ruled border.

### Hierarchy

Display headings use Fraunces with strong optical sizing and black-ink weight. Body uses IBM Plex Sans for editorial clarity. Metadata and page numbers use IBM Plex Mono in small uppercase slips. Primary hierarchy comes from scale, plate elevation and placement on the spread rather than colour alone. The warm brick red marks page-turn actions and active states; most information stays black on white.

### Density

Medium-low with deliberate pauses: plates have 24-32px internal padding, large gutters and short measures. Dense data becomes story strips, caption lists, folded ledgers and status stamps.

### Signature Patterns

- Lift plates and cards on a hard offset-registration shadow (5-9px translation, square 0-radius edge) — the misregistered plate — instead of a border; the one page-turn plate carries a colour-registration ghost (6px 6px 0 accent).
- Build paper texture on body and plates from layered radial-gradient speckle and faint fibre lines at very low opacity on #FFFFFF.
- Draw scalloped caption rules under section labels via a repeating radial-gradient clipped to a short underline strip.
- Build flat gouache illustration inserts from CSS-only circles, arches, hills, moons, birds and simplified silhouettes inside story cards.
- Use page-turn tabs and corner page-stamps: small pill tabs and round number badges with mono page numbers, positioned at plate corners.

## Layout

### Density

Medium-low, chosen to preserve picture-book pacing and image-text interplay. Controls group into caption rails while plates keep narrative breathing room.

### Grid

Desktop uses a 12-column, ~1240px content cap with 24px gutters; a dominant spread plate spans the majority width paired with a narrower caption rail, then breaks rhythm with a full-width page-turn moment. Secondary cards form a 3-column story-strip grid. Containers use CSS grid or flex, with minmax(0,1fr) so children shrink rather than overflow.

### Whitespace

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

### Breakpoints

- **Desktop**: 1200px and up: spread plate plus caption rail
- **Tablet**: 768-1199px: single-column spreads, caption rail drops below the plate, cards become two columns — its own considered layout, not a stretched mobile column
- **Mobile**: 0-767px: single column, full-width controls, the film re-art-directed for portrait; the folded ledger scrolls horizontally as a deliberate strip
- **Small Mobile**: 480px and below: reduce display type and stack all action groups

## Guidance

### Do

- Start each screen by deciding the story sequence: what to notice, read, adjust and turn to next.
- Use pure #FFFFFF paper, then add grain with subtle CSS layers rather than a cream background.
- Keep letter-spacing at -0.02em across headings, body, labels and controls for a crafted editorial feel.
- Make structure from the offset-registration plate and whitespace; let a colour-registration ghost mark one plate per view.
- Pair text with a visual cue — a stamp, a gouache patch, a caption ribbon — at a major state change.
- Use brick red sparingly for page-turn actions, active tabs and small emphasis; use the deeper brick (#A02A1B) for red text so it clears WCAG AA on paper.
- Reflow spreads on smaller screens: caption rails move below image plates before content crowds.
- Style every input, select, checkbox, switch and focus state so no browser default breaks the printed world.

### Don't

- Do not draw a border, a ruled line, or a one-sided accent edge / left bar (including inset shadows with an x-offset).
- Do not use pastel page backgrounds, glossy gradients, glass panels, coloured glow shadows or rainbow accents.
- Do not mix arbitrary radii; use 0px for print cuts, 16/24px for rare soft plates and 9999px only for pills and stamps.
- 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 catalogue or a generic analytics grid.
- Do not use Poppins, Montserrat, DM Sans, Space Grotesk or loose default letter spacing.
- Do not rely on colour alone for state; combine stamps, 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; the bright brick red never carries body text — accent text uses the deeper brick (#A02A1B) and ochre-ink (#8A6410) to clear WCAG AA on paper. Pair red and blue states with labels and icons. Keep touch targets at least 44px, preserve visible focus outlines, and keep motion to short transform transitions; the landing de-pins to a fully readable stacked document under prefers-reduced-motion and with no JavaScript.

## Imagery Direction

### Summary

Flat mid-century gouache picture-book scenes under limited-colour printing: rolling hills, an ochre sun, a paper moon, a lone brick-red bird crossing an open sky, small child-and-dog silhouettes, and warm-white paper with a soft offset registration between the ink and colour layers. Illustration inserts inside the UI are built from CSS primitives; full scene imagery is generated in the same flat gouache technique.

### Pairs With

chapbook

### Palette Hint

brick red, slate blue, ochre, sage green and warm black ink on warm white paper

---
version: "alpha"
name: "Folio"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#FFFFFF"
  surface: "#FFFFFF"
  surface_solid: "#FFFFFF"
  text: "#171410"
  muted: "#6B6558"
  border: "#EBE3D3"
  accent: "#C23B2A"
  accent_2: "#2F5F8F"
  accent_soft: "#D6A43A"
  on_accent: "#FFFFFF"
  success: "#2F6F4E"
  warning: "#B77A18"
  error: "#B3261E"
  info: "#2F5F8F"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "17px"
    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"
  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-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_solid:
    backgroundColor: "{colors.surface_solid}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_soft:
    backgroundColor: "{colors.accent_soft}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.accent}"
    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"
---

# Folio

## Overview

Folio is a picture-book language for planning visual stories. 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. It treats the interface like a freshly opened picture book: readable at arm's length, built from simplified gouache plates, shaped by page-turn pacing, and warmed by the tactile evidence of ink and limited-colour printing. Controls become caption slips, cards become pasted illustration plates, and large fields of white paper create the same anticipation a quiet page holds before the turn. It is not childish decoration — it is the print craft of the picture book, brought to a product.

### Values

- {"name":"Sequential storytelling","explanation":"Arrange information as a left-to-right, top-to-bottom reading journey with clear beginnings, pauses, reveals and endings — never a neutral dashboard grid."}
- {"name":"Print tactility","explanation":"Use paper grain, hard offset plates and one warm colour that lands exactly as the page does, so digital surfaces feel printed and handled without becoming distressed nostalgia."}
- {"name":"Child-readable clarity","explanation":"Favour large gouache shapes, few competing colours, strong labels and generous paper so hierarchy is grasped in a glance, before a single word is read."}
- {"name":"Author-illustrator partnership","explanation":"Let text and image complete one another: captions, notes and controls sit beside the visual story plate instead of overwhelming it."}
- {"name":"Limited-palette discipline","explanation":"Build pages from black ink, white paper and three highlighter inks — brick red, slate blue, ochre — reserving the one loud plate for the moment the page turns."}
- {"name":"Nursery-era ornament with restraint","explanation":"Use scallops, dotted rules, corner page-stamps and paper moons as framing devices that guide reading order, never confetti."}

### Anti-Values

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

### Visual Character

- Every plate is white paper lifted by a hard offset-registration shadow — a misprinted plate showing through — with a subtle colour-registration ghost on the one page-turn plate; no border, no one-sided accent edge.
- Large white fields carry a fine CSS grain and faint fibre lines while content stays on pure #FFFFFF.
- Story cards use simplified gouache patches — flat circles, hills, moons, birds and silhouettes built from CSS shapes.
- Section labels sit on caption ribbons with scalloped dotted underlines and tiny corner page-stamps.
- Composition alternates roomy picture-spread plates with narrow caption columns and playful, intentional negative space.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| bg | `#FFFFFF` |
| surface | `#FFFFFF` |
| surface_solid | `#FFFFFF` |
| text | `#171410` |
| muted | `#6B6558` |
| border | `#EBE3D3` |
| accent | `#C23B2A` |
| accent_2 | `#2F5F8F` |
| accent_soft | `#D6A43A` |
| on_accent | `#FFFFFF` |
| success | `#2F6F4E` |
| warning | `#B77A18` |
| error | `#B3261E` |
| info | `#2F5F8F` |

## Typography

- **Headline-Lg**: Fraunces, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Fraunces, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 17px, 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 image-text interplay. Controls group into caption rails while plates keep narrative breathing room.

### Grid

Desktop uses a 12-column, ~1240px content cap with 24px gutters; a dominant spread plate spans the majority width paired with a narrower caption rail, then breaks rhythm with a full-width page-turn moment. Secondary cards form a 3-column story-strip grid. Containers use CSS grid or flex, with minmax(0,1fr) so children shrink rather than overflow.

### Whitespace

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

### Breakpoints

- **Desktop**: 1200px and up: spread plate plus caption rail
- **Tablet**: 768-1199px: single-column spreads, caption rail drops below the plate, cards become two columns — its own considered layout, not a stretched mobile column
- **Mobile**: 0-767px: single column, full-width controls, the film re-art-directed for portrait; the folded ledger scrolls horizontally as a deliberate strip
- **Small Mobile**: 480px and below: reduce display type and stack all action groups

## Elevation & Depth

### Shadows

- **Sm**: 5px 5px 0 rgba(23,20,16,0.13)
- **Md**: 6px 6px 0 rgba(23,20,16,0.14)
- **Lg**: 9px 9px 0 rgba(23,20,16,0.14)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Card Style**: A white paper plate lifted by a hard, square, two-sided offset-registration shadow; structure is the plate and the paper, never a border. The one page-turn plate per view carries a colour-registration ghost.
- **Bg Pattern**: grain

### Borders

- **Default Width**: 0px
- **Accent Width**: 0px
- **Style**: none
- **Character**: No border. Separation and elevation come from the offset-registration plate shadow — a hard, square, two-sided ink offset (5-9px, radius 0) reading as a misregistered printing plate — never a ruled edge and never a one-sided accent bar.

## Components

### Composition

Use spread-like compositions: a broad illustrated plate paired with a narrower caption rail, then break rhythm with a full-width page-turn moment. Keep no more than three major clusters visible at a time. Anchor each cluster with a gouache patch or a printed motif. Let white paper carry anticipation before primary actions. Align controls to caption blocks, not arbitrary card centres. Build page architecture from offset-registration plates, scalloped ribbons and corner page-stamps — never a ruled border.

### Hierarchy

Display headings use Fraunces with strong optical sizing and black-ink weight. Body uses IBM Plex Sans for editorial clarity. Metadata and page numbers use IBM Plex Mono in small uppercase slips. Primary hierarchy comes from scale, plate elevation and placement on the spread rather than colour alone. The warm brick red marks page-turn actions and active states; most information stays black on white.

### Density

Medium-low with deliberate pauses: plates have 24-32px internal padding, large gutters and short measures. Dense data becomes story strips, caption lists, folded ledgers and status stamps.

### Signature Patterns

- Lift plates and cards on a hard offset-registration shadow (5-9px translation, square 0-radius edge) — the misregistered plate — instead of a border; the one page-turn plate carries a colour-registration ghost (6px 6px 0 accent).
- Build paper texture on body and plates from layered radial-gradient speckle and faint fibre lines at very low opacity on #FFFFFF.
- Draw scalloped caption rules under section labels via a repeating radial-gradient clipped to a short underline strip.
- Build flat gouache illustration inserts from CSS-only circles, arches, hills, moons, birds and simplified silhouettes inside story cards.
- Use page-turn tabs and corner page-stamps: small pill tabs and round number badges with mono page numbers, positioned at plate corners.

## 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-019f9a39-297b-7c02-886c-37d59b85e1e6/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 to notice, read, adjust and turn to next.
- Do Use pure #FFFFFF paper, then add grain with subtle CSS layers rather than a cream background.
- Do Keep letter-spacing at -0.02em across headings, body, labels and controls for a crafted editorial feel.
- Do Make structure from the offset-registration plate and whitespace; let a colour-registration ghost mark one plate per view.
- Do Pair text with a visual cue — a stamp, a gouache patch, a caption ribbon — at a major state change.
- Do Use brick red sparingly for page-turn actions, active tabs and small emphasis; use the deeper brick (#A02A1B) for red text so it clears WCAG AA on paper.
- Do Reflow spreads on smaller screens: caption rails move below image plates before content crowds.
- Do Style every input, select, checkbox, switch and focus state so no browser default breaks the printed world.
- Don't Do not draw a border, a ruled line, or a one-sided accent edge / left bar (including inset shadows with an x-offset).
- Don't Do not use pastel page backgrounds, glossy gradients, glass panels, coloured glow shadows or rainbow accents.
- Don't Do not mix arbitrary radii; use 0px for print cuts, 16/24px for rare soft plates and 9999px only for pills and stamps.
- 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 catalogue or a generic analytics grid.
- Don't Do not use Poppins, Montserrat, DM Sans, Space Grotesk or loose default letter spacing.
- Don't Do not rely on colour alone for state; combine stamps, 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; the bright brick red never carries body text — accent text uses the deeper brick (#A02A1B) and ochre-ink (#8A6410) to clear WCAG AA on paper. Pair red and blue states with labels and icons. Keep touch targets at least 44px, preserve visible focus outlines, and keep motion to short transform transitions; the landing de-pins to a fully readable stacked document under prefers-reduced-motion and with no JavaScript.

## Imagery Direction

### Summary

Flat mid-century gouache picture-book scenes under limited-colour printing: rolling hills, an ochre sun, a paper moon, a lone brick-red bird crossing an open sky, small child-and-dog silhouettes, and warm-white paper with a soft offset registration between the ink and colour layers. Illustration inserts inside the UI are built from CSS primitives; full scene imagery is generated in the same flat gouache technique.

### Pairs With

chapbook

### Palette Hint

brick red, slate blue, ochre, sage green and warm black ink on warm white paper

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "folio",
  "type": "registry:theme",
  "title": "Folio shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#171410",
      "card": "#FFFFFF",
      "card-foreground": "#171410",
      "popover": "#FFFFFF",
      "popover-foreground": "#171410",
      "primary": "#171410",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6B6558",
      "muted-foreground": "#171410",
      "accent": "#C23B2A",
      "accent-foreground": "#ffffff",
      "destructive": "#B3261E",
      "border": "#EBE3D3",
      "input": "#EBE3D3",
      "ring": "#C23B2A",
      "chart-1": "#171410",
      "chart-2": "#f4f4f5",
      "chart-3": "#C23B2A",
      "chart-4": "#2F6F4E",
      "chart-5": "#B77A18",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#171410",
      "sidebar-primary": "#171410",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F5F8F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#EBE3D3",
      "sidebar-ring": "#C23B2A",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#171410",
      "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": "#171410",
      "chart-2": "#f4f4f5",
      "chart-3": "#C23B2A",
      "chart-4": "#2F6F4E",
      "chart-5": "#B77A18",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#171410",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C23B2A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C23B2A",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f9a39-297b-7c02-886c-37d59b85e1e6",
    "slug": "folio",
    "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",
        "accent_2",
        "accent_soft",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface_solid",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```