Design styles
The names of design styles
A gradient and centred text is what you get when you do not ask for a look. These are the words to ask with: interface eras, graphic movements, nostalgic aesthetics, layouts and textures. Press one to restyle the same card.
This is the plain card. Press a style to restyle it, with the same words, stat, button and photo, and see what that look is called. Plain switches back to compare.
UI eras
How app and web interfaces have looked, roughly in order: from imitating real materials to flat colour and back to depth.
Bold and raw
Graphic design movements and their web descendants: hard edges, strong grids, loud colour, nothing softened.
Nostalgia
Looks borrowed from a decade. Ask for one by name and everyone pictures the same palette, type and texture.
Layout
Styles that are about how things are arranged and how much there is, more than about colour.
Texture and colour
Finishes you can add to almost any style: a texture on top, a colour treatment, a kind of gradient.
All terms
UI eras
- Skeuomorphismalso: skeuomorphic design
- Interfaces that imitate real objects and materials: linen, leather, stitching, glossy buttons, embossed text and photos in white frames. Early iPhone apps looked like this. Use it for warmth, craft and tactile nostalgia.
- Flat designalso: flat UI
- No shadows, gradients or textures: solid blocks of bright colour, simple shapes and clean sans-serif type. It replaced skeuomorphism around 2013 (Windows Metro, iOS 7). Use it for clarity and a friendly, graphic look.
- Material designalso: Material UI, Material You
- Google's system from 2014: flat surfaces stacked like paper at different heights, each with a soft shadow for its elevation, a bold primary colour and uppercase text buttons. Use it when something should feel like a familiar Android or Google app.
- Neumorphismalso: neomorphism, soft UI
- Everything is the same colour as the background and pushed out of it, or pressed into it, by a light shadow on one side and a dark one on the other. Soft and calm, but low contrast; it suits a hero shot more than a real, busy interface.
- Glassmorphismalso: frosted glass, glass UI
- Translucent panels that blur whatever is behind them, like frosted glass, with a thin bright edge, over a colourful background. Use it to layer UI over imagery or gradients; it needs something vivid behind the glass to work.
- Claymorphismalso: clay UI
- Puffy, rounded shapes that look moulded from soft clay: pastel colours, big corner radii, an inner highlight and shadow, and a soft drop shadow. Playful and friendly; pairs well with 3D clay icons and illustrations.
Bold and raw
- Brutalismalso: brutalist web design, brutalist design
- Raw and deliberately unpolished: default fonts, blue underlined links, plain borders, harsh colour, structure left exposed. Named after the bare-concrete buildings. Use it to look honest, independent and anti-corporate.
- Neubrutalismalso: neo-brutalism, new brutalism
- Brutalism made friendly: thick black outlines, hard offset shadows with no blur, flat saturated colours and chunky grotesque type. Popular with startups and indie products (Gumroad); loud, playful and easy to read on video.
- Swiss designalso: International Typographic Style, Swiss style
- Type on a strict grid, set flush left in a neutral sans-serif like Helvetica, with lots of white space, asymmetry and one strong colour, usually red. From 1950s Switzerland. Use it for an objective, confident, information-first look.
- Bauhausalso: Bauhaus design
- From the 1920s German school: primary red, yellow and blue with black, basic geometry (circle, square, triangle) and clean geometric sans-serif type. Form follows function. Use it for a bold, modernist, constructed look.
- Memphis designalso: Memphis style, Memphis Group
- 1980s Italian design gone loud: clashing pastels and brights, squiggles, zigzags, confetti, terrazzo and dot patterns, black outlines, shapes scattered on purpose. Fun, retro and maximal; good for youthful, energetic launches.
- Constructivismalso: Russian constructivism
- 1920s Soviet poster design: red, black and cream, heavy condensed capitals, strong diagonals and photomontage. It feels urgent, like a call to action. Use it for punchy announcements and anything that should shout.
Nostalgia
- Y2K aestheticalso: Y2K design, Y2K style
- Turn-of-the-millennium futurism: chrome and silver gradients, iridescent and holographic colour, glossy bubble buttons, pill shapes, sparkles and blobby type. Use it for playful, fashion-y, retro-future energy.
- Frutiger Aeroalso: Aero, Web 2.0 style
- The glossy optimism of the late 2000s (Windows Vista and 7, early iPhone ads): sky blues and fresh greens, nature, water, bubbles, glass and aqua buttons with a shine across the top. Clean, techy and hopeful.
- Vaporwavealso: vaporwave aesthetic
- Ironic 80s and 90s internet nostalgia: pastel pink, lilac and teal, old Windows dialogs, Greek statues, palm trees, Japanese text and wide-spaced lowercase. Dreamy and a bit absurd; use it when the joke is part of the brand.
- Synthwavealso: outrun, retrowave
- A neon 1980s night drive: a striped sunset sun over a glowing magenta grid, deep purple sky, chrome and neon type with glow. Use it for high-energy, retro-gaming or music vibes.
- Pixel artalso: 8-bit, 16-bit, retro game style
- Everything built from visible square pixels, like 8-bit and 16-bit games: a small palette, blocky monospace or bitmap type, stepped corners and hard shadows. Use it for games, dev tools and playful retro tech.
- Windows 95 stylealso: retro OS, 90s UI, Win95
- Grey windows with bevelled 3D edges, a navy title bar, a teal desktop and system fonts. Instantly reads as 'old computer'; use it for retro humour, nostalgia or to make something feel hand-built.
- 70s retroalso: retro design, groovy
- Warm 1970s colour (orange, mustard, brown, cream), rainbow stripes that curve around corners, rounded fat serifs like Cooper Black and soft pill shapes. Feels cosy, analogue and human.
- Art Decoalso: Art Deco design, 1920s style
- 1920s glamour: black and gold, symmetrical geometry, sunbursts and fans, stepped double borders and tall, high-contrast capitals with wide spacing. Use it for luxury, events and anything that should feel like a premiere.
Layout
- Bento gridalso: bento box layout, bento UI
- Content split into rounded tiles of different sizes that lock together in one grid, like a Japanese bento box. Each tile holds one idea: a headline, a stat, a picture. Apple's feature pages made it the default way to show many features at once.
- Minimalismalso: minimalist design, minimal design
- Only what's needed: lots of white space, one typeface, few colours, no decoration, and everything that can go has gone (here the icon and photo). Calm and premium; it puts all the weight on the words.
- Maximalismalso: maximalist design, more is more
- More is more: clashing patterns, many colours, several typefaces, layered shapes and stickers, every space filled. The opposite of minimalism; use it when the goal is personality and stopping the scroll.
- Editorial designalso: magazine layout, editorial layout
- Laid out like a printed magazine: a big photo, an elegant serif headline, columns of body text, rules, a pull-quote number and a quiet text link. Use it for storytelling, case studies and anything that should feel considered.
- Isometric designalso: isometric illustration, isometric view
- Flat shapes drawn in 3D at fixed 30° angles, with no perspective, so every edge stays parallel and nothing shrinks with distance. Common for tech illustrations, diagrams and maps; it shows depth while staying neat and graphic.
Texture and colour
- Grain texturealso: film grain, grainy gradient
- A fine speckle over the whole design, like film or print, that takes the digital smoothness off flat colour and gradients. Add it to almost any style for warmth and an analogue, tactile finish; it also hides gradient banding.
- Noise texturealso: noise gradient, noisy gradient, dithered gradient
- Coarse, clearly visible noise mixed into a gradient so it looks sandy or sprayed rather than smooth. Stronger and more of a feature than grain; popular in posters, album covers and bold hero backgrounds.
- Duotonealso: duotone effect, two-tone
- An image (or a whole design) reduced to two colours: shadows in one, highlights in the other. Spotify made it famous. Use it to tie mismatched photos to a brand palette or give a flat, graphic, poster feel.
- Halftonealso: halftone pattern, Ben-Day dots, pop art dots
- Tone made from dots of one ink that grow in dark areas and shrink in light ones, as in newspaper and comic printing. Use it for pop-art, comic or print-zine energy, on photos or as a background pattern.
- Risographalso: riso print, riso
- The look of a riso printer: two or three bright spot inks (fluorescent pink, blue, yellow) overprinting each other, slightly misaligned, with grainy texture on off-white paper. Use it for indie, zine and handmade warmth.
- Aurora gradientalso: aurora background, northern lights gradient
- Soft, blurred ribbons of green, teal and violet glowing on a dark background, like the northern lights. A modern, techy hero backdrop, often slowly moving; pair it with glass or simple white type.
- Mesh gradientalso: gradient mesh, fluid gradient
- Several colours blended from different points so they flow into each other in every direction, not just along one line. Soft, organic and colourful (think Stripe or Apple wallpapers); the step up from a plain two-colour gradient.
- Dark modealso: dark theme, dark UI
- Light text on near-black surfaces, with lighter greys for raised panels instead of shadows and softened, less saturated accents. Easy on the eyes at night and makes colour and video pop; most developer and pro tools default to it.
- Monochromealso: monochromatic, single-colour palette
- One hue in many tints and shades, photo included, with no second colour competing. It looks unified and confident, and makes a brand colour own the frame. Black and white is the strict version.