UI styles atlas

Recognize an interface style

Learn the defining signals, compare risks, and copy the available static Pack.

Frosted panel over a controlled colorful backdrop.

8 sourced styles

Each entry separates the name, terminology status, visual signals, and implementation constraints.

Frosted panel over a controlled colorful backdrop.

Industry-coined trend

Glassmorphism

Translucent blurred cards placed over a vivid backdrop.

Surface: Frosted panels
Color: Visible vivid backdrop
Geometry: Thin light edge

Web approximation: glass controls above opaque content.

Vendor design language

Liquid Glass

Apple controls float like lenses above opaque content.

Layout: Glass reserved for controls
Depth: Lensing effect
Color: Adaptive tint

Document structure, direct links, and native materials.

Contested label

Web Brutalism

A dense page that leaves browser-default materials visible.

Typography: Browser materials
Layout: Document structure
Depth: No decorative rendering

Saturated fills, uniform outline, and hard shadow.

Industry-coined trend

Neobrutalism

Saturated blocks, thick black outlines, and crisp shadows without blur.

Geometry: Thick outlines
Depth: Hard offset shadows
Color: Saturated color blocks

Paper notebook with depth and material details.

Established movement

Skeuomorphism

The interface imitates a real object through materials, lighting, and physical details.

Surface: Simulated real materials
Depth: Physical lighting
Layout: Object metaphor

Controls molded into one continuous matte surface.

Industry-coined trend

Neumorphism

Controls molded into a matte surface through two very soft shadows.

Surface: One continuous surface
Depth: Dual soft shadows
Depth: Pressed inset state

Simple flat fills organized by color and typography.

Established movement

Flat Design

Simple flat fills, geometric icons, and no simulated material.

Surface: Solid color fills
Depth: No simulated depth
Geometry: Simple glyphs

One primary decision surrounded by negative space.

Established movement

Minimalism

Very few elements, generous negative space, and deliberate typographic hierarchy.

Layout: Active negative space
Layout: Restricted element count
Color: Limited palette

Same card, four styles

What the style requires, what usually comes with it, what can change without leaving it, and what betrays it.

Same card, four styles

Compare close neighbors

Glassmorphism decorates content surfaces. Liquid Glass reserves an adaptive material for Apple controls and navigation.

Glassmorphism vs Liquid Glass

Neobrutalism designs a raw-looking appearance with substantial CSS. Web Brutalism genuinely exposes web structure and native materials.

Neobrutalism vs Web Brutalism

Neumorphism molds all controls into one abstract surface. Skeuomorphism imitates real materials and objects that can be named.

Neumorphism vs Skeuomorphism

Flat Design describes how surfaces are rendered. Minimalism describes how many elements remain and how attention is organized.

Flat Design vs Minimalism

A governed atlas

A style enters this atlas when it has a defensible name, credible sources, four observable signals, and a clear boundary with its neighbors.

The Pack for your agent translates these criteria into static instructions with versioned references and a reproducible digest.