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.
WANDER / SHSAT · 08.243 stops
DAY PLAN / SHANGHAILeave Saturday
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
- Responsive website
- Illustration and icon system
- A design system that needs broad reuse
When NOT to use it
- Remove every boundary around controls
- Use color alone to show interaction
- Make all surfaces visually equal
- Add flat icons that users cannot recognize
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
PLAN A DAYSaturday
in Shanghai24 AUG
in Shanghai24 AUG
3 stops
4.8 km walk
4.8 km walk
09:30
Wukang Road12:15
Anfu Road16:00
West Bank
Wukang Road12:15
Anfu Road16:00
West Bank
Mobile interface
Marketing illustration
Design system
Further reading