Lumina SaaS Landing Page
Lumina is a high-energy, Neo-Brutalist B2C SaaS design characterized by its bold #ffe17c yellow primary color, heavy 2px black borders, and zero-blur hard shadows. It utilizes a striking combination of 'Cabinet Grotesk' for display-heavy typography and 'Satoshi' for body copy. This style is ideal for the creator economy, modern fintech, edtech, or any startup looking to break the 'clean corporate blue' mold with a confident, high-contrast interface. The layout features bento-style grids, marquee animations, and playful asymmetric card shapes.
Summary
A vibrant Neo-Brutalist SaaS landing page utilizing a dominant #ffe17c yellow, deep charcoal #171e19, and sage #b7c6c2 accents. It features high-contrast black borders, hard offset shadows, and bold geometric typography to convey professional confidence with a playful edge.
Style
The style is a modern take on Neo-Brutalism. Typography pairs the high-impact 'Cabinet Grotesk' (weights 400-800) for headings with 'Satoshi' for readability. The palette uses #ffe17c as a primary background, balanced by #171e19 charcoal and #b7c6c2 sage. Visual elements are defined by 2px solid black borders and 4px-8px hard shadows (no blur). Micro-interactions involve 'translate' effects on hover where buttons move 4px to 'fill' their shadow space.
Layout & Structure
A vertically stacked landing page with high-contrast section transitions. It moves from a high-energy yellow hero to a dark charcoal social proof bar, followed by white/yellow feature grids and a dark-mode 'how it works' flow.
Navigation
Hero Section
Social Proof Marquee
Problem vs Solution
Feature Grid
How It Works
Use Case Personas
Testimonials
Final CTA & Footer
Components
Neo-Brutalist Push Button
A high-contrast button that visually 'depresses' when hovered or clicked.
Browser Mockup Dashboard
A stylized application UI container for marketing visuals.
Special Notes
MUST: Maintain a strict 2px border-width on all interactive elements. MUST: Use only hex values #ffe17c, #171e19, and #b7c6c2 for branded sections. MUST: Ensure all shadows have 0 blur radius. DO NOT: Use gradients or soft shadows. DO NOT: Use rounded corners on buttons larger than 12px; keep the aesthetic geometric.