Flat Design
Also called: Flat UI, Flat 2.0, Metro-style flat
Pure 2D: solid colour blocks, no shadows, no gradients, no borders on cards — just bright flat fills, simple icons and clean type.
Design keywords
Say these words to ask for this style.
Flat Design (the iOS 7 / Windows Metro / "Flat UI" kit era) removed every fake material. Surfaces are solid fills with zero shadow and zero gradient; hierarchy comes from colour blocks, size and whitespace. A palette of 5–6 saturated "flat UI colours" (turquoise, peter-river blue, wisteria, sunflower, pomegranate) is used in big confident blocks with white or midnight text. Icons are simple single-weight glyphs on coloured circles, and buttons are plain rectangles with a 4px radius that simply darken on press.
Best for
- Education and e-learning apps
- Onboarding-heavy consumer products
- Admin templates and simple dashboards
- Info sites that must load fast on low-end phones
Avoid for
- Luxury and premium brands that need depth or materiality
- Dense pro tools where colour blocks overload
- Brands that need a photographic, emotional feel
✓ Do
- Use 5–6 saturated flat colours as full-bleed card and section fills
- Keep elevation at zero: box-shadow none on every surface
- Make touch targets 48px+ and use solid colour for state (hover = darken 14%, pressed = darken 28%)
- Use one simple icon set on solid circles
✕ Don't
- No drop shadows, inner shadows, bevels or gradients
- No textures, blur or glass
- Don’t outline cards — separate them with colour and space
- Don’t mix flat fills with skeuomorphic icons
Not to be confused with
On mobile
Flat is the most touch-friendly style: 48px+ solid buttons, full-width colour cards and a solid-colour tab bar. Press state = darker fill, never a shadow. Costs nothing on low-end phones.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.