Horizontal Scroll Editorial Themes
A high-energy editorial landing page style featuring bold, oversized typography, a striking pink-and-navy color palette, and fluid horizontal scroll interactions. Designed for modern digital products, SaaS, or luxury consumer brands, it utilizes a mix of 'Clash Display' for aggressive, uppercase headers and 'DM Sans' for clean legibility. Key features include snap-scrolling template carousels with gradient masks, masonry feature grids with hover-triggered 'editorial lines', and a full-screen menu overlay with sophisticated cubic-bezier transitions.
Summary
Create a bold, editorial-style landing page with high-contrast typography and interactive scrolling components. Use a palette of Rose Pink (#E8395B) and Deep Navy (#1A1A2E) on a clean white background. Implement a responsive layout featuring an oversized hero section, a masonry-style feature grid, and a dark-themed horizontal scroll container with scroll-snap behavior for showcasing visual templates.
Style
The style is defined by its 'Brutalist-Light' editorial aesthetic. It pairs the heavy, tight-tracked 'Clash Display' font (uppercase, -0.04em tracking) with the modern 'DM Sans'. The color system uses a vibrant primary pink (#E8395B) for action elements and a deep navy (#1A1A2E) for primary text and structural components. Visual interest is created through soft background blobs (radial-gradients with 100px blur) and micro-interactions like expanding left-border lines on cards and rotating FAQ icons.
Layout & Structure
A modular page structure starting with a fixed glassmorphism navigation, moving into a text-heavy hero section, and utilizing alternating white and dark-themed sections for visual rhythm.
Navigation
Hero Section
How It Works
Interactive Feature Gallery
Template Strip (Horizontal Scroll)
FAQ Accordion
Components
Full Screen Editorial Menu
A high-impact navigation overlay with large italicized typography transitions.
Scroll-Snap Card
Fixed dimension cards designed for a horizontal carousel.
Special Notes
MUST maintain the tight letter-spacing (-0.04em) on all Clash Display elements to preserve the editorial feel. MUST NOT use standard system fonts for headers. Horizontal scroll containers MUST use snap-centering to ensure cards don't stop mid-view. The gradient mask on the scroll container is critical for UX to indicate off-screen content.