Hero architecture
Design a neubrutalist interface. Use: high contrast, hard black borders (3px+), bright pop colors, no blur, sharp or slightly rounded corners, bold typography, hard shadows (offset 4px 4px), raw aesthetic but functional.
Bold borders, black outlines, primary colors, thick shadows, no gradients, flat colors, 45° shadows, playful, Gen Z. This mock website translates the UI/UX Pro Max style notes into a client-ready landing/dashboard hybrid with its own palette, typography, chart module, and component system.
Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech blogs
style fit score
box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography
Design a neubrutalist interface. Use: high contrast, hard black borders (3px+), bright pop colors, no blur, sharp or slightly rounded corners, bold typography, hard shadows (offset 4px 4px), raw aesthetic but functional.
border: 3px solid black, box-shadow: 5px 5px 0px black, colors: #FFDB58 #FF6B6B #4ECDC4, font-weight: 700, no gradients
Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech blogs
Luxury navy + gold service [Accent adjusted from #CA8A04 for WCAG 3:1]
Indie/Craft
Amatic SC / Cabin
Amatic for handwritten feel. Cabin for readable body.
Showing how individual positive/negative components add up to a final total (e.g., P&L, budget variance)
Accessibility: ✓ WCAG AAA · AA
Performance: ⚡ Excellent
Mobile: ✓ High
Avoid: Luxury brands, finance, healthcare, conservative industries (too playful)
One primary action, one secondary proof path, clear visual hierarchy, focus states, 44px+ hit targets, and token-driven colors.
Primary CTA