WhimsiCollage Storybook

# WhimsiCollage Storybook

## Philosophy

A contemporary storybook interface language that borrows from picture-book illustration, handmade collage, and Nordic whimsical scene building. Screens feel like curated spreads: warm, tactile, optimistic, and emotionally literate without becoming juvenile. Functionality is presented as narrative props inside an illustrated world rather than abstract enterprise widgets.

### Values

- child-friendly warmth without babyish simplification
- narrative worldbuilding through interface structure
- visible craft, texture, and hand-touched imperfection
- gentle emotional guidance through color and shape
- friendly discoverability through characterful affordances

### Anti-Values

- sterile product minimalism
- hard mechanical geometry as the dominant motif
- hyper-glossy futurism
- crowded dashboard compression
- mascot overload that replaces information design

### Visual Character

- layered torn-paper surfaces with offset color underlays that make each card feel collaged by hand
- large rounded blob and pebble silhouettes instead of strict rectangles for panels, buttons, charts, and image frames
- soft pencil-like dashed or hand-drawn borders with uneven edge treatment around interactive regions
- spread-inspired compositions with wide gutters, scene bands, and illustrated environmental landmarks that guide the eye like a picture-book page turn
- sticker and badge accents that look like pasted labels or stamped seals floating above the main surface

## Tokens

### Borders

- **Accent Width**: 4px
- **Character**: soft hand-drawn outlines with slightly imperfect rhythm and occasional stitched emphasis
- **Default Width**: 2px
- **Style**: dashed

### Colors

| Name | Value |
|------|-------|
| accent | `#E95F7A` |
| background | `#F8F1E4` |
| border | `#5F564A` |
| error | `#C95A43` |
| info | `#6D8FD6` |
| muted | `#7C7A70` |
| primary | `#3B6B58` |
| secondary | `#F3A66E` |
| success | `#4E8D67` |
| surface | `#FFF9F0` |
| text | `#30403B` |
| warning | `#D99A2B` |

### Motion

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

### Radii

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

### Shadows

- **Lg**: 0 22px 0 rgba(95,86,74,0.12)
- **Md**: 0 12px 0 rgba(95,86,74,0.14)
- **Sm**: 0 4px 0 rgba(95,86,74,0.16)

### Spacing

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

### Surfaces

- **Bg Pattern**: noise
- **Card Style**: warm paper cards with grain, offset underlays, and patch-like overlays
- **Treatment**: paper

### Typography

- **Base Size**: 16px
- **Body Font**: Averia Serif Libre
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@400;700&family=IBM+Plex+Mono:wght@400;500&family=Sour+Gummy:wght@400;500;700&display=swap
- **Heading Font**: Sour Gummy
- **Letter Spacing**: 0.01em
- **Line Height**: 1.55
- **Mono Font**: IBM Plex Mono
- **Scale Ratio**: 1.25

## Rules

### Composition

Compose every screen as a story spread: a strong hero vignette, one or two secondary narrative pockets, and a clear path that feels like reading left-to-right through illustrated terrain. Dense data should be broken into themed patches rather than uniform cards.

### Density

Moderate density with generous breathing room. Interfaces can feel busy in detail but never cramped in layout. Texture and embellishment should live inside a disciplined macro-grid.

### Hierarchy

Hierarchy comes from scale, color patches, and elevation layers rather than pure typography. Headings sit on cloud or sticker backings. Important actions become large friendly shapes. Supporting facts tuck into caption-like ribbons.

### Signature Patterns

- every major card uses a pseudo-element offset underlay in a second color, creating a pasted collage shadow layer
- section titles sit inside irregular blob backplates rather than plain text rows
- interactive controls use hand-drawn dashed outlines and rounded pebble silhouettes with slight rotation variance
- scene dividers and ribbons use scalloped or wavy edges to evoke illustrated landscape layers
- small informational badges appear as floating sticker circles or seed-shaped pills overlapping container corners

## Layout

### Breakpoints

Large at 1200px+, medium at 900px-1199px, small below 900px with an additional compact refinement below 640px.

### Grid

Desktop uses a spread-like 12-column composition with two narrative halves and wide interior gutter; tablet shifts to stacked story bands; mobile becomes a vertical tale with pocket modules and preserved overlap accents.

### Whitespace

Use roomy outer margins, deep section padding, and intentional overlap between layers. Leave space around decorative patches so texture supports readability instead of crowding it.

## Guidance

### Do

- pair warm neutrals with berry, moss, apricot, and sky accents
- treat forms, menus, and metrics as story props embedded in a scene
- use asymmetry and layered offsets while maintaining a stable reading flow
- preserve tactile edge details, grain, and irregular borders across components
- let illustration-friendly iconography and labels soften task-heavy interactions

### Don't

- flatten everything into identical white cards
- use neon saturation or toy-store primaries as the default palette
- default to sharp corners, strict hairlines, or glassmorphism
- turn the page into a literal children app full of oversized mascots
- sacrifice legibility for texture or decorative overlap