Flat Design

You might say

No depth or shadows—just solid colors and simple shapes.

Use simple shapes, clear color, and minimal surface decorationFlat design removes realistic texture and depth in favor of icons, type, color blocks, and direct layout. It scales well and keeps visual noise low, but interactive elements still need recognizable shapes, contrast, and states. Pure flatness that hides what is clickable is not useful simplicity.

Scroll sideways to explore the full example

WANDER / SHSAT · 08.243 stops
DAY PLAN / SHANGHAI

Leave Saturday
for the streets.

A walking route, three good things.

View directions →
09:30Wukang Road
12:15Anfu Road
16:00West Coast
Take a walk
Lunch
Exhibition
Design Principles
  • Use simple shapes with clear roles
  • Create hierarchy through color, type, and spacing
  • Keep icons consistent and understandable
  • Make interactive elements visibly interactive
  • Use light depth cues when they improve usability
  • Build states that do not depend on texture

When to use it

  • Product interface
    Order exampleConversion exampleAlarm example
  • Responsive website
    Use simplified graphics first on small screens and slower connections.
  • Illustration and icon system
    Brand colorPurposeful use of brand color can support grouping and recognition.
  • A design system that needs broad reuse
    Start with solid color blocks and generous whitespace.→Verify structure

When NOT to use it

  • Remove every boundary around controls
    Welcome back
    View details · Submit order · Sign out    Text and interactive controls are hard to tell apart.
  • Use color alone to show interaction
    NavigationBodyButton
  • Make all surfaces visually equal
    The dialog and cards overlap, making it hard to tell which is in front.
  • Add flat icons that users cannot recognize
    A large blank area + one line of small textThe whitespace does not create a clear reading hierarchy.
History
2010
Windows Phone introduces Metro

Solid tiles and oversized typography made flat design a system-level language several years before Apple's shift.

2013
iOS 7 moves fully into flat design

Apple removed most skeuomorphic detail, and flat interfaces became the new mainstream default.

2014
Material Design adds layers back

Google added elevation and purposeful motion to flat surfaces, restoring some of the hierarchy that pure flat design had lost.

2016–present
Flat 2.0 becomes the practical default

Light shadows and subtle gradients returned after teams learned that completely flat controls were often difficult to recognize.

Anatomy
Solid color block Square or subtly rounded corners No shadows or gradients ◤ Lightweight type + open space
Use solid color blocks to separate areas and reinforce brand recognition; match saturation to the content and text contrast.
Choose square or subtly rounded corners consistently for the brand, component size, and touch target.
Avoid decorative shadows and gradients unless they clarify hierarchy or state.
Reduce icons to simple, recognizable geometric forms.
Use type scale, weight, and whitespace to establish hierarchy without overloading the page with detail.
AI Prompt

Flat design system, solid color blocks, simple geometric icons, minimal shadows, strong typography, generous whitespace, clear control boundaries and accessible interaction states

Typical use cases
Web app

Scroll sideways to explore the full example

PLAN A DAYSaturday
in Shanghai24 AUG
3 stops
4.8 km walk
09:30
Wukang Road12:15
Anfu Road16:00
West Bank
Mobile interface

Scroll sideways to explore the full example

Shenzhen
23°
Sunny, the highest is 26° and the lowest is 19°
Now23°14 hours25°15 hours26°16 hours24°17 hours22°
Marketing illustration

Scroll sideways to explore the full example

Data DashboardOverviewOrdersUser
Example
Today's order
Example
Conversion rate
Example
Pending alarm
Example
New user
#1042 Website refresh final paymentCompleted
#1041 Mini Program HomepageIn Progress
Design system

Scroll sideways to explore the full example

Block StudioProductsCase StudiesContact
Turn ideas into products
Build a polished site with clean shapes, solid colors, and generous white space.
Start for free View case studies
Further reading
Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for UsersNN/g ↗