Flat Design
No depth or shadows—just solid colors and simple shapes.
Scroll sideways to explore the full example
Leave Saturday
for the streets.
A walking route, three good things.
View directions →- 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 interfaceOrder exampleConversion exampleAlarm example
- Responsive websiteUse simplified graphics first on small screens and slower connections.
- Illustration and icon systemBrand colorPurposeful use of brand color can support grouping and recognition.
- A design system that needs broad reuseStart with solid color blocks and generous whitespace.→Verify structure
When NOT to use it
- Remove every boundary around controlsWelcome back
View details · Submit order · Sign outText and interactive controls are hard to tell apart. - Use color alone to show interactionNavigationBodyButton
- Make all surfaces visually equalThe dialog and cards overlap, making it hard to tell which is in front.
- Add flat icons that users cannot recognizeA large blank area + one line of small textThe whitespace does not create a clear reading hierarchy.
Solid tiles and oversized typography made flat design a system-level language several years before Apple's shift.
Apple removed most skeuomorphic detail, and flat interfaces became the new mainstream default.
Google added elevation and purposeful motion to flat surfaces, restoring some of the hierarchy that pure flat design had lost.
Light shadows and subtle gradients returned after teams learned that completely flat controls were often difficult to recognize.
Flat design system, solid color blocks, simple geometric icons, minimal shadows, strong typography, generous whitespace, clear control boundaries and accessible interaction states
Scroll sideways to explore the full example
in Shanghai24 AUG
4.8 km walk
Wukang Road12:15
Anfu Road16:00
West Bank
Scroll sideways to explore the full example
Scroll sideways to explore the full example
Scroll sideways to explore the full example
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