Neo-Brutalism Style
A high-impact Neo-Brutalist design system characterized by 'Acid' aesthetics. It features high-contrast color palettes (off-white, deep black, and neon yellow), heavy-weight typography, and 'hard' UI elements like non-blurred shadows and thick borders. The layout utilizes bento grids, oversized display text, and dynamic marquee components. Suitable for creative agencies, experimental e-commerce, fintech, and portfolio sites looking for a 'loud', digital-first brand identity.
Summary
A bold, high-contrast Neo-Brutalist design system featuring heavy strokes, hard shadows, and an 'Acid' color palette with rhythmic animations and glitch effects.
Style
The style is built on a foundation of Neo-Brutalism. It uses high-contrast pairings: a paper-like background (#F8F4E8), ink-black primary elements (#09090B), and a signature 'Acid' yellow-green (#D2E823) for highlights. Typography pairs the ultra-heavy 'Dela Gothic One' for display headings with the technical 'Space Grotesk' for body text. UI elements feature 2px to 4px solid black borders and 'hard' shadows (offset boxes with 0 blur). Micro-interactions include 'glitch' text animations, floating elements, and a custom mix-blend-difference cursor.
Layout & Structure
The layout is structured with modular sections, utilizing bento-style grids and horizontal scrolling containers. It emphasizes vertical hierarchy with sticky navigation and alternating content blocks.
Header & Navigation
Hero Section
Bento Category Grid
Horizontal Scrolling Product Section
Footer
Components
Hard-Shadow Button
A tactile button that feels physical when clicked.
Glitch Text
Interactive display text that jitters on hover.
Interactive Custom Cursor
A circle cursor that interacts with the background color.
Special Notes
MUST maintain the 2px border on all interactive elements. DO NOT use blur on shadows; they must be solid color blocks. MUST use #D2E823 as the primary accent to maintain the 'Acid' feel. DO NOT use rounded corners greater than 32px to keep the 'boxy' Brutalist integrity. Ensure all uppercase text uses 'Dela Gothic One' for consistent branding.