Brutalist E-commerce Page
A brutalist editorial e-commerce style guide inspired by poster-campaign aesthetics. Characterized by massive grotesque typography (Clash Display), soft-blurred gradient forms in red-orange tones (#DB4A2B, #F8A348), and a warm cream background (#E4E2DD). This aesthetic is optimized for high-end fashion, architecture, or lifestyle brands that want a 'poster-first' digital presence. Features include scroll-triggered entrance animations, mix-blend-mode interactions, and a clean, borderless grid structure.
Summary
Raw Form is a high-contrast, brutalist design system that prioritizes typographic drama and atmospheric depth. It replaces traditional container-heavy UI with massive type breaks, soft organic gradients, and a sharp, grid-based hierarchy.
Style
The style blends the raw energy of Swiss Brutalism with a refined, warm color palette. It uses 'Clash Display' for heavy headlines and 'Satoshi' for functional sans-serif body text. The color scheme is anchored by #E4E2DD (Base), #1E1E1E (Primary), and #DB4A2B (Accent Red). Animations are smooth, utilizing cubic-bezier curves for a premium feel.
Layout & Structure
A vertically-oriented layout featuring full-viewport typographic heroes, massive category dividers, and borderless product grids.
Navigation
Hero Section
Product Grid
Category Divider
Campaign Block
Footer
Components
Interactive CTA Button
A high-contrast button with a directional fill animation.
Animated Gradient Blobs
Soft organic shapes that provide depth behind text.