The Living UI Design Gallery is a living, interactive, single-source reference for UI/UX designers, frontend engineers, product teams, and design historians. It curates 90 distinct design languages, movements, and aesthetic paradigms spanning the history of digital interfaces—from foundational Skeuomorphism and Swiss International Typographic Style, to contemporary Glassmorphism, Material You, Spatial Computing, and Generative AI Native UIs.
Every single style includes 3 fully functional, interactive micro-components (270 total live demos)—allowing you to directly experience tactile feedback, lighting models, surface tensions, typography hierarchies, and motion behaviors right in your browser.
🌐 Experience the Live Application: https://mdsagormunshi.github.io/UIDesignGallery/
- 🏛️ 90 Curated Design Paradigms: Spans 12 meticulously categorized design eras, philosophies, and contemporary patterns.
- ⚡ 270 Living, Interactive Components: Tactile buttons, responsive dials, fluid sliders, physics toggles, morphing dynamic islands, and 3D kinetic surfaces.
- 🔍 Instant Fuzzy Search & Alias Indexing: Filter effortlessly by style name or common synonyms (e.g. searching "Soft UI" highlights Neumorphism; "Apple HIG" maps to iOS Design).
- 🌓 Real-Time Theme Engine: Seamlessly toggle between dark and light gallery chrome with instant CSS custom property recalculation.
- 📱 True Cross-Device Responsiveness: Engineered with fluid CSS grid layouts, mobile drawer navigation, and touch-optimized interactive targets.
- 🚀 100% Zero-Dependency Web Standards: Crafted entirely with pure HTML5, vanilla CSS3, and modern JavaScript—no bundlers, no external frameworks, and lightning-fast load times.
- 📋 Copy-Paste Ready Architecture: Every micro-component is isolated with scoped class namespaces, ready to be dropped into React, Vue, Svelte, Tailwind, or plain CSS projects.
The gallery categorizes all 90 styles into 12 core design disciplines:
| Category | Styles Count | Core Focus |
|---|---|---|
| 1. Foundational & Historical | 9 | Foundational paradigms that established digital UI history |
| 2. Skeuomorphic & Textured | 7 | Physical realism, tactile materials, depth, and organic forms |
| 3. Glass & Translucent | 5 | Optical refraction, frosted surfaces, glow, and layered depth |
| 4. Retro & Nostalgic | 9 | Vintage eras, 8-bit computing, Y2K futurism, and vaporwave |
| 5. Futuristic & Sci-Fi | 7 | HUD telemetry, neon cybernetics, spatial environments, and CLI |
| 6. Typography & Editorial | 3 | Type-driven hierarchies, print layouts, and literary structures |
| 7. Layout Systems | 6 | Bento grids, cards, modular systems, and atomic architectures |
| 8. Motion & Interaction | 7 | Microinteractions, kinetic type, scroll triggers, and parallax |
| 9. Accessibility & Contrast | 5 | WCAG compliance, high contrast, monochrome, and OLED dark mode |
| 10. Business & Product Design | 10 | Enterprise SaaS, Apple HIG, Fluent UI, and luxury storefronts |
| 11. Ambient & Experimental | 11 | Generative algorithms, parametric geometry, and biophilic UI |
| 12. Maximalist & Bold | 11 | Expressive color density, Neumorphism, and playful cartoon aesthetics |
The core design philosophies that defined graphical user interfaces across four decades.
- Skeuomorphism (Realistic UI, Texture Design): Mimics physical materials (leather, polished brass, stitched wood) with realistic drop shadows, specular highlights, and gradients.
- Flat Design (Flat UI, Two-Dimensional): Strips away dimensional illusions in favor of crisp primary hues, sharp corners, and geometric clarity.
- Material Design (Material UI, Google Material): Google's physics-grounded paper and ink system featuring responsive ripples, dynamic elevations, and purposeful kinetic transitions.
- Material You (Material 3, Dynamic Color): Contextual, personalized color extraction derived from user wallpapers and adaptive pill-shaped surfaces.
- Minimalism (Minimalist UI, Reductionist): Radical economy of visual noise; generous negative whitespace, restrained typography, and essential functionality.
- Brutalism (Web Brutalism, Raw UI): Raw, unpolished, raw HTML-inspired aesthetics with monospaced type, system borders, and intentional aesthetic defiance.
- Neo-Brutalism (Modern Brutalism, Neubrutalism): Contemporary refinement featuring saturated candy palettes, thick offset hard-drop shadows, and playful geometric buttons.
- Swiss Design (International Typographic Style): Mathematical grid alignment, asymmetrical balance, objective clarity, and bold grotesk typography.
- Flat 2.0 (Semi-Flat, Almost Flat): Evolutionary blend pairing flat minimalism with subtle ambient depth, micro-gradients, and soft functional shadows.
Physical tactile sensations, biomimicry, and physical object rendering in digital space.
- Claymorphism (Clay UI, 3D Soft): Friendly, matte 3D clay aesthetic with dual inner shadows, puffy contours, and pastel backdrops.
- Organic Design (Nature-Inspired, Fluid Curves): Flowing, asymmetrical curves and natural contours inspired by rivers, pebbles, and botanical forms.
- Biomorphic Design (Cellular UI, Morphic): Shapes echoing living cellular biology, membranes, fluid dynamics, and anatomical forms.
- Hyperrealistic Design (Photo-Real UI, Trompe-l'œil): Photorealistic fidelity with multi-layered specular highlights, micro-textures, and optical reflections.
- Industrial Design UI (Braun-Style, Hardware UI): Dieter Rams-inspired physical instruments, tactile switches, knurled knobs, and stamped metal bevels.
- 3D UI Design (Three-Dimensional UI, Spatial Surface): True geometric three-dimensional space, isometric transforms, and interactive rotational depth.
- Isometric Design (Isometric Projection, 2.5D): Parallel perspective projection maintaining constant 30-degree angles without perspective vanishing points.
Refractive surfaces, light dispersion, and multi-planar frosted interfaces.
- Glassmorphism (Frosted Glass, Glass UI): Translucent layered backgrounds with heavy CSS
backdrop-filter: blur(), subtle white borders, and soft shadows. - Liquid Glass Design (Fluid Glass, Water UI): Glassmorphic transparency infused with fluid, organic distortion waves, light caustics, and ripples.
- Aurora UI (Aurora Glow, Northern Lights): Glowing, organic mesh gradients that drift softly behind semi-transparent panels.
- Holographic Design (Holo UI, Iridescent): Prismatic, iridescent color-shifting reflections that shift with viewing angle and interaction.
- Liquid Design (Fluid UI, Organic Flow): Viscous, fluid-like interfaces with gooey SVG filters, tension-based morphing, and elastic rebounds.
Time-traveling interfaces celebrating digital history and vintage counter-culture.
- Retro Design (Vintage UI, Nostalgia): Warm sepia tones, halftone patterns, mechanical typography, and early advertising sensibilities.
- Y2K Design (Y2K Aesthetic, Late 90s Cyber): Chrome typography, holographic pastels, bubbly tech contours, and futuristic optimism from the turn of the millennium.
- Vaporwave Design (Synthwave UI, 80s Aesthetic): Neon pinks, cyans, Roman marble busts, wireframe horizons, and nostalgic glitch aesthetics.
- Memphis Design (80s Memphis, Radical Design): Ettore Sottsass-inspired squiggles, contrasting geometric shapes, polka dots, and exuberant pastel palettes.
- Pixel Art Design (8-Bit UI, Retro Gaming): Nostalgic low-resolution bitmap graphics, grid-aligned sprites, and crisp pixel borders.
- Retro-Futurism (Mid-Century Modern Sci-Fi, Atom Age): Tomorrow through yesterday's eyes—space-age fins, atomic arcs, analog oscilloscopes, and CRT monitors.
- Neo Futurism (Modern Sci-Fi, Contemporary Futuristic): Aerodynamic architecture, smooth carbon polymers, kinetic light strips, and clean cybernetics.
- Hand-Drawn Design (Doodle UI, Sketch Design): Wobbly organic pen strokes, hand-lettered typefaces, and sketchbook annotations.
- Comic Design (Pop Art UI, Graphic Novel): Ben-Day dots, bold halftone outlines, speech bubbles, and high-energy onomatopoeia badges.
Interfaces built for deep space telemetry, cybernetic terminals, and spatial operating systems.
- Cyberpunk Design (Cyberpunk UI, High Tech Low Life): Neon yellows, deep pitch blacks, glitch overlays, warning chevrons, and industrial typography.
- Futuristic UI (Sci-Fi Interface, Speculative UI): Sleek telemetry panels, micro-data coordinates, precision crosshairs, and holographic readouts.
- Futurism (Italian Futurism, Dynamic Speed): Inspired by early 20th-century velocity, angular diagonals, and dynamic machine motion.
- HUD Interface Design (Heads-Up Display, FUI): High-density military avionics readouts, circular reticles, targeting arrays, and luminous vector paths.
- Terminal / CLI UI (Command-Line Interface, TUI): Green or amber phosphor monospace consoles, blinking block cursors, and ASCII box-drawing borders.
- Immersive Design (Full-Screen Experience, Atmospheric): Edge-to-edge ambient canvas that pulls users into a focused sensory space.
- Spatial Computing Design (visionOS Style, Spatial UI): Translucent floating glass windows, eye-tracked focal depth, and dimensional lighting models.
Content-first compositions that honor magazine publishing and typographic finesse.
- Editorial Design (Magazine UI, Editorial Layout): Elegant serif headlines, multi-column reading flow, drop caps, and thoughtful whitespace pacing.
- Typography-First Design (Type-Driven UI, Kinetic Type): Letterforms as the primary aesthetic and structural element, using variable font weights and scale.
- Postmodern Design (Deconstructive UI, Anti-Design): Layered overlaps, rule-breaking margins, intentional asymmetry, and provocative typographic juxtapositions.
Structured modular frameworks for enterprise scale and component architectures.
- Card-Based Design (Card UI, Container Pattern): Self-contained, modular containers encapsulating related data, media, and primary actions.
- Bento Design (Bento Grid, Bento Box UI): Japanese bento box-inspired grids featuring heterogeneous tile proportions, rounded radii, and rich data density.
- Modular Design (Module System, Component Grid): Interchangeable, standardized blocks that can be rearranged flexibly without breaking visual rhythm.
- Atomic Design (Component-Based Design, Design System UI): Brad Frost's hierarchy of atoms, molecules, organisms, templates, and full page compositions.
- Dashboard Design (Dashboard UI, Analytics): At-a-glance KPI indicators, data summaries, status chips, and real-time metric cards.
- Data Visualization Design (Data Viz UI, Chart Design): Interactive sparklines, color-coded heat maps, progress arcs, and quantitative graphical representations.
Engaging experiences centered around kinetic storytelling and user feedback.
- Motion Design (Animation UI, Dynamic Motion): Thoughtful choreography that directs cognitive focus, signals transitions, and imparts delight.
- Microinteraction Design (Micro-interactions, Feedback Animations): Targeted micro-delights—bouncing like buttons, toggles with personality, and stateful icons.
- Parallax Design (Parallax Scrolling, Layered Scrolling): Multi-speed scroll planes simulating stereoscopic depth and cinematic immersion.
- Scroll-Based Design (Scroll-Driven UI, Scroll Animation): Scroll position linked directly to progress indicators, image reveals, and component transitions.
- Kinetic Design (Kinetic Typography, Motion Typography): Moving letterforms, physics-driven spring mechanics, and responsive text manipulation.
- Interactive Design (Interactive UI, Clickable Experience): Every element actively invites tactile user manipulation and playful response.
- Gamified Design (Game UI, Playful Interface): XP progress bars, achievement toasts, streak counters, and reward-driven loops.
Inclusive design systems engineered for universal readability and assistive tech.
- High Contrast Design (High Contrast UI, Bold Contrast): Stark black-on-white and white-on-black geometries maximizing visibility under all lighting conditions.
- Accessible Design (Inclusive UI, WCAG-Compliant): Prominent focus indicators, compliant color ratios (>4.5:1), and keyboard-navigable architecture.
- Dark Mode Design (Dark Theme, Night Mode UI): Deep charcoal backgrounds, balanced luminances, reduced glare, and OLED battery preservation.
- Light Mode Design (Light Theme, Day Mode UI): Clean daylight surfaces offering crisp reading clarity under bright ambient environments.
- Monochrome Design (Single-Color UI, Monotone): Sophisticated, unified interfaces composed entirely of varying tints, shades, and tones of a single hue.
Battle-tested commercial design languages powering enterprise software and global operating systems.
- Corporate UI Design (Enterprise UI, Business Interface): Conservative, dependable layouts engineered for data-heavy workflows and institutional clarity.
- SaaS UI Design (SaaS Interface, Subscription App): Modern software product design featuring pricing grids, feature checklists, and conversion CTAs.
- E-commerce UI Design (Shop Interface, Storefront UI): Friction-free product cards, dynamic cart badges, and checkout-focused micro-actions.
- Apple HIG Style (Apple Human Interface Guidelines, iOS Design): San Francisco typography, segmented controls, buttery spring curves, and system blur materials.
- Fluent UI (Windows Fluent Design, Metro Design): Microsoft's Acrylic translucency, subtle reveal lighting on cursor hover, and rounded modern chrome.
- Mobile-First Design (Mobile UI, Touch-First): Thumb-zone ergonomic layouts, large tap targets, and bottom sheet navigation drawers.
- App-Like Design (App-Style UI, Native-App Feel): Bringing native mobile paradigms (fixed action bars, tactile feedback) to web viewports.
- Dynamic Island Style Design (Island UI, Pill Interface): Expandable pill-shaped containers that fluidly morph into full notification trays.
- Luxury UI Design (Premium Interface, High-End): Refined serif typography, gilded champagne accents, restrained whitespace, and quiet elegance.
- Dark Luxury Design (Dark Premium UI, Noir Luxury): Velvety midnight surfaces, 24k gold highlights, and dramatic chiaroscuro contrast.
Avant-garde experiments pushing computational aesthetics, generative systems, and biomimicry.
- Ambient Design (Ambient UI, Subtle Interface): Whispering gradients and peripheral lighting that create presence without cognitive clutter.
- Experimental Design (Avant-Garde UI, Unconventional): Bold defiance of standard grid conventions and interface orthodoxies.
- Artistic UI Design (Creative Interface, Art-Inspired): Interfaces as canvas—painterly brush textures, watercolor washes, and expressive typography.
- Generative AI Design (AI-Generated UI, ML-Designed): Organic shapes, fluid prompts, and dynamic generative UI configurations.
- AI Native UI (AI-First Interface, Conversational UI): Chat-first paradigms, streaming response tokens, contextual prompt bubbles, and intent suggestions.
- Generative Design (Algorithmic UI, Procedural Design): Procedurally generated patterns, canvas math, and algorithmic visual iterations.
- Parametric Design (Algorithmic Parametric UI, Data-Driven Geometry): Complex geometric curves controlled by mathematical functions and slider inputs.
- Abstract Design (Abstract UI, Non-Literal): Non-representational colors, floating geometry, and pure visual emotion.
- Geometric Design (Geometric UI, Shape-Based): Exact Euclidean circles, polygons, isometric angles, and structured color blocking.
- Kawaii UI (Cute Design, Sweet UI): Japanese cute aesthetic—bubblegum pastels, joyful bouncing animations, and rounded squishy shapes.
- Biophilic Design (Nature-Connected UI, Eco Design): Living greens, earth pigments, organic growth motifs, and restorative botanical textures.
Unapologetic visual density, vibrant color saturation, soft neumorphic extrusions, and playful pop.
- Maximalism (Maximalist Design, Abundant UI): Defiant abundance—dense layering of vibrant textures, conflicting patterns, and visual richness.
- Maximalist Digital Design (Digital Maximalism, Bold Digital UI): Saturated electric gradients, multi-layered visual effects, and high kinetic energy.
- Gradient Design (Gradient UI, Color Transition): Smooth, multi-stop mesh color transitions functioning as primary hero surfaces.
- Soft UI (Soft Design, Gentle Interface): Whispering shadows, gentle gradients, and low-contrast approachable elements.
- Neumorphism (Neo-skeuomorphism, Soft Embossed): Plastic surfaces extruded from the background using dual opposing light/dark box shadows.
- Human-Centered Design (User-Centered UI, HCD): Empathic interfaces built around human ergonomics, conversational clarity, and clear mental models.
- Adaptive Design (Adaptive UI, Contextual Interface): Distinct purpose-built layouts triggered contextually by user device, orientation, and context.
- Responsive Design (Responsive UI, Fluid Layout): Continuously fluid media queries, flexible vector grids, and flexible container units.
- Illustration-Based Design (Illustrated UI, Storybook Design): Custom narrative vector illustrations that humanize software journeys.
- Cartoon UI Design (Animated UI, Toon Interface): Exaggerated proportions, heavy ink borders, dynamic squashes and stretches.
- Spatial Design (Spatial Layout, 3D Space UI): Utilizing z-axis perspective, depth layering, and optical proximity to organize hierarchy.
Every style is composed of pure HTML and CSS, intentionally written to be extracted in seconds.
To use the Neo-Brutalism Button in your project:
HTML:
<div class="nb-container">
<button class="nb-btn">GET STARTED</button>
</div>CSS:
.nb-container {
display: inline-block;
padding: 12px;
}
.nb-btn {
padding: 12px 24px;
background: #FFE600;
color: #000000;
font-family: inherit;
font-weight: 800;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 3px solid #000000;
border-radius: 4px;
box-shadow: 4px 4px 0px #000000;
cursor: pointer;
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.nb-btn:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px #000000;
}
.nb-btn:active {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0px #000000;
}HTML:
<div class="glass-card">
<h3>Translucent Card</h3>
<p>Frosted glass with backdrop filter.</p>
</div>CSS:
.glass-card {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
color: #1e1e24;
}The chrome of the gallery itself is controlled by CSS Custom Properties that automatically adjust based on the selected theme:
:root {
/* Surface & Background */
--chrome-bg: #f4f4f5;
--chrome-surface: #ffffff;
--chrome-sidebar: #fafafa;
--chrome-hover: #f0f0f0;
--chrome-border: #e4e4e7;
/* Typography */
--chrome-text: #18181b;
--chrome-text2: #52525b;
/* Brand Accents */
--chrome-accent: #6366f1;
--chrome-accent-hover: #4f46e5;
/* Metrics & Motion */
--chrome-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
--chrome-radius: 10px;
--chrome-sidebar-w: 290px;
--chrome-trans: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="dark"] {
--chrome-bg: #18181b;
--chrome-surface: #27272a;
--chrome-sidebar: #1f1f23;
--chrome-hover: #2e2e33;
--chrome-border: #3f3f46;
--chrome-text: #f4f4f5;
--chrome-text2: #a1a1aa;
--chrome-accent: #818cf8;
--chrome-accent-hover: #6366f1;
--chrome-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}Contributions from the global design and frontend community are warmly welcomed!
Whether you want to:
- Propose a new UI movement (e.g. Solarpunk UI, Frutiger Aero, Acid Graphics)
- Enhance existing micro-components with extra interactive flair
- Improve accessibility and keyboard navigability
Please read our Contributing Guidelines and submit a Pull Request.
This project is licensed under the MIT License — see the LICENSE file for complete details. You are free to use, adapt, and build upon these components for both personal and commercial projects.
⭐ If you find this gallery helpful or inspiring, please consider starring the repository! ⭐