Design styles named: from glassmorphism to brutalism

You don't need to know the names of design styles. Describe the look in your own words, like "frosty", "like a comic" or "soft buttons", and OpenDesigner shows you the named styles that match, side by side, so you can point at the one you mean. This page draws 28 of them in code, each with its name, the words people use for it, where it fits and how it goes wrong. The engine knows 133 named styles, and engine.py style search finds them from your words.

Your words, and the styles they mean

You say	Look at
frosty, see-through, glassy, icy	Glassmorphism, Frutiger Aero, Dark luxe
soft buttons, pillowy, pressed in	Neumorphism, Claymorphism, Playful
puffy, squishy, cute, "made of clay"	Claymorphism, Playful, Y2K
real, knobs, leather, "like a real object"	Skeuomorphism
simple, clean, flat, "no shadows"	Flat design, Minimal monochrome, Swiss
"like Android", floating cards, a round plus button	Material elevation
bold, loud, punk, "black borders"	Neo-brutalism, Comic and pop art, Brutalism
raw, ugly on purpose, "like an old website"	Brutalism, Terminal
grid, poster, magazine, "long reads"	Swiss, Editorial
black and white, quiet, sleek dark	Minimal monochrome, Dark luxe
boxes, tiles, 3D diagram, stacked layers	Bento grid, Isometric, each with another style
dreamy colors, northern lights, "gradient background"	Mesh and aurora
grainy, film, zine, screen print	Grain and noise, Risograph
two-color photos, "like a poster"	Duotone
comic, dots, speech bubbles	Comic and pop art
80s, squiggles, confetti, zigzags	Memphis
primary colors, "circles, squares and triangles"	Bauhaus
Gatsby, gold, 1920s, theatre	Art Deco
2000s, chrome, aqua, bubbles, glossy	Y2K, Frutiger Aero
hacker, code, 8-bit, pixels	Terminal and ASCII, Pixel art
for kids, chunky, bouncy	Playful and toy-like
natural, earthy, calm and warm	Organic and natural

Surfaces and depth

How surfaces are lit and stacked: see-through, molded, real or flat.

Glassmorphism

Panels look like frosted glass: you see a blurred version of what is behind them.

People say: frosty, see-through, icy, “like my phone”
In code: backdrop-filter: blur(20px)
Fits: bars, menus and sheets over photos, maps or music
Goes wrong when: it covers reading surfaces, or sits on a flat color where the blur shows nothing

Neumorphism

Buttons look pushed up out of the page, or pressed into it, as if molded from one soft material.

People say: soft buttons, pillowy, pressed in, “like a remote”
In code: a light and a dark box-shadow on opposite sides; inset when pressed
Fits: a small physical-feeling panel: a timer, a player, a smart-home remote
Goes wrong when: everything is soft, so nothing reads as clickable. It fails 3:1 edge contrast by design

Claymorphism

Shapes look puffy and soft, like modeling clay or plastic toys.

People say: puffy, squishy, cute, 3D, “made of clay”
In code: border-radius: 32px, a soft drop shadow and two inset shadows
Fits: onboarding, kids and learning, wellness; carried mostly by 3D art
Goes wrong when: a clay icon decorates every row, or white text sits on pastel

Surface styles, part one. Glassmorphism: a frosted card blurs the shapes behind it, which stay sharp outside its edge. Neumorphism: a raised and a pressed button molded from the page color. Claymorphism: a puffy pastel button and ball, lit from inside by two inner shadows.

Skeuomorphism

The screen imitates real objects and materials: knobs, metal, wood, leather, tape.

People say: realistic, knobs, dials, “like a real object”
In code: layered gradients for light, stacked shadows, texture art
Fits: music and audio tools, cameras, games, one special screen
Goes wrong when: fake materials cover forms and lists, or the drawn device copies a real brand’s hardware

Flat design

Solid colors only: no shadows, shine or texture. Color, size and weight do the work.

People say: simple, clean, flat, “no shadows”
In code: box-shadow: none, solid fills, 1 px borders
Fits: almost everything, from student projects to enterprise dashboards
Goes wrong when: buttons look like labels and links look like text

Material elevation

Cards float at set heights; the higher one floats, the bigger its shadow.

People say: “like Android”, floating cards, “the round plus button”
In code: box-shadow from a fixed ladder of 5 or 6 levels
Fits: Android apps, admin panels, Workspace-style tools
Goes wrong when: every card has a big shadow, or a floating button lands on a desktop web page

Surface styles, part two. Skeuomorphism: a brushed-metal knob with tick marks on a dark panel. Flat design: a flat drawing, a solid button and an underlined link, with no shadows. Material elevation: cards at heights 1, 3 and 5 with growing shadows, and a round floating action button.

