67 UI design styles · 10 categories · free
The UI Style Guide
Every UI design style worth knowing, from glassmorphism to brutalism. Each one has a live demo, a color palette, CSS or build notes, and a prompt you can paste into your AI coding agent.
Prompts work with Claude Code, Cursor, v0, Lovable, Codex and any other coding agent.
01Modern SaaS
Clean, professional styles for software products · 14 styles
Minimalism & Swiss Style
Rooted in the Swiss International Style of the 1950s, this approach emphasizes clarity, readability, and objectivity. Uses grid-based layouts, sans-serif typography, and generous white space to create functional, timeless designs.
Modern SaaS
Neumorphism
A modern evolution of skeuomorphism that creates soft, extruded plastic-like interfaces. Uses subtle shadows and highlights to simulate depth while maintaining a minimal aesthetic.
Modern SaaS
Glassmorphism
Inspired by frosted glass, this style creates depth through transparency and blur effects. Perfect for layered interfaces where content hierarchy is important.
Modern SaaS
Vibrant & Block-based
High-energy design with bold color blocks, geometric shapes, and vibrant palettes. Creates excitement and draws attention through visual contrast.
Modern SaaS
Dark Mode (OLED)
Optimized for OLED displays and low-light environments. Uses true blacks to save battery and reduce eye strain while maintaining vibrant accent colors.
Modern SaaS
Claymorphism
A playful evolution of neumorphism that looks like soft clay or plasticine. Features chunky rounded elements with thick borders and soft shadows.
Modern SaaS
Aurora UI
Inspired by the Northern Lights, featuring flowing gradients and smooth color transitions. Creates a premium, modern feel with dynamic backgrounds.
Modern SaaS
Flat Design
Emerged in the early 2010s as a reaction to skeuomorphism. Uses simple 2D elements, bold colors, and no shadows or gradients.
Modern SaaS
Soft UI Evolution
The next evolution of neumorphism with improved accessibility and contrast. Maintains the soft aesthetic while meeting WCAG standards.
Modern SaaS
Bento Box Grid
Inspired by Japanese bento boxes, this layout uses modular cards of varying sizes to create visual hierarchy and interest.
Modern SaaS
Dimensional Layering
Creates visual hierarchy through overlapping elements and elevation shadows. Gives interfaces a 3D paper-stack feel.
Modern SaaS
Swiss Modernism 2.0
A modern interpretation of the Swiss International Style with strict grid systems and mathematical spacing.
Modern SaaS
Bento Grids
Apple-inspired modular grid of rounded cards in mixed sizes, with soft shadows, bold accent tiles and clean typography.
Modern SaaS
Editorial Grid / Magazine
Brings print magazine aesthetics to the web with asymmetric grids, pull quotes, and editorial typography.
Modern SaaS
02Retro & Nostalgia
Vintage-inspired and nostalgic aesthetics · 6 styles
Retro-Futurism
Combines 1980s retrofuturistic aesthetics with modern web technology. Features neon colors, synthwave vibes, and CRT-style effects.
Retro & Nostalgia
Skeuomorphism
Uses real-world textures and metaphors to make digital interfaces feel familiar. Think leather textures, wood grain, and realistic shadows.
Retro & Nostalgia
Y2K Aesthetic
Celebrates early 2000s digital optimism with chrome textures, bubblegum colors, and futuristic-retro aesthetics.
Retro & Nostalgia
Vaporwave
A visual celebration of 80s-90s computer aesthetics with sunset gradients, glitch effects, and dreamy atmospheres.
Retro & Nostalgia
Pixel Art
Celebrates the aesthetics of early video games with pixelated graphics, limited palettes, and 8-bit charm.
Retro & Nostalgia
Vintage Analog / Retro Film
Celebrates the imperfect beauty of analog media with film grain, faded colors, and light leaks.
Retro & Nostalgia
03Gaming & Entertainment
Bold, immersive styles for games and media · 4 styles
3D & Hyperrealism
Creates immersive experiences through realistic 3D rendering, complex textures, and spatial depth. Best suited for showcasing products or creating game-like interfaces.
Gaming & Entertainment
Cyberpunk UI
Dark, neon-lit interfaces inspired by cyberpunk fiction. Features terminal aesthetics, glitch effects, and dystopian vibes.
Gaming & Entertainment
3D Product Preview
Interactive 3D product visualization with rotation, zoom, and AR capabilities.
Gaming & Entertainment
Chromatic Aberration / RGB Split
Recreates the chromatic aberration effect from cameras and VHS tapes with RGB channel splitting.
Gaming & Entertainment
04Accessibility & Ethical
Inclusive, accessible design approaches · 3 styles
Accessible & Ethical
Prioritizes accessibility and ethical considerations above all else. Ensures everyone can use the interface regardless of ability or device.
Accessibility & Ethical
Inclusive Design
Goes beyond basic accessibility to create truly universal experiences. Considers all users including those with disabilities, elderly, and those in challenging environments.
Accessibility & Ethical
E-Ink / Paper
Mimics the experience of reading on paper or e-ink displays. High contrast, no animations, and distraction-free.
Accessibility & Ethical
05Experimental & Artistic
Creative and boundary-pushing styles · 8 styles
Brutalism
Inspired by Brutalist architecture, this style embraces raw, honest aesthetics. Features intentionally "ugly" design with default fonts, visible borders, and a rejection of conventional beauty.
Experimental & Artistic
Liquid Glass
Advanced glassmorphism with flowing, morphing animations. Creates a liquid-like feel with chromatic aberration and iridescent effects.
Experimental & Artistic
Neubrutalism
A modern, playful take on brutalism. Combines raw aesthetics with bright colors and bold shadows. Think Gumroad and Figma's marketing pages.
Experimental & Artistic
Memphis Design
Inspired by the 1980s Memphis Group, featuring bold geometric shapes, clashing colors, and playful patterns.
Experimental & Artistic
Exaggerated Minimalism
Takes minimalism to the extreme with oversized typography, dramatic white space, and bold statements.
Experimental & Artistic
Gen Z Chaos / Maximalism
Embraces chaos and maximalism with sticker overlays, collage aesthetics, and internet culture references.
Experimental & Artistic
Anti-Polish / Raw Aesthetic
Celebrates imperfection and human touch with hand-drawn elements, scanned textures, and an unfinished aesthetic.
Experimental & Artistic
Gradient Mesh / Aurora Evolved
Advanced gradient techniques creating flowing, aurora-like color transitions with holographic effects.
Experimental & Artistic
06Nature & Organic
Nature-inspired and sustainable designs · 3 styles
Organic Biophilic
Brings nature indoors through organic shapes, natural colors, and flowing elements. Creates a calming, sustainable aesthetic.
Nature & Organic
Biomimetic / Organic 2.0
Takes organic design further with growing cells, breathing animations, and bio-inspired patterns.
Nature & Organic
Nature Distilled
Distills nature into its essence with earthy colors, organic materials, and handmade warmth.
Nature & Organic
07Motion & Interactive
Animation-driven and interactive experiences · 6 styles
Motion-Driven
Design where animation is the primary mode of communication. Every interaction has purposeful motion that guides users through the experience.
Motion & Interactive
Micro-interactions
Focuses on small, delightful animations that provide feedback and guide users. Every tap, swipe, and hover has a response.
Motion & Interactive
Kinetic Typography
Uses animated typography as the primary visual element. Text moves, morphs, and transforms to tell stories.
Motion & Interactive
Parallax Storytelling
Uses scroll as a narrative device with parallax layers and progressive content reveal. Creates cinematic web experiences.
Motion & Interactive
Tactile Digital / Deformable UI
Creates tactile, touchable interfaces with squishy buttons, bounce physics, and material-like responses.
Motion & Interactive
Interactive Cursor Design
Makes the cursor a primary interaction element with morphing, trails, and magnetic effects.
Motion & Interactive
08Futuristic & Tech
Cutting-edge and technology-forward designs · 5 styles
Zero Interface
The interface disappears, leaving only content and context-aware interactions. Uses AI, voice, and gestures to anticipate user needs.
Futuristic & Tech
AI-Native UI
Designed specifically for AI interactions. Features conversational layouts, streaming text, and minimal interface chrome.
Futuristic & Tech
HUD / Sci-Fi FUI
Inspired by movie FUI (Fantasy User Interfaces). Features thin lines, neon colors, and technical data visualization.
Futuristic & Tech
Spatial UI (VisionOS)
Designed for spatial computing with floating glass panels, depth effects, and gaze-based interactions.
Futuristic & Tech
Voice-First Multimodal
Designed for voice-first interactions with visual feedback for speaking, listening, and processing states.
Futuristic & Tech
09Landing Page Styles
Conversion-focused landing page patterns · 8 styles
Hero-Centric Design
Puts the hero section front and center with dramatic visuals and minimal distractions. Perfect for products that sell themselves visually.
Landing Page Styles
Conversion-Optimized
Every element designed to drive conversions. Strategic CTA placement, urgency triggers, and social proof elements work together.
Landing Page Styles
Feature-Rich Showcase
Comprehensive feature presentation for complex products. Organized sections help users understand capabilities at a glance.
Landing Page Styles
Minimal & Direct
Strips away everything unnecessary. One message, one action, maximum clarity. Perfect for products that speak for themselves.
Landing Page Styles
Social Proof-Focused
Lets your customers do the selling. Testimonials, case studies, and trust signals take center stage to build credibility.
Landing Page Styles
Interactive Product Demo
Show, don't tell. Embeds working demos directly in the landing page so visitors can experience the product firsthand.
Landing Page Styles
Trust & Authority
Establishes credibility through professional design and trust signals. Perfect for industries where reputation matters.
Landing Page Styles
Storytelling-Driven
Takes visitors on a journey. Uses narrative structure and emotional design to connect with audiences on a deeper level.
Landing Page Styles
10BI & Analytics
Dashboard and data visualization styles · 10 styles
Data-Dense Dashboard
Maximizes information density for power users who need to see everything at once. Every pixel serves a purpose.
BI & Analytics
Heatmap Dashboard
Uses color intensity to reveal patterns in large datasets. Perfect for geographic, behavioral, or time-series data.
BI & Analytics
Executive Dashboard
Distills complex data into key metrics. Large numbers, clear trends, and minimal noise for busy executives.
BI & Analytics
Real-Time Monitoring
Built for operations centers with live-updating metrics, streaming charts, and instant alert visibility.
BI & Analytics
Drill-Down Analytics
Start with the big picture, drill into details. Perfect for analysts who need to explore data at multiple levels.
BI & Analytics
Comparative Analysis Dashboard
Designed for comparing two or more datasets side by side. Highlights differences and makes patterns obvious.
BI & Analytics
Predictive Analytics
Visualizes predictions and forecasts with confidence intervals. Shows what the data says about the future.
BI & Analytics
User Behavior Analytics
Visualizes how users interact with products. Funnels, flows, and click maps reveal the user journey.
BI & Analytics
Financial Dashboard
Purpose-built for financial data with proper number formatting, accounting conventions, and financial visualizations.
BI & Analytics
Sales Intelligence Dashboard
Tracks the sales pipeline with quota progress, deal stages, activity metrics, and team leaderboards.
BI & Analytics
For AI coding agents
Give your agent a design direction.
Left alone, coding agents reach for the same blue buttons and default fonts. Every style page has a prompt that spells the look out: colors, effects, CSS, and when not to use it.
- 1Pick a styleBrowse the demos, or filter by industry.
- 2Copy the promptOne click on any style page.
- 3Paste it into your agentClaude Code, Cursor, v0, Lovable or whatever you build with.
Apply the Glassmorphism style to this interface.
What it is: Inspired by frosted glass, this style creates depth through transparency and blur effects. Perfect for layered interfaces where content hierarchy is important.
Look and feel: Frosted glass, Transparent, Blurred background, Layered, Vibrant.
Colors: primary rgba(255,255,255,0.15), #0080FF, #8B00FF; secondary #FF1493, #20B2AA.
Effects and motion: Backdrop blur (10-20px), subtle 1px rgba(255,255,255,0.2) border, soft heavily blurred colour blobs behind the glass.
Reference CSS (put these class names on the matching elements, or map them onto existing components and class names; avoid long structural selectors):
```css
:root {
--glass-fill: rgba(255,255,255,0.15);
--glass-blue: #0080FF;
--glass-violet: #8B00FF;
--glass-pink: #FF1493;
--glass-teal: #20B2AA;
--glass-border: rgba(255, 255, 255, 0.2);
}
/* Glass needs something colourful behind it to blur. Keep the gradient bright;
never lay a dark tint over the glass or darken the background. */
body {
min-height: 100vh;
background: linear-gradient(135deg, var(--glass-blue) 0%, var(--glass-violet) 50%, var(--glass-pink) 100%);
color: #FFFFFF;
font-family: system-ui, sans-serif;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* Soft light blooms behind the panels: large, heavily blurred, fixed */
.blob {
position: fixed;
z-index: -1;
width: 28rem;
aspect-ratio: 1;
border-radius: 50%;
background: var(--glass-teal);
filter: blur(80px);
opacity: 0.6;
pointer-events: none;
}
.card {
padding: 2rem;
border: 1px solid var(--glass-border);
border-radius: 1.5rem;
background: var(--glass-fill);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.card p {
color: #FFFFFF;
}
.button {
padding: 0.75rem 1.5rem;
border: 1px solid var(--glass-border);
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: #FFFFFF;
font-weight: 600;
transition: transform 150ms ease, background-color 150ms ease;
}
.button:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.05);
}
.button:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 3px;
}
.badge--positive {
color: #86EFAC;
font-weight: 600;
}
@media (prefers-reduced-transparency: reduce) {
.card,
.button {
background: rgba(30, 20, 60, 0.85);
}
}
@media (prefers-reduced-motion: reduce) {
.button {
transition: none;
}
.button:hover {
transform: none;
}
}
```
Works best for: Modern SaaS, Financial dashboards, High-end corporate, Modal overlays.
Avoid it for: Low-contrast backgrounds, Critical accessibility, Performance-limited. If this product falls into one of those, say so before restyling.
Change the visual design only: keep the existing layout, content and behaviour.
Keep visible focus states, give icon-only controls an accessible name (aria-label) and respect prefers-reduced-motion.Guide
What is a UI style guide?
A UI style guide documents how an interface should look and behave: colors, typography, spacing, components, and the visual style that ties them together. This site is a reference for that last part, the named UI design styles (glassmorphism, neubrutalism, Swiss modernism and 64 more) that teams choose from when they set a direction.
How to choose a UI design style
- Start from the product and its users. Every style lists what it suits and what to avoid; a banking dashboard and a music app want different things.
- Narrow by industry. The industry filter above shows the styles that fit your sector.
- Check accessibility early. Low-contrast styles such as glassmorphism and neumorphism need extra care to meet WCAG contrast.
- Prototype, then hand it off. Use the live demo and palette to decide, then give the CSS or the prompt to whoever builds it, person or agent.
From the team behind UI Style Guide
Rolling AI coding agents out across your team?
Farad Labs runs hands-on AI training built around your team's real work, and builds AI features into the software you already run.