Flat design

No gradients, bevels, or drop shadows. Depth is faked with color, spacing, and type alone, so everything sits on one plane.

no shadows or bevelsplain 2D lookflat uiMicrosoft Metro lookflat desingsolid colors no gradientsthe opposite of skeuomorphismeverything looks like a sticker on one flat plane

See it

Live demo coming soon

What it is

Flat design throws out every trick that fakes physical depth: no gradients, no bevels, no inner glows, no drop shadows, no textures pretending to be materials. What's left is solid color, clean shape, crisp type, and spacing. The idea predates the phones by decades in print, but the milestones for mainstream digital flat design were Microsoft's Metro language on Windows Phone (2010) and iOS 7 (2013), which scraped the leather and felt off Apple's own apps and pulled the rest of the industry along with it.

Reach for it when you need speed and scale: flat work is usually drawn as vectors, so it stays tiny, recolors for a theme with a fill swap, survives any screen density, and costs almost nothing to produce compared with rendered chrome. That is a property of the vector, not of the flatness: export the same artwork as a PNG and it is as heavy and as stuck in its palette as anything else. Flat is also the honest choice when your interface has no physical metaphor to borrow from.

Gotcha: flat removes the cues that told people what's clickable. Usability research after iOS 7 kept finding the same thing: users hunting for buttons that looked like labels. That's why almost nothing shipping today is truly flat. Material Design and 'flat 2.0' add back a small, rule-governed amount of shadow and elevation purely as affordance, not as decoration.

Ask AI for it

Design this interface in flat design. Solid fills only: no gradients, no bevels, no inner or outer shadows, no textures, no faux-3D highlights. Build hierarchy from a bright, limited palette (one primary, one accent, three neutrals), generous padding, and a bold sans-serif type scale. Use simple two-color geometric icons with a consistent stroke, large flat color blocks for sections, and full-bleed color buttons with white labels. Keep interactive elements obvious through color and size, since there are no shadows doing that job.

You might have meant

skeuomorphismminimalismneobrutalismcorporate memphisinternational typographic style

Go deeper