Graphic and print

Ink, outlines, shapes and printing processes.

Neo-brutalism

Bold flat colors with thick black outlines and hard black shadows, like stickers or cut paper.

People say: bold, loud, chunky, “black borders”, punk
In code: border: 3px solid and box-shadow: 4px 4px 0; press moves into the shadow
Fits: creator tools, indie products, marketing pages, events
Goes wrong when: everything gets a border and a shadow, or four colors clash

Brutalism

Raw and unpolished on purpose: default fonts, plain links, visible structure, giant type.

People say: raw, ugly on purpose, “like an old website”
In code: a system font, border-radius: 0, underlined blue links, little else
Fits: portfolios, studios, art and culture sites, playful changelogs
Goes wrong when: “unfinished” becomes an excuse for no focus, no states or no grid

Comic and pop art

Like a comic book: thick ink outlines, few flat colors, dot shading and speech balloons.

People say: comic, cartoon, dots, speech bubbles, “POW”
In code: halftone from radial-gradient dots, border: 3px solid, SVG balloons
Fits: learning and kids, games, onboarding stories, campaign pages
Goes wrong when: balloons say nothing, or dots decorate every surface

Graphic styles, part one. Neo-brutalism: a white card with a thick black outline and a hard offset shadow, and a button pressed into its shadow. Brutalism: giant monospace type, plain rules and underlined links. Comic and pop art: an inked panel with halftone dots that grow toward the dark corner, a speech balloon and a burst.

Memphis

Playful 1980s patterns: squiggles, zigzags, dots and confetti in clashing bright colors.

People say: 80s, squiggles, confetti, zigzags, funky
In code: SVG pattern tiles as background-image, out of the reading order
Fits: events, youth brands, music and fashion campaigns; not product UI
Goes wrong when: confetti fills empty space, or patterns sit behind text

Bauhaus

Big simple shapes, circles, squares and triangles, in red, yellow, blue and black, with plain bold type.

People say: primary colors, art school, “circles, squares and triangles”
In code: shapes from border-radius: 50% and clip-path on a CSS grid
Fits: design tools, education, museums, architecture
Goes wrong when: shapes have no job, or a red shape sits next to a red error

Art Deco

1920s glamour: gold lines on black or deep green, fans and sunbursts, tall elegant capitals.

People say: Gatsby, gold, 1920s, grand hotel, theatre
In code: SVG ornament, border-image frames, a gold plus a lighter step
Fits: hotels, bars and restaurants, events, theatre, jewelry
Goes wrong when: gold gradient text is everywhere, or every card gets ornament

Graphic styles, part two. Memphis: squiggles, a zigzag, dots, stripes and confetti in clashing colors. Bauhaus: a red circle, a blue square, a yellow half circle and black bars on off-white. Art Deco: a gold sunburst, a double-line frame and spaced capitals on deep green.

Risograph

A cheap, colorful print look: two or three bright inks that overlap a little off, with grain.

People say: zine, printed, ink, screen print, indie
In code: one layer per ink with mix-blend-mode: multiply, nudged 1 to 3 px
Fits: indie publishing, cultural events, cafes, music; marketing only
Goes wrong when: interface text is shifted out of line, or pink and yellow carry text

Duotone

Pictures recolored in just two colors: one for the dark parts, one for the light parts.

People say: two-color photos, tinted photos, “like a poster”
In code: an SVG filter: feColorMatrix to gray, then feComponentTransfer
Fits: editorial and event imagery, team pages that need mixed photos to match
Goes wrong when: it hides product screenshots, or faces turn unflattering colors

Grain and noise

A fine speckle over colors and gradients, like film or printed paper.

People say: grainy, film, analog, textured, “less digital”
In code: an SVG feTurbulence layer at about 6% with mix-blend-mode: overlay
Fits: brand and marketing surfaces, music, wellness, food
Goes wrong when: grain sits over body text, stands in for a real picture, or covers the whole app

Print and texture styles. Risograph: a pink sun and mountains printed in two inks that mix where they overlap and sit a little out of line, with grain. Duotone: the same drawn landscape in full color and mapped to two inks, navy and pink. Grain and noise: one gradient, smooth on the left and grainy on the right (the grain is made stronger than usual here so it shows).

Layout and digital

How content is arranged, and looks born on screens. Bento grid and isometric drawing are structures: they borrow their colors and surfaces from another style.

Bento grid

Content sits in neat boxes of two or three sizes, like a bento lunch box. One idea per tile, and the biggest tile leads.

People say: boxes, tiles, dashboard tiles, “a grid of cards”
In code: display: grid with one gap; grid-column: span 2 on the big tiles
Fits: feature pages, launches, widget dashboards. A layout, so it takes its look from another style
Goes wrong when: every tile has the same weight, or tiles hold invented proof and glows

Bento grid, a layout rather than a look: OpenDesigner’s own facts in tiles of three sizes, with 193 questions as the large leading tile, then 8 dials, 28 styles, the accessibility floors and the export formats.

Swiss style

A strict grid, plain bold sans-serif type set flush left, lots of empty space and one strong accent.

People say: grid, poster, orderly, “sharp and serious”
In code: grid-template-columns: repeat(12, 1fr), text-align: start
Fits: enterprise and B2B tools, finance, wayfinding, documentation
Goes wrong when: the look is copied without a grid, or tiny tracked mono labels are everywhere

Editorial

It reads like a good magazine: big headlines, calm columns of text, large photos.

People say: magazine, newspaper, bookish, “long reads”
In code: max-width: 65ch, a serif for headings, text-wrap: pretty
Fits: publications, blogs, reports, case studies
Goes wrong when: it is cream, serif and terracotta by default, or the words are filler in a nice font

Isometric

Things drawn in 3D from above at a fixed angle, with no vanishing point, so parallel lines stay parallel.

People say: 3D diagram, little city, stacked layers, blocks
In code: SVG drawings on a 2:1 slope; best kept as assets
Fits: explaining layers or architecture: infrastructure, fintech, security
Goes wrong when: the clip art has nothing to do with the product, or invents parts the words never mention

Layout and drawing styles. Swiss: a bold headline flush left on a visible six-column grid, with one red square. Editorial: a section label, a large headline, a hairline rule and a drop cap. Isometric: the three tiers of design tokens, primitive, semantic and component, drawn as stacked plates lit from one side.

Terminal and ASCII

Looks like a command line: monospace letters, a prompt, and pictures made of text characters.

People say: hacker, code, nerdy, “like a terminal”
In code: font-family: ui-monospace, sizes in ch, white-space: pre
Fits: developer tools, CLI products, infrastructure, docs
Goes wrong when: mono is used for long reading, or typing animations delay real content

Pixel art

Everything drawn from visible square pixels, like an old video game.

People say: 8-bit, retro games, pixels, arcade, blocky
In code: image-rendering: pixelated, whole-number scaling, steps() motion
Fits: games, developer culture, playful tech brands, onboarding moments
Goes wrong when: pixel fonts set small text, or pixels scale by uneven amounts and blur

Y2K

The shiny future as imagined around 2000: chrome, holographic colors, bubbly shapes, old computer windows.

People say: 2000s, chrome, holographic, glossy, vaporwave
In code: gradients with background-clip: text; inset highlights
Fits: youth social apps, music, fashion, creator tools; not B2B
Goes wrong when: chrome goes on every heading, or sparkles fill space

Screen-era styles. Terminal and ASCII: a prompt, a build result and a box drawn from text characters, in green on near-black. Pixel art: a heart drawn from square pixels on a pixel grid, above a band that goes from solid, to a dithered checker pattern, to solid. Y2K and retro-futurism: an old-style window with chrome numerals and a glossy pill button over a holographic gradient.

Tone

The mood a whole surface gives off, from quiet to loud.

Minimal monochrome

Black, white and grays only, with lots of empty space and small, quiet type.

People say: black and white, “no color”, gallery, quiet
In code: one neutral ramp; the accent set to the darkest neutral
Fits: fashion and premium retail, portfolios, writing and developer tools
Goes wrong when: nothing looks clickable, or gray text sits on gray

Dark luxe

Near-black and quiet: soft gray text, thin lines, one soft light and real product screens.

People say: sleek dark, moody, high-end, “premium SaaS”
In code: #0b0b0d page, lighter layers, borders in white at 8%
Fits: B2B SaaS, developer and pro creative tools, AI products
Goes wrong when: it is near-black with one neon accent and glows, or gray text drops below 4.5:1

Mesh and aurora

Soft clouds of several colors blend into each other, like the northern lights.

People say: dreamy colors, northern lights, “gradient background”
In code: stacked radial-gradient layers, mixed in oklab
Fits: one marketing hero, music and AI products, events; never the dashboard
Goes wrong when: it is blue-to-purple, or blobs have no job

Tone styles, part one. Minimal monochrome: grays only, hairlines and one quiet line of type. Dark luxe: near-black with a faint light from the top, gray secondary text and a hairline panel of token names. Mesh and aurora: four soft color clouds behind a dark headline.

Playful and toy-like

Chunky, bright and bouncy, like a toy: big rounded buttons with a thick bottom edge.

People say: fun, for kids, chunky, bouncy, cute
In code: box-shadow: 0 4px 0 a darker shade; pressed moves down 4 px
Fits: kids and learning, habit trackers, games, celebration moments
Goes wrong when: the mascot is on every screen, everything bounces, or confetti fills space

Organic and natural

Earthy colors, soft irregular shapes and natural pictures: calm, warm, made by hand.

People say: natural, earthy, eco, plants, “calm and warm”
In code: warm neutral ramps; shapes from 8-value border-radius
Fits: food, wellness, agriculture, sustainability, outdoor brands
Goes wrong when: it is cream, serif and terracotta, or blobs and wavy dividers fill space

Frutiger Aero

The glossy, hopeful look of mid-2000s computers: aqua bubbles, blue skies, green grass, shiny buttons.

People say: aqua, bubbles, “sky and grass”, glossy, nostalgic
In code: a white gradient over the top half for gloss; glass as above
Fits: nostalgia brands, weather and outdoor apps, eco-tech, music
Goes wrong when: stock bubbles and grass decorate screens about something else, or every control shines

Tone styles, part two. Playful and toy-like: a round mascot and a chunky button with a darker ledge beside its pressed state. Organic and natural: a leaf in an irregular olive shape on pale sand. Frutiger Aero: a glossy aqua button with bubbles over sky and a green hill.

Gradients and surfaces, named

The smaller effects that styles are built from. They follow the same pattern: plain words first, then the name, then the code.

Linear gradient
One color fades into another along a straight line.
linear-gradient()

Radial gradient
Color spreads out from a point, like light from a lamp.
radial-gradient()

Conic gradient
Colors turn around a center, like a color wheel or a pie.
conic-gradient()

Mesh gradient
Several colors blend in many directions at once.
several radial-gradient layers

Gradient border
The outline itself fades from one color to another.
a gradient border-box

Gradient text
The letters fade from one color to another.
background-clip: text

Six kinds of gradient: linear along a line, radial from a point, conic around a center (a color wheel and a pie), mesh in many directions, a gradient border and gradient text. Gradients belong on marketing and illustration surfaces, never on buttons or forms.

Frosted glass
A see-through panel that blurs what is behind it.
backdrop-filter: blur()

Drop shadow
A soft shadow underneath, so something looks lifted.
box-shadow: 0 4px 12px

Inner shadow
A shadow inside the edge, so something looks pressed in.
box-shadow: inset

Hard shadow
A sharp, solid shadow shifted to one side, with no blur.
box-shadow: 4px 4px 0

Long shadow
A flat shadow that stretches far out at 45 degrees.
stacked shadows or an SVG shape

Hairline
The thinnest possible line, 1 px or less, between rows.
border-top: 1px solid

Six ways to show depth and edges: frosted glass over stripes, a soft drop shadow, an inner shadow, a hard offset shadow, a long 45-degree shadow behind a circle, and hairlines between rows.

Bevel
Edges lighter on top and darker below, so it looks raised.
a light and a dark border-color

Emboss
A shape raised out of the surface, in the same color.
text-shadow, light and dark

Sticker, die-cut
A shape with a white outline, as if cut out and stuck on.
a thick white SVG stroke and a small shadow

Halftone
Shading made of dots that grow larger where it is darker.
a radial-gradient dot grid

Grain, noise
A fine speckle, like film or paper.
SVG feTurbulence at low opacity

Scanlines
Thin horizontal stripes, like an old TV screen.
repeating-linear-gradient()

Six textures and reliefs: a beveled button, embossed letters in the surface’s own color, a die-cut sticker star, halftone dots that grow toward the dark side, film grain over a gradient, and scanlines over a dark screen. None of them counts as a visible edge or a state on its own.

A style is a direction, not decoration

A style applies to a whole surface, never to one corner of it. One glass card on a flat page, or one comic burst on a calm dashboard, reads as a mistake. Use the style on every instance of the same kind, keep one base style per surface, and spend boldness in one signature place. A product can carry two: a durable style for the app and a louder one for its marketing pages. When you pick a style in the interview, OpenDesigner records its name and sets the dials that build it.

The accessibility floors stay locked whatever the style: 4.5:1 text contrast, 3:1 for control edges and icons, 24 px targets, visible focus, reduced motion and reduced transparency. Some styles push against them:

Text on glass changes contrast with whatever scrolls behind it, so it is checked at the worst spot, and every glass surface gets a solid twin for people who turn transparency off.
Neumorphism fails the 3:1 edge contrast by design. Every control needs a visible border or a darker fill, and a pressed state needs a second signal besides the inset shadow.
Pastel and bright fills often fail with white text, and fluorescent pink or yellow fails as text on white. Keep text dark on light fills and check every pair.
Textures such as grain, halftone and scanlines lower contrast. Check text with the effect on, or keep text on plain fills.

To see styles applied to whole pages, browse the style studies in the showcase.

Design styles, named