Surface
Solid color fills
Each surface uses a direct color without texture or gloss.
SkillCodexOpen favorites and history
Established movement
Simple flat fills, geometric icons, and no simulated material.
Also called: flat UI
Definition and scope
Flat Design renders the interface in two dimensions. Color, size, space, and typography build hierarchy without texture, gloss, bevel, or imitation material.
Scope: Flat governs how surfaces are rendered. It does not guarantee a small amount of content. An interface can be flat and very dense.
The four defining signals should remain visible without relying on the style name.
Surface
Each surface uses a direct color without texture or gloss.
Depth
Bevels, realistic shadows, and decorative volume are absent.
Geometry
Icons and shapes reduce to immediately recognizable geometry.
Typography
Weight, size, and color replace depth to organize information.
Decisive difference with the closest neighbor
Understand → Recognize → Choose → Compare
Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.
implementation
# Implement Flat Design in your agent ## Objective Create this interface with Flat Design using solid fills, hierarchy based on size, space, and typography, and simple geometric icons. Use no texture, gloss, or decorative volume. ## Prerequisites - Inspect existing components, tokens, and brand constraints. - Confirm that this style fits the surface and content. - Preserve existing structure, semantics, and interactions. ## Behavior and surfaces - Solid color fills — Each surface uses a direct color without texture or gloss. - No simulated depth — Bevels, realistic shadows, and decorative volume are absent. - Simple glyphs — Icons and shapes reduce to immediately recognizable geometry. - Typographic hierarchy — Weight, size, and color replace depth to organize information. ## States - Cover existing default, hover, focus, active, disabled, loading, and error states. - Provide a static state when reduced motion is requested. ## Accessibility - Do not remove control boundaries along with decorative shadows. - Pair color with a label, icon, or programmatic state. - Preserve clearly distinct focus and hover states. ## Non-goals - Removing all interaction cues in the name of visual simplicity. - Confusing lack of volume with lack of hierarchy. ## Acceptance criteria - An application that must remain clear, light, and adaptable to several densities. - A design system where simple tokens should carry hierarchy.
sha256:6deaf2ce0929176c20d1c8d66d77011f7605301d2c97990411812e910584364d
debugging
# Debug Flat Design in your agent ## Observed symptom [DÉCRIS ICI LE SYMPTÔME] ## Observable checks - Compare the surface with the documented visual signals. - Verify contrast, focus, reduced motion, and fallback behavior. - Isolate the visual layer without changing functional structure. ## Possible causes - The style hides hierarchy or reduces contrast. - The effect is applied to too many surfaces or depends on an unavailable API. - An interactive state is no longer perceivable. ## Bounded corrections Repair affordances that became ambiguous after flattening. Restore visible borders, labels, states, and focus without reintroducing imitation material. ## Final verification - Do not remove control boundaries along with decorative shadows. - Pair color with a label, icon, or programmatic state. - Preserve clearly distinct focus and hover states.
sha256:d12c7d7bb79c716d36a7788d365f97c6d7107858587fcfc39eabc45bea0dfaff
Pack digest: sha256:2b9e6375c6e65242d439d1e47f863d619c167cf23f4bffe33c717e4863844afb