Chapterglow Storyscape

# Chapterglow Storyscape

## Philosophy

A narrative interface language that treats the screen as an illustrated book in motion: content arrives as scenes, chapter turns, and captioned reveals rather than interchangeable marketing blocks.

### Values

- sequenced discovery over instant flattening
- art direction as information architecture
- emotional pacing through scene changes
- illustration and copy designed as one composition
- memorable worldbuilding that carries product meaning

### Anti-Values

- generic card grids
- template-neutral SaaS chrome
- uniform section rhythm
- illustration as decorative wallpaper only
- dense control-first layouts without narrative framing

### Visual Character

- full-width chapter sections framed like illustrated story panels
- foreground, midground, and background parallax layers built from soft painted shapes
- caption plaques and margin notes attached to key moments like story annotations
- curved horizon dividers and scene transitions that create the feeling of moving between episodes
- drop-cap headings and chapter labels that make each section read like a page in a storybook

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#3d2f74` |
| secondary | `#7b68c6` |
| accent | `#ff9f7a` |
| background | `#f7f1ea` |
| surface | `#fff8f1` |
| text | `#2f2443` |
| muted | `#776b8d` |
| border | `#5f4b8b` |
| error | `#c75b6a` |
| success | `#4a8e6d` |
| warning | `#d18a36` |
| info | `#4a7da8` |

### Typography

- **Heading Font**: Cormorant Garamond
- **Body Font**: Alegreya Sans
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.6
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@400;500;700&family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap

### Spacing

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

### Radii

- **None**: 0
- **Sm**: 10px
- **Md**: 18px
- **Lg**: 30px
- **Full**: 9999px

### Shadows

- **Sm**: 0 8px 20px rgba(61,47,116,0.10)
- **Md**: 0 18px 40px rgba(61,47,116,0.14)
- **Lg**: 0 32px 72px rgba(61,47,116,0.18)

### Surfaces

- **Treatment**: gradient
- **Card Style**: storybook placards with warm paper fills over atmospheric illustrated backdrops
- **Bg Pattern**: noise

### Borders

- **Default Width**: 2px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: inked story-panel outlines with ornamental chapter-rule accents

### Motion

- **Duration**: 700ms
- **Easing**: cubic-bezier(0.22,1,0.36,1)
- **Philosophy**: deliberate

## Rules

### Composition

Build interfaces as chapters composed of immersive illustrated scenes, with each scene containing one dominant narrative focal point and a secondary caption rail. Avoid repetitive equal-weight blocks.

### Hierarchy

Chapter labels introduce each scene, oversized literary headlines establish the moment, then captions, callouts, and controls appear as supporting annotations anchored to the illustration.

### Density

Airy and paced. Information appears in episodic clusters with generous vertical breathing room, keeping each reveal readable and emotionally distinct.

### Signature Patterns

- chapter headers use small uppercase labels paired with oversized serif headlines and decorative divider rules
- scene containers include layered background, midground, and foreground illustration bands positioned absolutely for parallax depth
- important content is presented in caption plaques or note cards that overlap the illustrated scene edge
- section boundaries use curved wave-like horizon separators instead of straight horizontal breaks
- metric or feature highlights appear as captioned moments with numbered story markers connected by a fine rule

## Layout

### Grid

A single-column narrative spine on mobile that expands to a 12-column cinematic grid on larger screens, with content alternating between wide art panels and inset caption rails.

### Breakpoints

Mobile at 0-767px, tablet at 768-1099px, desktop at 1100px and above. Each breakpoint preserves scene sequencing while changing the overlap and parallax intensity.

### Whitespace

Generous vertical spacing between chapters, moderate internal spacing within caption plaques, and deliberate negative space around illustrated focal points to create page-turn pacing.

## Guidance

### Do

- Design each section as a narrative scene with a clear emotional beat
- Use illustration layers to carry meaning, not just decoration
- Annotate scenes with captions, notes, or numbered moments
- Let typography feel literary and episodic
- Use scrolling to reveal story progression in measured stages

### Don't

- Stack interchangeable marketing cards without narrative continuity
- Use flat section breaks that erase the sense of scene change
- Let UI chrome overpower the art direction
- Treat captions as generic body copy detached from the illustration
- Over-compress content into dashboard density