A definitive visual glossary of 20 modern UI design patterns.
For founders who need conviction. Developers who need vocabulary. Designers who need a reference.
Browse the Interactive Gallery →
20 patterns · HD video previews · Vibe × Effort analysis · Real-world examples
The UI/UX landscape has thousands of component libraries — but almost nothing that answers the question founders actually ask at 2am:
"What should my product look like?"
This is not a component library. There is no code to copy.
This is a visual decision-making tool — a high-fidelity menu of the 20 dominant modern design aesthetics, each captured as a looping HD video preview that shows exactly what the pattern feels like in motion. Every entry is paired with a sharp editorial breakdown: who it's for, what it costs to build, and critically — when not to use it.
Stop scrolling Dribbble. Pick a visual identity. Ship.
| # | Pattern | Vibe | Best For | Effort |
|---|---|---|---|---|
| 01 | Neubrutalism | Raw · Confrontational | Indie tools, SaaS, Dev portfolios | Low |
| 02 | Glassmorphism | Sleek · Premium | Fintech, SaaS dashboards | Medium |
| 03 | Bento Grid | Editorial · Modern | Landing pages, Feature showcases | Low–Med |
| 04 | Neumorphism | Soft · Monochromatic | Audio apps, Control panels | High |
| 05 | Claymorphism | Playful · Tactile | Ed-tech, Gamified apps | Medium |
| 06 | Aurora UI | Dreamy · Fluid | AI tools, Creative, Music | Medium |
| 07 | Cyberpunk UI | Futuristic · Dark | Web3, Gaming, AI | Med–High |
| 08 | Y2K Aesthetic | Chaotic · Nostalgic | Fashion, Gen-Z, Music | Medium |
| 09 | Flat Design | Clean · Timeless | Universal, Mobile apps | Low |
| 10 | Material Design | Structured · Reliable | Enterprise, Android | Medium |
| 11 | Skeuomorphism | Realistic · Tactile | Audio plugins, Luxury | High |
| 12 | Bauhaus | Geometric · Intellectual | Design agencies, Editorial | Low–Med |
| 13 | Brutalism | Raw · Subversive | Culture, Fashion, Art | Low |
| 14 | Minimalism | Serene · Disciplined | Writing tools, Luxury, Wellness | Low* |
| 15 | Retro Futurism | Cinematic · Nostalgic | Gaming, Sci-fi brands | Medium |
| 16 | Dark Mode | Focused · Professional | Dev tools, Productivity | Low–Med |
| 17 | Motion Driven | Cinematic · Alive | Premium SaaS, Studios | High |
| 18 | Maximalism | Abundant · Loud | Fashion, Art, Entertainment | High |
| 19 | Organic UI | Natural · Calming | Wellness, Sustainability | Low–Med |
| 20 | Liquid Glass | Ethereal · Futuristic | Next-gen SaaS, Spatial | High |
*Minimalism is low effort to implement and brutally hard to execute with taste.
See every pattern in motion → Open the Gallery
- Browse the gallery — let the motion previews speak before you read a word
- Match to your product — use the Best For tags as a filter
- Check the effort — don't fall in love with Liquid Glass if you ship next week
- Commit — the worst design decision is no decision at all
These patterns aren't theoretical — they're live, shipping, and earning revenue right now.
| Pattern | Spotted In |
|---|---|
| Glassmorphism | Linear, Apple Music Web, Vercel Dashboard |
| Neubrutalism | Gumroad, Framer, Beehiiv, Pika |
| Bento Grid | Apple.com keynote pages, Raycast site |
| Material Design | Google Workspace, Android, YouTube |
| Dark Mode | VS Code, Raycast, Linear, Arc Browser |
| Cyberpunk UI | Phantom Wallet, Axiom.trade |
| Minimalism | Bear, iA Writer, Stripe.com |
| Flat Design | Duolingo, Figma (icons), Notion |
| Aurora UI | Mesh Gradient tools, Luma AI |
| Organic UI | Headspace, Oura Ring, Notion (soft version) |
Know a better or more current example? Submit a sighting →
This gallery is simple to browse because it was complex to build.
HTML/CSS Templates Playwright Automation Cloudinary CDN
────────────────── → ───────────────────── → ─────────────────
Zero-dependency Headless Chromium MP4 video, loops
pure CSS @keyframes 960×640, 60fps inside gallery
infinite loop 5-second captures zero repo bloat
How each preview was made:
- Template engineering — 20 zero-dependency HTML/CSS files, each capturing the precise math of its pattern
- Ghost interactions — Pure CSS
@keyframessimulate natural user behavior on infinite loops - Headless capture — A Python/Playwright script spins up headless Chromium at 960×640, recording flawless loops
- CDN hosting — MP4 videos are served via Cloudinary CDN, keeping the repository lean while delivering HD previews
Gallery features:
- Cinematic page-load sequence with character-by-character hero reveal
- Staggered scroll animations with parallax video previews
- Animated gradient borders on hover
- Filter by effort level or use case
- Vibe × Effort decision matrix
prefers-reduced-motionrespected throughout- Zero dependencies — single HTML file, pure CSS/JS
- 20 flagship patterns with HD video previews
- Vibe × Effort matrix
- Real-world sightings per pattern
- Interactive web gallery with filter by vibe / effort / use case
- Cinematic scroll animations and micro-interactions
- Community-sourced examples (open for contributions)
- Figma component kit for each pattern
- Technical deep-dives — the CSS physics behind each pattern
-
v2— 10 emerging patterns (Typographic UI, Dataviz-first, Monochrome, Soft Brutalism...)
This gallery grows stronger with real-world examples and community perspective.
Ways to contribute:
- Link a live product that exemplifies a pattern (Real-World Sightings section)
- Submit a new pattern with a matching animated preview
- Sharpen or correct an editorial description
Read the full guide: CONTRIBUTING.md
MIT © Achal Jain · Free to use, reference, and build on.
If this saved you an hour of Dribbble scrolling — a star keeps the project alive.
Built with obsession by Achal Jain