The design styles encyclopedia

Every page here answers the same five questions about one UI style: what it is (in a definition you can cite), how to build it (a copy-paste CSS and Tailwind recipe with real fallbacks), who uses it well (verified live examples, never stock art), when not to use it (the honest part most guides skip), and whether it is actually trending (real usage data from 208,000+ design generations on Superdesign, not vibes). Steal the code, or generate a full UI in any of these styles in about a minute.

Glassmorphism example: a frosted white prompt card floating over a mountain photo, generated with Superdesign

Glassmorphism→

Frosted glass panels: translucent fill, backdrop blur, a thin light border, layered over a colorful backdrop.

Skeuomorphism→

Interfaces that imitate real materials: leather, metal, glossy buttons that physically depress.

Neumorphism UI example: extruded and inset soft UI cards on a light gray background, generated with Superdesign

Neumorphism→

Soft molded plastic: dual shadows extrude elements from a same-color background. Beautiful, and a contrast trap.

Minimalist web design example: a warm cream editorial system with stark black type, generated with Superdesign

Minimalist Web Design→

The element budget: one typeface, one accent, whitespace as hierarchy, and a single CTA allowed to speak.

Dark mode UI example: a dark enterprise dashboard with deep grays and amber accents, generated with Superdesign

Dark Mode UI→

A designed system, not inverted colors: surface tiers, off-white text, desaturated accents, computed contrast.

Brutalist web design example: pure black and white UI with hard borders and a visible grid, generated with Superdesign

Brutalism→

The website with its structure exposed: mono fonts, default-blue links, hard black borders, zero decoration.

Bento grid example: a blueprint-minimal mosaic grid layout generated with Superdesign

Bento Grid→

One grid, compartments of different sizes: the default look for SaaS feature sections since Apple popularized it.

Claymorphism example: a high-fidelity clay design system with inflated pastel cards and chunky buttons, generated with Superdesign

Claymorphism→

Soft inflated clay: pastel fills, double inset shadows, a tinted drop shadow. Neumorphism's friendlier successor.

Why trust these pages?

Three reasons. The examples are verified, not recycled: we checked every live site's production CSS before listing it. The trend numbers are first-party: they come from the prompts of real design generations on Superdesign, so they measure what builders actually ask for, not what listicles repeat. And every page has a "when not to use it" section with computed accessibility numbers, because a style guide that only says yes is an ad. When you find a style you like, the fastest way to try it is the prompt library or the pre-tuned prompt at the bottom of each page.