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
The same page, ready to useGet started creates a named workspace with a chosen plan and shows the matching result. Features, Pricing, Blog and Log in reach relevant content or a demo identity explanation.
Full-page preview · interact directly
What to look for
- 01Use Flatly’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
- 02Complete the Flatly task, then change inputs or undo and inspect the matching result/state.
- 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.
✓ 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.
Build a complete Flatly page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template. Keep Flatly’s blue hero, yellow actions and yellow/white/teal feature cards: 2/5 copy, 3/5 geometry and three cards below, not a new six-color card experiment. Preserve the renderer’s circle/triangle/rectangle and local shadows rather than flattening existing art with global no-gradient/no-shadow bans. Continue with the existing workspace form and result list. Reuse current preview.tokens: background #1FA2FF; foreground #FFFFFF; accent #FFD54F / #333333; card rgba(255,255,255,.16); border rgba(255,255,255,.35); radius 8px; font 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif; card shadow none. Use generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows. Full-page operations: Get started creates a named workspace with a chosen plan and shows the matching result. Features, Pricing, Blog and Log in reach relevant content or a demo identity explanation. Share one renderer between static covers, the detail experience and /style-scenes/flat-design/ (English /en/style-scenes/flat-design/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts. Interaction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves. Provide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion. Add no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results. 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.
StylesSimilar
A 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