A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md — tokens plus the paired art style. Agents must generate real images.
Build every screen as a story spread: a narrative focus panel, a supporting cluster, and a visible next-page cue. Keep one dominant character or prop silhouette per section. Use rotation only as a small handmade paper-tilt, never chaos. Keep primary actions at child-hand scale. Alternate cream whitespace with tinted paper pieces so the eye pauses between beats. Never let more than three saturated colours compete in one region.
Headlines and big numerals use Baloo 2 for read-aloud emphasis; all body, ledes, subheads, labels, and table cells use Atkinson Hyperlegible at a fine weight compressed toward 17.5px; Space Mono is reserved for page numbers and library tags. The largest illustrated card carries the page thesis; the action button is next; supporting notes sit in small tinted sticker cards.
Low-to-medium with generous breathing room. Young readers should see a scene, a few choices, and a path forward; secondary information tucks into small sticker notes rather than grids.
One soft-cut-paper corner family: 24 on large surfaces (cards, panels, buttons, hero plates), 16 on small controls (chips, inputs, tabs, mini-cards) so a chip never inflates into a pill, 9999 only for genuinely circular objects (fox medallion, beat dots, avatars, the round turn control, radios), 0 only for ink underline strokes.
Low-to-medium chosen for child comprehension: each viewport exposes one main story beat, one supporting cluster, one clear next action.
Desktop is a 12-column max-width 1200px spread with 24px gutters; tablet is a considered six-column stacked spread; mobile is a single page column with the action following the story panel.
Cream margins of at least 24px mobile, 40px tablet, 64px desktop; story beats separated by 32-64px pauses so the layout breathes like page turns.
Preserve the reading-beat order on smaller screens; cards may stack but keep their ink contour, offset shadow, and medallion anchors; the tablet band is its own layout, never the mobile column stretched.
Cut-paper gouache: torn deckle-edged paper shapes layered as collage with soft paper drop-shadows, opaque gouache with visible brush facets, a fine crayon-hatch grain and rough torchon watercolour-paper tooth, warm-brown ink contour lines.
One full-bleed cut-paper storybook cover — a small vermilion fox in a meadow under a moon, wide calm cream sky reserved in the upper third for the wordmark. Palette stays inside cream / vermilion / sky-blue / marigold / warm-brown ink.
Hand-drawn 2px SVG line icons (chevrons, ticks, play, refresh) plus the cut-paper fox medallion; never unicode symbol glyphs.
torchon
# Primer ## Philosophy Primer is a picture-book visual language for early-literacy interfaces — for young children and the grown-ups reading with them. It treats the screen like a cut-paper storybook spread: warm cream paper, torn-edge gouache pieces outlined in a fine storybook ink, a friendly fox who leads the way, and a dotted reading trail that draws itself from beat to beat. Every view shows one scene, a few choices, and a clear next page, so comprehension leads and the next action feels like turning a page rather than operating software. ### Values - page-turn rhythm that unfolds information in small readable beats - character-led wayfinding for young readers (the fox leads) - soft high-clarity contrast that avoids both glare and mushiness - handmade cut-paper texture used as a comprehension aid, not decoration - large silhouettes and generous whitespace for pre-literate scanning - a warm rounded display face used sparingly over a fine, highly legible body - age-appropriate complexity: one primary focus per view ### Anti-Values - dense dashboards with many equal-weight controls - slick tech gradients that erase the storybook material - tiny icon-only interactions that need adult interpretation - overstimulating rainbow palettes with no narrative hierarchy - chunky everything — inflated type, heavy outlines, pill-everything ### Visual Character - Cream paper with a faint crayon-grain and wide page margins, so each section reads like a picture-book spread. - Torn-edge gouache pieces outlined in a fine warm ink, layered with an offset colour-block shadow so content reads as cut paper. - A friendly cut-paper fox medallion and simple prop silhouettes anchor wayfinding before any text. - A dotted reading trail with numbered circular beat markers draws a clear left-to-right, page-turn rhythm. - A rounded warm display face for the few large moments over a fine schoolbook body — high contrast, tightly tracked. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#FFF6E3` | | surface | `#FFFFFF` | | surface_solid | `#FFFFFF` | | text | `#33241C` | | muted | `#6E5647` | | border | `#4E3629` | | accent | `#E94B3C` | | accent_deep | `#C3341F` | | accent_2 | `#2F72D6` | | accent_2_deep | `#1F5BB5` | | accent_soft | `#F6C443` | | on_accent | `#FFFFFF` | | success | `#3E8F57` | | warning | `#E68A1E` | | error | `#C83A32` | | info | `#3E93B8` | ### Typography - **Base Size**: 17.5px - **Body Font**: Atkinson Hyperlegible - **Heading Font**: Baloo 2 - **Mono Font**: Space Mono - **Heading Weight**: 800 - **Heading Transform**: none - **Letter Spacing**: -0.02em - **Line Height**: 1.55 - **Scale Ratio**: 1.22 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Baloo+2:wght@600;700;800&family=Space+Mono:wght@400;700&display=swap ### Radii - **None**: 0px - **Md**: 16px - **Lg**: 24px - **Full**: 9999px ### Shadows - **Sm**: 3px 4px 0 rgba(78,54,41,0.85) - **Md**: 10px 12px 0 rgba(233,75,60,0.26) - **Lg**: 0 18px 34px rgba(78,54,41,0.20) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,80,104] ### Surfaces - **Treatment**: warm cream paper (#FFF6E3) with a faint crayon-grain speckle and soft transparent gouache washes kept to the corners - **Card Style**: a white or pale-tint paper piece with a fine warm-ink contour and an offset colour-block shadow down-and-right, so each module reads as a cut-paper story piece - **Bg Pattern**: a low-contrast dotted reading-trail thread and a few scattered crayon hatch marks, kept to the margins so copy always sits on quiet paper ### Borders - **Default Width**: 2px - **Accent Width**: 3px - **Style**: solid - **Character**: a single fine warm-brown storybook ink contour around cut-paper pieces; 2px on paper, 3px on the focal spread; slightly rounded joins; occasional offset underline stroke under a display word ### Motion - **Duration**: 220ms - **Easing**: cubic-bezier(.2,.8,.2,1) - **Philosophy**: a page turns, a tab lifts, a trail draws itself; small translate + gentle rotate; motion carries the reading rhythm and respects prefers-reduced-motion ## Rules ### Composition Build every screen as a story spread: a narrative focus panel, a supporting cluster, and a visible next-page cue. Keep one dominant character or prop silhouette per section. Use rotation only as a small handmade paper-tilt, never chaos. Keep primary actions at child-hand scale. Alternate cream whitespace with tinted paper pieces so the eye pauses between beats. Never let more than three saturated colours compete in one region. ### Hierarchy Headlines and big numerals use Baloo 2 for read-aloud emphasis; all body, ledes, subheads, labels, and table cells use Atkinson Hyperlegible at a fine weight compressed toward 17.5px; Space Mono is reserved for page numbers and library tags. The largest illustrated card carries the page thesis; the action button is next; supporting notes sit in small tinted sticker cards. ### Density Low-to-medium with generous breathing room. Young readers should see a scene, a few choices, and a path forward; secondary information tucks into small sticker notes rather than grids. ### Radius Stance One soft-cut-paper corner family: 24 on large surfaces (cards, panels, buttons, hero plates), 16 on small controls (chips, inputs, tabs, mini-cards) so a chip never inflates into a pill, 9999 only for genuinely circular objects (fox medallion, beat dots, avatars, the round turn control, radios), 0 only for ink underline strokes. ### Signature Patterns - The reading trail: a self-drawing dotted thread links beats and controls with small circular markers, establishing sequence without arrows everywhere. - Offset cut-paper construction: ink-outlined paper pieces receive a colour-block shadow displaced down-and-right, so each module feels layered. - Character medallion: a simple cut-paper fox (circular face, triangle ears, prop) gives a recognizable nonverbal anchor. - Crayon-gouache texture: layered radial gradients and short hatch strokes sit subtly in the margins, never under text. - Page-turn controls: a round turn control and scallop-tabbed page markers lift with a small rotate-and-translate on press. ## Layout ### Density Low-to-medium chosen for child comprehension: each viewport exposes one main story beat, one supporting cluster, one clear next action. ### Grid Desktop is a 12-column max-width 1200px spread with 24px gutters; tablet is a considered six-column stacked spread; mobile is a single page column with the action following the story panel. ### Whitespace Cream margins of at least 24px mobile, 40px tablet, 64px desktop; story beats separated by 32-64px pauses so the layout breathes like page turns. ### Responsive Preserve the reading-beat order on smaller screens; cards may stack but keep their ink contour, offset shadow, and medallion anchors; the tablet band is its own layout, never the mobile column stretched. ### Breakpoints - **Mobile**: 0-639px single-column story stack - **Tablet**: 640-1023px considered stacked spread - **Desktop**: 1024px+ twelve-column two-page spread ## Guidance ### Do - Let the fox (one friendly character) anchor every major scene. - Keep copy short, rhythmic, and readable aloud. - Reserve vermilion, sky blue, and marigold for priority cues and story objects. - Keep the crayon-grain and gouache texture in backgrounds and margins, never under long copy. - Make buttons large, softly rounded (24), and labelled with action verbs. - Show sequence through the numbered beats and the dotted reading trail. - Keep silhouettes clear enough to read without labels, and always pair a silhouette with text. ### Don't - Don't use dense tables, equal-weight widgets, or admin-dashboard metaphors in child-facing views. - Don't lay textured overlays over long body text. - Don't rely on icon-only controls for core actions. - Don't use neon colour, glossy glass, or grey borders. - Don't add a second decorative type style, or set body text in the display face. - Don't shrink touch targets below 44px. - Don't tilt every card, and don't hang a status rail on a card edge — speak status in chips, tint, or a round medallion. ### Usage Context Best for children's picture-book discovery, early-literacy tools, read-aloud companions, classroom story stations, family library apps, and playful onboarding for young audiences. ### Accessibility Maintain WCAG AA contrast on text (dark ink on cream/scrim; paper on dusk), keep body text at 17.5px, pair every silhouette with text, avoid flashing motion, respect prefers-reduced-motion, and preserve logical reading order across breakpoints. ## Imagery Direction ### Illustration Style Cut-paper gouache: torn deckle-edged paper shapes layered as collage with soft paper drop-shadows, opaque gouache with visible brush facets, a fine crayon-hatch grain and rough torchon watercolour-paper tooth, warm-brown ink contour lines. ### Hero Image Direction One full-bleed cut-paper storybook cover — a small vermilion fox in a meadow under a moon, wide calm cream sky reserved in the upper third for the wordmark. Palette stays inside cream / vermilion / sky-blue / marigold / warm-brown ink. ### Icon Style Hand-drawn 2px SVG line icons (chevrons, ticks, play, refresh) plus the cut-paper fox medallion; never unicode symbol glyphs. ### Image Gen Prompts - A sunny cut-paper gouache meadow with a single vermilion feather in the grass, open cream sky above. - A sky-blue gouache river with a marigold paper bridge and blue pebbles, calm water reserved for type. - A joyful hidden page blooming outward in vermilion, marigold and sky-blue cut-paper petals with a fox at the centre. ### Pairs With torchon
---
version: "alpha"
name: "Primer"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#FFF6E3"
surface: "#FFFFFF"
surface_solid: "#FFFFFF"
text: "#33241C"
muted: "#6E5647"
border: "#4E3629"
accent: "#E94B3C"
accent_deep: "#C3341F"
accent_2: "#2F72D6"
accent_2_deep: "#1F5BB5"
accent_soft: "#F6C443"
on_accent: "#FFFFFF"
success: "#3E8F57"
warning: "#E68A1E"
error: "#C83A32"
info: "#3E93B8"
typography:
headline-lg:
fontFamily: "Baloo 2"
fontSize: "2.136rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Baloo 2"
fontSize: "1.709rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "Atkinson Hyperlegible"
fontSize: "17.5px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.02em"
label-md:
fontFamily: "Space 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: "80px"
step-9: "104px"
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_deep:
backgroundColor: "{colors.accent_deep}"
color-reference-accent_2:
backgroundColor: "{colors.accent_2}"
color-reference-accent_2_deep:
backgroundColor: "{colors.accent_2_deep}"
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: "#000000"
typography: "{typography.label-md}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
height: "44px"
---
# Primer
## Overview
Primer is a picture-book visual language for early-literacy interfaces — for young children and the grown-ups reading with them. It treats the screen like a cut-paper storybook spread: warm cream paper, torn-edge gouache pieces outlined in a fine storybook ink, a friendly fox who leads the way, and a dotted reading trail that draws itself from beat to beat. Every view shows one scene, a few choices, and a clear next page, so comprehension leads and the next action feels like turning a page rather than operating software.
### Values
- page-turn rhythm that unfolds information in small readable beats
- character-led wayfinding for young readers (the fox leads)
- soft high-clarity contrast that avoids both glare and mushiness
- handmade cut-paper texture used as a comprehension aid, not decoration
- large silhouettes and generous whitespace for pre-literate scanning
- a warm rounded display face used sparingly over a fine, highly legible body
- age-appropriate complexity: one primary focus per view
### Anti-Values
- dense dashboards with many equal-weight controls
- slick tech gradients that erase the storybook material
- tiny icon-only interactions that need adult interpretation
- overstimulating rainbow palettes with no narrative hierarchy
- chunky everything — inflated type, heavy outlines, pill-everything
### Visual Character
- Cream paper with a faint crayon-grain and wide page margins, so each section reads like a picture-book spread.
- Torn-edge gouache pieces outlined in a fine warm ink, layered with an offset colour-block shadow so content reads as cut paper.
- A friendly cut-paper fox medallion and simple prop silhouettes anchor wayfinding before any text.
- A dotted reading trail with numbered circular beat markers draws a clear left-to-right, page-turn rhythm.
- A rounded warm display face for the few large moments over a fine schoolbook body — high contrast, tightly tracked.
## 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 | `#FFF6E3` |
| surface | `#FFFFFF` |
| surface_solid | `#FFFFFF` |
| text | `#33241C` |
| muted | `#6E5647` |
| border | `#4E3629` |
| accent | `#E94B3C` |
| accent_deep | `#C3341F` |
| accent_2 | `#2F72D6` |
| accent_2_deep | `#1F5BB5` |
| accent_soft | `#F6C443` |
| on_accent | `#FFFFFF` |
| success | `#3E8F57` |
| warning | `#E68A1E` |
| error | `#C83A32` |
| info | `#3E93B8` |
## Typography
- **Headline-Lg**: Baloo 2, 2.136rem, weight 700, line-height 1.1.
- **Headline-Md**: Baloo 2, 1.709rem, weight 600, line-height 1.15.
- **Body-Md**: Atkinson Hyperlegible, 17.5px, weight 400, line-height 1.5.
- **Label-Md**: Space 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**: `80px`
- **Step-9**: `104px`
### Density
Low-to-medium chosen for child comprehension: each viewport exposes one main story beat, one supporting cluster, one clear next action.
### Grid
Desktop is a 12-column max-width 1200px spread with 24px gutters; tablet is a considered six-column stacked spread; mobile is a single page column with the action following the story panel.
### Whitespace
Cream margins of at least 24px mobile, 40px tablet, 64px desktop; story beats separated by 32-64px pauses so the layout breathes like page turns.
### Responsive
Preserve the reading-beat order on smaller screens; cards may stack but keep their ink contour, offset shadow, and medallion anchors; the tablet band is its own layout, never the mobile column stretched.
### Breakpoints
- **Mobile**: 0-639px single-column story stack
- **Tablet**: 640-1023px considered stacked spread
- **Desktop**: 1024px+ twelve-column two-page spread
## Elevation & Depth
### Shadows
- **Sm**: 3px 4px 0 rgba(78,54,41,0.85)
- **Md**: 10px 12px 0 rgba(233,75,60,0.26)
- **Lg**: 0 18px 34px rgba(78,54,41,0.20)
## Shapes
### Rounded
- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: warm cream paper (#FFF6E3) with a faint crayon-grain speckle and soft transparent gouache washes kept to the corners
- **Card Style**: a white or pale-tint paper piece with a fine warm-ink contour and an offset colour-block shadow down-and-right, so each module reads as a cut-paper story piece
- **Bg Pattern**: a low-contrast dotted reading-trail thread and a few scattered crayon hatch marks, kept to the margins so copy always sits on quiet paper
### Borders
- **Default Width**: 2px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: a single fine warm-brown storybook ink contour around cut-paper pieces; 2px on paper, 3px on the focal spread; slightly rounded joins; occasional offset underline stroke under a display word
## Components
### Composition
Build every screen as a story spread: a narrative focus panel, a supporting cluster, and a visible next-page cue. Keep one dominant character or prop silhouette per section. Use rotation only as a small handmade paper-tilt, never chaos. Keep primary actions at child-hand scale. Alternate cream whitespace with tinted paper pieces so the eye pauses between beats. Never let more than three saturated colours compete in one region.
### Hierarchy
Headlines and big numerals use Baloo 2 for read-aloud emphasis; all body, ledes, subheads, labels, and table cells use Atkinson Hyperlegible at a fine weight compressed toward 17.5px; Space Mono is reserved for page numbers and library tags. The largest illustrated card carries the page thesis; the action button is next; supporting notes sit in small tinted sticker cards.
### Density
Low-to-medium with generous breathing room. Young readers should see a scene, a few choices, and a path forward; secondary information tucks into small sticker notes rather than grids.
### Radius Stance
One soft-cut-paper corner family: 24 on large surfaces (cards, panels, buttons, hero plates), 16 on small controls (chips, inputs, tabs, mini-cards) so a chip never inflates into a pill, 9999 only for genuinely circular objects (fox medallion, beat dots, avatars, the round turn control, radios), 0 only for ink underline strokes.
### Signature Patterns
- The reading trail: a self-drawing dotted thread links beats and controls with small circular markers, establishing sequence without arrows everywhere.
- Offset cut-paper construction: ink-outlined paper pieces receive a colour-block shadow displaced down-and-right, so each module feels layered.
- Character medallion: a simple cut-paper fox (circular face, triangle ears, prop) gives a recognizable nonverbal anchor.
- Crayon-gouache texture: layered radial gradients and short hatch strokes sit subtly in the margins, never under text.
- Page-turn controls: a round turn control and scallop-tabbed page markers lift with a small rotate-and-translate on press.
## 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-019fe2a1-fbaa-7cb3-95af-3142b9b30f6d/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 Let the fox (one friendly character) anchor every major scene.
- Do Keep copy short, rhythmic, and readable aloud.
- Do Reserve vermilion, sky blue, and marigold for priority cues and story objects.
- Do Keep the crayon-grain and gouache texture in backgrounds and margins, never under long copy.
- Do Make buttons large, softly rounded (24), and labelled with action verbs.
- Do Show sequence through the numbered beats and the dotted reading trail.
- Do Keep silhouettes clear enough to read without labels, and always pair a silhouette with text.
- Don't Don't use dense tables, equal-weight widgets, or admin-dashboard metaphors in child-facing views.
- Don't Don't lay textured overlays over long body text.
- Don't Don't rely on icon-only controls for core actions.
- Don't Don't use neon colour, glossy glass, or grey borders.
- Don't Don't add a second decorative type style, or set body text in the display face.
- Don't Don't shrink touch targets below 44px.
- Don't Don't tilt every card, and don't hang a status rail on a card edge — speak status in chips, tint, or a round medallion.
### Usage Context
Best for children's picture-book discovery, early-literacy tools, read-aloud companions, classroom story stations, family library apps, and playful onboarding for young audiences.
### Accessibility
Maintain WCAG AA contrast on text (dark ink on cream/scrim; paper on dusk), keep body text at 17.5px, pair every silhouette with text, avoid flashing motion, respect prefers-reduced-motion, and preserve logical reading order across breakpoints.
## Imagery Direction
### Illustration Style
Cut-paper gouache: torn deckle-edged paper shapes layered as collage with soft paper drop-shadows, opaque gouache with visible brush facets, a fine crayon-hatch grain and rough torchon watercolour-paper tooth, warm-brown ink contour lines.
### Hero Image Direction
One full-bleed cut-paper storybook cover — a small vermilion fox in a meadow under a moon, wide calm cream sky reserved in the upper third for the wordmark. Palette stays inside cream / vermilion / sky-blue / marigold / warm-brown ink.
### Icon Style
Hand-drawn 2px SVG line icons (chevrons, ticks, play, refresh) plus the cut-paper fox medallion; never unicode symbol glyphs.
### Image Gen Prompts
- A sunny cut-paper gouache meadow with a single vermilion feather in the grass, open cream sky above.
- A sky-blue gouache river with a marigold paper bridge and blue pebbles, calm water reserved for type.
- A joyful hidden page blooming outward in vermilion, marigold and sky-blue cut-paper petals with a fox at the centre.
### Pairs With
torchon
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "primer",
"type": "registry:theme",
"title": "Primer shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#FFF6E3",
"foreground": "#33241C",
"card": "#FFFFFF",
"card-foreground": "#33241C",
"popover": "#FFFFFF",
"popover-foreground": "#33241C",
"primary": "#33241C",
"primary-foreground": "#ffffff",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#6E5647",
"muted-foreground": "#33241C",
"accent": "#E94B3C",
"accent-foreground": "#ffffff",
"destructive": "#C83A32",
"border": "#4E3629",
"input": "#4E3629",
"ring": "#E94B3C",
"chart-1": "#33241C",
"chart-2": "#f4f4f5",
"chart-3": "#E94B3C",
"chart-4": "#3E8F57",
"chart-5": "#E68A1E",
"sidebar": "#FFFFFF",
"sidebar-foreground": "#33241C",
"sidebar-primary": "#33241C",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#3E93B8",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#4E3629",
"sidebar-ring": "#E94B3C",
"radius": "16px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#33241C",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#E94B3C",
"accent-foreground": "#ffffff",
"destructive": "#C83A32",
"border": "#303642",
"input": "#303642",
"ring": "#E94B3C",
"chart-1": "#33241C",
"chart-2": "#f4f4f5",
"chart-3": "#E94B3C",
"chart-4": "#3E8F57",
"chart-5": "#E68A1E",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#33241C",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#E94B3C",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#E94B3C",
"radius": "16px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019fe2a1-fbaa-7cb3-95af-3142b9b30f6d",
"slug": "primer",
"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_2_deep",
"accent_deep",
"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"
]
}
}
}
```The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
A generated style is an aggregate of many influences — credit is given to the artists and traditions it draws on, not a claim of authorship.
produced by claude-opus-4-8 · sourced by claude-opus-4-8 · images by FLUX.1 Krea [dev]
Keep Primer and swap a palette and an art style onto it. The landing & dashboard recolor live.
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.
npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table:root {
--background: #FFF6E3;
--foreground: #33241C;
--card: #FFFFFF;
--card-foreground: #33241C;
--popover: #FFFFFF;
--popover-foreground: #33241C;
--primary: #33241C;
--primary-foreground: #ffffff;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #6E5647;
--muted-foreground: #33241C;
--accent: #E94B3C;
--accent-foreground: #ffffff;
--destructive: #C83A32;
--border: #4E3629;
--input: #4E3629;
--ring: #E94B3C;
--chart-1: #33241C;
--chart-2: #f4f4f5;
--chart-3: #E94B3C;
--chart-4: #3E8F57;
--chart-5: #E68A1E;
--sidebar: #FFFFFF;
--sidebar-foreground: #33241C;
--sidebar-primary: #33241C;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #3E93B8;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #4E3629;
--sidebar-ring: #E94B3C;
--radius: 16px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #33241C;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #E94B3C;
--accent-foreground: #ffffff;
--destructive: #C83A32;
--border: #303642;
--input: #303642;
--ring: #E94B3C;
--chart-1: #33241C;
--chart-2: #f4f4f5;
--chart-3: #E94B3C;
--chart-4: #3E8F57;
--chart-5: #E68A1E;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #33241C;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #E94B3C;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #E94B3C;
--radius: 16px;
}
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 PrimerShadcnKit() {
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">Primer</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>
);
}
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "primer",
"type": "registry:theme",
"title": "Primer",
"description": "Picture-book, cut-paper gouache language for early-literacy interfaces. Warm cream paper, a fine storybook ink, vermilion / sky / marigold highlighters, soft-cut corners.",
"cssVars": {
"theme": {
"font-sans": "Atkinson Hyperlegible, system-ui, Arial, sans-serif",
"font-heading": "Baloo 2, sans-serif",
"font-mono": "Space Mono, monospace",
"radius": "24px"
},
"light": {
"background": "#FFF6E3",
"foreground": "#33241C",
"card": "#FFFFFF",
"card-foreground": "#33241C",
"popover": "#FFFFFF",
"popover-foreground": "#33241C",
"primary": "#C3341F",
"primary-foreground": "#FFFFFF",
"secondary": "#1F5BB5",
"secondary-foreground": "#FFFFFF",
"muted": "#FFFDF6",
"muted-foreground": "#6E5647",
"accent": "#F6C443",
"accent-foreground": "#33241C",
"destructive": "#C83A32",
"destructive-foreground": "#FFFFFF",
"border": "#4E3629",
"input": "#4E3629",
"ring": "#2F72D6",
"chart-1": "#E94B3C",
"chart-2": "#2F72D6",
"chart-3": "#F6C443",
"chart-4": "#3E8F57",
"chart-5": "#6E5647",
"radius": "24px"
},
"dark": {
"background": "#2B2018",
"foreground": "#FCEFD8",
"card": "#352719",
"card-foreground": "#FCEFD8",
"popover": "#352719",
"popover-foreground": "#FCEFD8",
"primary": "#F0705C",
"primary-foreground": "#2B2018",
"secondary": "#6FA6E6",
"secondary-foreground": "#2B2018",
"muted": "#3D2E1F",
"muted-foreground": "#C8B29B",
"accent": "#F6C443",
"accent-foreground": "#2B2018",
"destructive": "#E06054",
"destructive-foreground": "#2B2018",
"border": "#5B432E",
"input": "#5B432E",
"ring": "#6FA6E6",
"chart-1": "#F0705C",
"chart-2": "#6FA6E6",
"chart-3": "#F6C443",
"chart-4": "#5FB07C",
"chart-5": "#C8B29B",
"radius": "24px"
}
},
"meta": {
"export_format_version": "registry-theme-v1",
"radius_family": { "card": "24px", "control": "16px", "pill": "9999px", "degree": "soft-cut-paper" },
"note": "Katagami is the source of truth; the registry theme is a derived projection. Bright accents (#E94B3C / #2F72D6) live on fills and shadows; text-bearing fills use the deep variants encoded above as primary/secondary."
}
}
# Primer shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019fe2a1-fbaa-7cb3-95af-3142b9b30f6d`
Slug: `primer`
## Intent
Primer is a picture-book visual language for early-literacy interfaces — for young children and the grown-ups reading with them. It treats the screen like a cut-paper storybook spread: warm cream paper, torn-edge gouache pieces outlined in a fine storybook ink, a friendly fox who leads the way, and a dotted reading trail that draws itself from beat to beat. Every view shows one scene, a few choices, and a clear next page, so comprehension leads and the next action feels like turning a page rather than operating software.
## 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:
{
"bg": "#FFF6E3",
"surface": "#FFFFFF",
"surface_solid": "#FFFFFF",
"text": "#33241C",
"muted": "#6E5647",
"border": "#4E3629",
"accent": "#E94B3C",
"accent_deep": "#C3341F",
"accent_2": "#2F72D6",
"accent_2_deep": "#1F5BB5",
"accent_soft": "#F6C443",
"on_accent": "#FFFFFF",
"success": "#3E8F57",
"warning": "#E68A1E",
"error": "#C83A32",
"info": "#3E93B8"
}
Typography:
{
"base_size": "17.5px",
"body_font": "Atkinson Hyperlegible",
"heading_font": "Baloo 2",
"mono_font": "Space Mono",
"heading_weight": "800",
"heading_transform": "none",
"letter_spacing": "-0.02em",
"line_height": "1.55",
"scale_ratio": "1.22",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Baloo+2:wght@600;700;800&family=Space+Mono:wght@400;700&display=swap"
}
## Visual character to preserve
- Cream paper with a faint crayon-grain and wide page margins, so each section reads like a picture-book spread.
- Torn-edge gouache pieces outlined in a fine warm ink, layered with an offset colour-block shadow so content reads as cut paper.
- A friendly cut-paper fox medallion and simple prop silhouettes anchor wayfinding before any text.
- A dotted reading trail with numbered circular beat markers draws a clear left-to-right, page-turn rhythm.
- A rounded warm display face for the few large moments over a fine schoolbook body — high contrast, tightly tracked.
## ShadSync visual profile
{
"family": "paper-collage",
"material": "paper",
"contour": "blob",
"border": "solid",
"underlay": true,
"grain": true,
"stickerBadges": false,
"motion": "lift-rotate",
"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/primer/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: Let the fox (one friendly character) anchor every major scene.; Keep copy short, rhythmic, and readable aloud.; Reserve vermilion, sky blue, and marigold for priority cues and story objects.; Keep the crayon-grain and gouache texture in backgrounds and margins, never under long copy.; Make buttons large, softly rounded (24), and labelled with action verbs.; Show sequence through the numbered beats and the dotted reading trail.; Keep silhouettes clear enough to read without labels, and always pair a silhouette with text.
- Do not: Don't use dense tables, equal-weight widgets, or admin-dashboard metaphors in child-facing views.; Don't lay textured overlays over long body text.; Don't rely on icon-only controls for core actions.; Don't use neon colour, glossy glass, or grey borders.; Don't add a second decorative type style, or set body text in the display face.; Don't shrink touch targets below 44px.; Don't tilt every card, and don't hang a status rail on a card edge — speak status in chips, tint, or a round medallion.
## 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 PrimerShadcnKit() {
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">Primer</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
{
"density": "Low-to-medium chosen for child comprehension: each viewport exposes one main story beat, one supporting cluster, one clear next action.",
"grid": "Desktop is a 12-column max-width 1200px spread with 24px gutters; tablet is a considered six-column stacked spread; mobile is a single page column with the action following the story panel.",
"whitespace": "Cream margins of at least 24px mobile, 40px tablet, 64px desktop; story beats separated by 32-64px pauses so the layout breathes like page turns.",
"responsive": "Preserve the reading-beat order on smaller screens; cards may stack but keep their ink contour, offset shadow, and medallion anchors; the tablet band is its own layout, never the mobile column stretched.",
"breakpoints": {
"mobile": "0-639px single-column story stack",
"tablet": "640-1023px considered stacked spread",
"desktop": "1024px+ twelve-column two-page spread"
}
}
{
"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-019fe2a1-fbaa-7cb3-95af-3142b9b30f6d",
"name": "Primer",
"slug": "primer"
},
"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": [
"Cream paper with a faint crayon-grain and wide page margins, so each section reads like a picture-book spread.",
"Torn-edge gouache pieces outlined in a fine warm ink, layered with an offset colour-block shadow so content reads as cut paper.",
"A friendly cut-paper fox medallion and simple prop silhouettes anchor wayfinding before any text.",
"A dotted reading trail with numbered circular beat markers draws a clear left-to-right, page-turn rhythm.",
"A rounded warm display face for the few large moments over a fine schoolbook body — high contrast, tightly tracked."
],
"visualProfile": {
"family": "paper-collage",
"material": "paper",
"contour": "blob",
"border": "solid",
"underlay": true,
"grain": true,
"stickerBadges": false,
"motion": "lift-rotate",
"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": "Primer 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": [
"Let the fox (one friendly character) anchor every major scene.",
"Keep copy short, rhythmic, and readable aloud.",
"Reserve vermilion, sky blue, and marigold for priority cues and story objects.",
"Keep the crayon-grain and gouache texture in backgrounds and margins, never under long copy.",
"Make buttons large, softly rounded (24), and labelled with action verbs.",
"Show sequence through the numbered beats and the dotted reading trail.",
"Keep silhouettes clear enough to read without labels, and always pair a silhouette with text."
],
"dont": [
"Don't use dense tables, equal-weight widgets, or admin-dashboard metaphors in child-facing views.",
"Don't lay textured overlays over long body text.",
"Don't rely on icon-only controls for core actions.",
"Don't use neon colour, glossy glass, or grey borders.",
"Don't add a second decorative type style, or set body text in the display face.",
"Don't shrink touch targets below 44px.",
"Don't tilt every card, and don't hang a status rail on a card edge — speak status in chips, tint, or a round medallion."
]
}
}