Gen-Z Social App
A high-energy, Gen-Z-inspired design system with a 'Neo-Brutalist' aesthetic. This style features high-saturation colors like acid green (#ccff00), vibrant purple (#7000ff), and hot pink (#ff0099), paired with heavy black borders and hard shadows. It utilizes expressive, oversized typography and intentional layout chaos through asymmetrical sections and tilted elements. Ideal for social media apps, youth-oriented fintech, creative portfolios, and lifestyle products that prioritize attitude over corporate structure.
Summary
Expressive, playful, and high-contrast 'Neo-Brutalist' UI for Gen-Z products. Characterized by bouncy micro-interactions, hard-edged 'brutal' shadows, and a saturated tri-color palette against deep black or crisp white backgrounds.
Style
The style uses a combination of 'Space Grotesk' for bold, tight headlines and 'DM Sans' for clean, casual body text. Colors are high-saturation (#ccff00, #7000ff, #ff0099) used as background blocks or accents. Key visual markers include 4px-8px black borders, 6px hard shadows without blur, and elements that are frequently rotated between -3 and 3 degrees to create a 'placed' feel. Animations use a signature bouncy cubic-bezier curve (0.175, 0.885, 0.32, 1.275).
Layout & Structure
An asymmetrical, modular layout featuring sticky navigation pills, scrolling text marquees, and bento-style feature grids with varying column spans.
Sticky Nav Pill
Hero Section
Slanted Marquee
Bento Feature Grid
Brutalist FAQ
Giant CTA and Footer
Components
Floating Sticker System
Decorative icons or emojis that appear 'stuck' onto the interface.
Brutalist Phone Mockup
An in-app UI preview inside a stylized phone frame.
Wobble Button
A button that shakes when hovered to grab attention.
Special Notes
MUST: Use lowercase for the majority of the UI to maintain a casual 'anti-corporate' tone. MUST: Use hard black borders on every interactive element. MUST NOT: Use subtle shadows, gradients (except for headlines), or standard rounded corners; use either fully rounded pills or 2.5rem large-radius corners. MUST: Keep sections asymmetrical by applying slight rotations (1deg to 3deg) to cards.