UI Styles Showcase

A comprehensive collection of 57 modern UI design styles, from Minimalism to Gen Z Chaos — explore all the trending UI design trends in one place.

Preview

Each style is a standalone landing page showcasing the core elements, color palette, typography, and interactive effects of that design style.

Style List

General Styles (1-19)

#	Style Name	Description
01	Minimalism	Less is more
02	Neumorphism	Soft shadows and raised effects
03	Glassmorphism	Frosted glass transparency effect
04	Dark Mode	Eye-friendly low contrast
05	Gradient Mesh	Fluid color gradients
06	Claymorphism	Clay-like 3D appearance
07	Aurora UI	Dreamy aurora gradients
08	Retro/Vintage	Nostalgic vintage aesthetics
09	Monochrome	Black and white grayscale design
10	Maximalism	Rich layered complexity
11	Flat Design 2.0	Evolution of flat design
12	Material Design 3	Google Material You
13	Skeuomorphism	Realistic textures and materials
14	Frosted Glass	Frosted glass effect
15	Neon Glow	Neon lighting effects
16	Paper/Card	Card-based paper texture
17	Duotone	Two-tone color design
18	Isometric	Isometric 3D illustration style
19	Hand-drawn	Hand-drawn doodle style

Landing Page Styles (20-27)

#	Style Name	Description
20	Hero-Centric	Large hero image focused
21	Split Screen	Left-right split layout
22	Video Background	Video background
23	Scroll-Driven	Scroll-triggered animations
24	Conversion-Focused	Conversion rate optimized design
25	Interactive Demo	Interactive product showcase
26	Trust & Authority	Trust and authority design
27	Storytelling	Narrative-driven design

BI/Analytics Styles (28-37)

#	Style Name	Description
28	Data-Dense Dashboard	High-density data dashboard
29	Heatmap & Density	Heatmap and density visualization
30	Executive Summary	Executive summary reports
31	Real-time Monitoring	Real-time monitoring dashboard
32	Drill-Down Analytics	Hierarchical data exploration
33	Comparative Analytics	Comparative analysis (YoY)
34	Predictive Analytics	AI predictive analytics
35	User Behavior Analytics	User behavior analysis
36	Financial Analytics	Financial investment analysis
37	Sales Intelligence	Sales intelligence dashboard

Modern Styles (38-57)

#	Style Name	Description
38	Neubrutalism	Bold borders, high contrast
39	Bento Box	Asymmetric bento grid layout
40	Y2K Revival	Millennium retro aesthetics
41	Cyberpunk	Neon futuristic vibes
42	Organic/Biophilic	Organic natural style
43	AI-Native	AI-native interface design
44	Memphis Revival	80s Memphis design revival
45	Vaporwave	Vaporwave aesthetics
46	Dimensional Layering	Multi-layer depth design
47	Exaggerated Minimalism	Extreme minimalism
48	Kinetic Typography	Dynamic typography design
49	Parallax Storytelling	Parallax scroll narrative
50	Swiss Modernism 2.0	Swiss modernism style
51	HUD/Sci-Fi	Sci-fi HUD interface
52	Pixel Art	Retro pixel game style
53	Bento Grids	Bento grid system
54	Neubrutalism v2	Neubrutalism evolved
55	Spatial UI	Spatial computing interface (Vision Pro)
56	E-Ink/Paper	E-ink paper style
57	Gen Z Chaos	Gen Z chaotic aesthetics

Technical Features

• Pure Static HTML - No build required, deploy directly
• Tailwind CSS CDN - CDN import, no npm install needed
• Google Fonts - Each style paired with suitable fonts
• Responsive Design - Desktop and mobile support
• CSS Animations - Rich interactive effects

Quick Start

Local Preview

# Clone the project
git clone https://github.com/joshhu/uitest.git

# Enter the folder
cd uitest

# Open index.html in browser
open index.html
# or
xdg-open index.html  # Linux
start index.html     # Windows

Deploy to Netlify

1. Go to Netlify Drop
2. Drag and drop the entire folder
3. Done!

Deploy to GitHub Pages

1. Fork this repo
2. Go to Settings → Pages
3. Select main branch as Source
4. Save and wait for deployment

Project Structure

uitest/
├── index.html              # Homepage index
├── README.md               # Documentation
└── styles/
    ├── 01-minimalism.html
    ├── 02-neumorphism.html
    ├── 03-glassmorphism.html
    ├── ...
    └── 57-gen-z-chaos.html

Use Cases

• Designers - Quick reference for different UI style implementations
• Developers - Learn various Tailwind CSS design techniques
• Product Managers - Reference when communicating design direction with teams
• Learners - Practical examples for UI/UX design beginners

License

MIT License - Feel free to use, modify, and share.

Acknowledgments

This project uses ui-ux-pro-max skill as a design reference database.

---

_{Built with ❤️ using Claude Code}