Flat Design
扁平化设计
Aliases:扁平化扁平风格扁平化设计没有阴影那种平面设计色块图标风格扁平UIFlat UIFlat Design
What is it
A visual language that strips out all simulation: solid color blocks, simple geometry, no gradients, shadows or textures. Hierarchy comes from color, shape and typography alone. The opposite of skeuomorphism — the interface admits it is a glowing plane and trades decoration for clarity.
Design spec
Typography
Geometric sans at medium weights
Color
Flat fills: blue #1FA2FF, yellow #FFD54F
Border
No outlines — blocks define areas
Shadow
Completely shadowless
Spacing
Small 6px radius, even grid
Motion
Linear 100–150ms colour and opacity transitions, no movement
States
Hover uses a brighter flat fill; focus shows a visible 2px dark solid frame; active uses a deeper fill; disabled drops to 50% opacity; error uses a red flat fill with no shadow
Style in action
See the full page, then try the interactive sceneFull-page preview
Simple & Solid
Strip away decoration. Get to the point.
No gradients · No shadows · Just information
Get started →Large blocks define sections
Small geometric icons
Restrained corner radii
Interactive scene
Loading demo…
✓ When to use
- System products that need cross-platform consistency at low cost
- Icons, infographics and dashboards that must scan instantly
- Small mobile screens where decoration crowds out content
✕ When not to use
- Complex hierarchies where users need depth cues to see what is clickable
- Brands that need warmth, emotion or crafted refinement
- Grey on grey with hairline buttons — weak affordance triggered Flat 2.0
Variants
Metro Tiles
Metro 磁贴
Microsoft Metro — big color tiles, rectangles all the way
Flat UI Colors
Flat UI 撞色
Saturated clash colors on pale surfaces with 1px borders
Flat 2.0
扁平 2.0
Shadows return subtly — the prelude to Material
Implementation
solid-colorborder: 0box-shadow: nonetransition: background-colorDiscipline over technique: solid fills and 1px borders only, box-shadow always none, gradients and textures banned. Hierarchy lives in color area and luminance steps. Keep interactive elements on saturated accents or clear outlines; hover changes background-color only, within 150ms. Maintain separate light and dark palettes instead of inverting.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Implement a flat-design card and button section in the current project. Inspect the existing design tokens and color variables first; map the flat palette into them. Requirements: - Solid fills only — no gradients, shadows or textures - Saturated accents for interactive elements; hover changes background-color only - Hierarchy from color area, luminance and type weight - Dark mode with its own palette, not a naive inversion - Respect prefers-reduced-motion for transitions, under 150ms - No new dependencies Run existing project checks when done and list the modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language built on "less is more": generous whitespace, a restrained monochrome palette and very few type scales let the content speak. All decoration is stripped away; hierarchy is created purely by space, weight and rhythm. Quiet, restrained, content-first.
StylesSimilarA visual language that borrows real-world materials and physical forms for digital controls: leather stitching, wood grain, brushed metal, glass gloss. Buttons look pressable, switches look like levers — highlights, shadows and bevels make "what it looks like" teach "how it works".
StylesSimilarA visual language of objective grids and typography: strict mathematical grids, sans-serif faces, flush-left setting, black and white plus one accent (classically red). Order comes from whitespace and type scale. Decoration is noise; the goal is information read along the shortest path.
StylesSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAffectsA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsAffects