# Design styles, named

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](#glassmorphism), [Frutiger Aero](#frutiger-aero), [Dark luxe](#dark-luxe) |
| soft buttons, pillowy, pressed in | [Neumorphism](#neumorphism), [Claymorphism](#claymorphism), [Playful](#playful) |
| puffy, squishy, cute, "made of clay" | [Claymorphism](#claymorphism), [Playful](#playful), [Y2K](#y2k) |
| real, knobs, leather, "like a real object" | [Skeuomorphism](#skeuomorphism) |
| simple, clean, flat, "no shadows" | [Flat design](#flat-design), [Minimal monochrome](#minimal-monochrome), [Swiss](#swiss) |
| "like Android", floating cards, a round plus button | [Material elevation](#material-elevation) |
| bold, loud, punk, "black borders" | [Neo-brutalism](#neo-brutalism), [Comic and pop art](#comic-and-pop-art), [Brutalism](#brutalism) |
| raw, ugly on purpose, "like an old website" | [Brutalism](#brutalism), [Terminal](#terminal-and-ascii) |
| grid, poster, magazine, "long reads" | [Swiss](#swiss), [Editorial](#editorial) |
| black and white, quiet, sleek dark | [Minimal monochrome](#minimal-monochrome), [Dark luxe](#dark-luxe) |
| boxes, tiles, 3D diagram, stacked layers | [Bento grid](#bento-grid), [Isometric](#isometric), each with another style |
| dreamy colors, northern lights, "gradient background" | [Mesh and aurora](#mesh-and-aurora) |
| grainy, film, zine, screen print | [Grain and noise](#grain-and-noise), [Risograph](#risograph) |
| two-color photos, "like a poster" | [Duotone](#duotone) |
| comic, dots, speech bubbles | [Comic and pop art](#comic-and-pop-art) |
| 80s, squiggles, confetti, zigzags | [Memphis](#memphis) |
| primary colors, "circles, squares and triangles" | [Bauhaus](#bauhaus) |
| Gatsby, gold, 1920s, theatre | [Art Deco](#art-deco) |
| 2000s, chrome, aqua, bubbles, glossy | [Y2K](#y2k), [Frutiger Aero](#frutiger-aero) |
| hacker, code, 8-bit, pixels | [Terminal and ASCII](#terminal-and-ascii), [Pixel art](#pixel-art) |
| for kids, chunky, bouncy | [Playful and toy-like](#playful) |
| natural, earthy, calm and warm | [Organic and natural](#organic) |

## Surfaces and depth

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

*Figure: 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.*

*Figure: 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.

*Figure: 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.*

*Figure: 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.*

*Figure: 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.

*Figure: 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.*

*Figure: 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.*

*Figure: 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.

*Figure: 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.*

*Figure: 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.

*Figure: 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.*

*Figure: 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.*

*Figure: 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](/docs/dials/) that build it.

The [accessibility floors](/docs/accessibility/) 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](/showcase/).