Storybook Collage Play

# Storybook Collage Play

## Philosophy

A children's interface language inspired by award-winning picture books, collage illustration, and museum-centered storybook traditions. It treats the UI as a little world to wander through rather than a neutral productivity grid. Scenes feel handmade, emotionally warm, and narratively staged, with each surface acting like a page fragment in a larger story.

### Values

- Wonder before efficiency, while preserving clear task completion
- Handmade warmth through visible texture, layered color, and imperfect edges
- Narrative composition where sections behave like scenes with foreground, midground, and background
- Child-friendly legibility through large type, clear contrast, and forgiving shapes
- Illustration as structural guidance, not decorative afterthought

### Anti-Values

- Sterile dashboards and enterprise-flat geometry
- Tiny controls, dense data tables, and abstract icon-only navigation
- Photorealism or glossy tech futurism
- Overly chaotic craft aesthetics that harm readability
- Perfectly rigid alignment that erases playfulness

### Visual Character

- Large torn-paper style color blocks with slightly irregular rounded silhouettes behind every major scene section
- Thick ink-like 3px to 4px borders paired with soft pill and cloud radii on cards, buttons, and inputs
- Layered paper texture overlays and dotted grain backgrounds that make flat color feel handmade
- Oversized story-title typography with expressive serif headings and friendly rounded sans body copy
- Floating character-badge medallions, starbursts, and stitched ribbons used as navigational anchors and emphasis markers

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#F05D5E` |
| secondary | `#5DA9E9` |
| accent | `#F4C542` |
| background | `#FFF8ED` |
| surface | `#FFFDF8` |
| text | `#28313B` |
| muted | `#6E6A6A` |
| border | `#2D2A32` |
| error | `#D64550` |
| success | `#5B9B6B` |
| warning | `#E39C2C` |
| info | `#4A90A4` |

### Typography

- **Heading Font**: Bree Serif
- **Body Font**: Nunito
- **Mono Font**: IBM Plex Mono
- **Base Size**: 18px
- **Scale Ratio**: 1.24
- **Line Height**: 1.55
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Bree+Serif&family=Nunito:wght@400;600;700;800&family=IBM+Plex+Mono:wght@500&display=swap

### Spacing

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

### Radii

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

### Shadows

- **Sm**: 0 4px 0 rgba(45,42,50,0.14)
- **Md**: 0 10px 0 rgba(45,42,50,0.14)
- **Lg**: 0 16px 0 rgba(45,42,50,0.16)

### Surfaces

- **Treatment**: paper
- **Card Style**: Warm paper cards with visible grain, offset shadow slabs, and layered cutout accents
- **Bg Pattern**: dots

### Borders

- **Default Width**: 3px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: Friendly ink outlines that make every component feel hand-framed

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.22, 1, 0.36, 1)
- **Philosophy**: snappy

## Rules

### Composition

Compose interfaces like illustrated spreads: a hero scene, supporting story panels, and small detail callouts. Major regions should feel nested in landscape backdrops or cut-paper shapes rather than boxed in a spreadsheet grid.

### Hierarchy

Use large scene titles, brightly coded path markers, and clustered action zones. Hierarchy comes from scale, shape, and color islands before it comes from chrome.

### Density

Low-to-medium density. Give every control breathing room, large targets, and short readable blocks. Use chunking and character-led wayfinding instead of compact menus.

### Signature Patterns

- Every major section sits on an irregular rounded cut-paper backdrop created with asymmetric border-radius values
- Primary cards use a contrasting offset shadow slab via translated pseudo-elements to mimic stacked paper
- Section labels and badges appear as stitched ribbons or starburst medallions with all-caps micro labels
- Decorative grain and dot textures are layered with radial-gradient and repeating-linear-gradient overlays on backgrounds and surfaces
- Buttons and inputs lift slightly on hover while preserving thick outline borders and bright undershadow strips

## Layout

### Grid

Desktop uses a 12-column scene grid with overlapping illustrated regions; tablet collapses to 8 columns; mobile becomes a single narrative stack with preserved hero framing and floating badges tucked into flow.

### Breakpoints

Three breakpoints: 1100px for full scene composition, 760px for tablet restacking, 520px for phone-first single-column reading.

### Whitespace

Whitespace should feel like page margins in a picture book: generous outer padding, cozy gaps within cards, and larger breathing zones around scene transitions.

## Guidance

### Do

- Build screens as miniature scenes with narrative intent
- Use expressive shape language to group related controls
- Keep interaction copy warm, short, and reassuring
- Pair playful illustration moments with robust contrast and large tap targets
- Let badges, ribbons, and companion characters guide attention

### Don't

- Do not turn the system into a component catalog with isolated demo cards
- Do not use gray enterprise neutrals as the dominant visual mood
- Do not rely on tiny icons or abstract status chips without labels
- Do not introduce harsh geometric minimalism that breaks the storybook tone
- Do not sacrifice legibility for texture or decoration