Style: Storytelling-Driven. Type: Landing Page. Keywords: Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization. Primary Colors: Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety. Secondary Colors: Story section color coding, emotional state colors (calm, excitement, success), transitional gradients. Effects & Animation: Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative. Best For: Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational. Do Not Use For: Technical/complex products (unless narrative-driven), traditional enterprise software. Light Mode: ✓ Full. Dark Mode: ✓ Full. Performance: ⚠ Moderate (animations). Accessibility: ✓ WCAG AA. Mobile-Friendly: ✓ Good. Conversion-Focused: ✓ High. Framework Compatibility: Tailwind 10/10, Bootstrap 9/10. Era/Origin: 2020s Modern. Complexity: Medium. AI Prompt Keywords: Design a storytelling landing page. Use: narrative flow sections, scroll-triggered reveals, chapter-like structure, emotional imagery, brand journey visualization, founder story, mission statement, timeline progression.. CSS/Technical: scroll-snap sections, Intersection Observer for reveals, parallax backgrounds, section transitions, timeline CSS, narrative typography (varied sizes), image-text alternating. Implementation Checklist: ☐ Story flows naturally, ☐ Scroll reveals smooth, ☐ Sections timed well, ☐ Emotional hooks present, ☐ Mobile story readable, ☐ Skip option available. Design System Variables: --section-min-height: 100vh, --reveal-duration: 600ms, --narrative-font: serif, --chapter-spacing: 8rem, --timeline-color: accent, --parallax-speed: 0.5.