Industry-coined trend
Glassmorphism
Translucent blurred cards placed over a vivid backdrop.
- Surface: Frosted panels
- Color: Visible vivid backdrop
- Geometry: Thin light edge
UI styles atlas
Learn the defining signals, write a reliable brief, and verify what your agent produced.
Each entry separates the name, terminology status, visual signals, and implementation constraints.
Industry-coined trend
Translucent blurred cards placed over a vivid backdrop.
Vendor design language
Apple controls float like lenses above opaque content.
Contested label
A dense page that leaves browser-default materials visible.
Industry-coined trend
Saturated blocks, thick black outlines, and crisp shadows without blur.
Established movement
The interface imitates a real object through materials, lighting, and physical details.
Industry-coined trend
Controls molded into a matte surface through two very soft shadows.
Established movement
Simple flat fills, geometric icons, and no simulated material.
Established movement
Very few elements, generous negative space, and deliberate typographic hierarchy.
Glassmorphism decorates content surfaces. Liquid Glass reserves an adaptive material for Apple controls and navigation.
Glassmorphism vs Liquid GlassNeobrutalism designs a raw-looking appearance with substantial CSS. Web Brutalism genuinely exposes web structure and native materials.
Neobrutalism vs Web BrutalismNeumorphism molds all controls into one abstract surface. Skeuomorphism imitates real materials and objects that can be named.
Neumorphism vs SkeuomorphismFlat Design describes how surfaces are rendered. Minimalism describes how many elements remain and how attention is organized.
Flat Design vs MinimalismA style enters this atlas when it has a defensible name, credible sources, four observable signals, and a clear boundary with its neighbors.
Create, Modify, and Repair briefs then translate those criteria into verifiable instructions for a coding agent.