Surface
Solid color fills
Each surface uses a direct color without texture or gloss.
SkillCodexOpen favorites and history
Terminology classification · 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.
What the style requires, what usually comes with it, what can change without leaving it, and what betrays it.
Decisive difference with the closest neighbor
Choose the intent that matches your work, then copy this static brief into your agent.
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.
Preserve structure and progressively remove textures, material gradients, bevels, and realistic shadows. Replace every removed depth cue with a clear difference in color, spacing, or typography.
Repair affordances that became ambiguous after flattening. Restore visible borders, labels, states, and focus without reintroducing imitation material.
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.
Implement correctly
# 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. ## When not to use - 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. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
Try next
# Audit Flat Design on the real surface ## Objective Check that Flat Design remains consistent, accessible, and measured on the components that actually use it. ## Checks - Compare interactive states and fallbacks. - Check contrast, focus, and reduced motion. - Report visual effects that weaken hierarchy or performance. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
sha256:937ebdbc8054eac2c752c5eec00a31dfacff9c54b61b7fcb43ee78e49a53b997
Diagnose a problem
# Debug Flat Design in your agent ## Observed symptom [DESCRIBE THE SYMPTOM HERE] ## 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. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
Try next
# Prevent Flat Design drift ## Objective Turn the visual fix into a reusable rule and focused check without freezing the whole interface. ## Checks - Isolate the responsible tokens or variants. - Add focused evidence for the affected states. - Compare nearby styles before widening the rule. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
sha256:e29f8d1b2659abb19eecfda027f2d49f016db0dc7a1c47fe614e35092f632887
Pack digest: sha256:426b195ac7d0a373c872c694dfaf9cdf14077519394093517611ab9afe1b66af
Audience measurement
With your consent, Google Analytics and aggregate first-party counters measure site usage to help us improve it. These counters contain no search text, candidate, session identifier, or event identifier. You can change your choice anytime via “Cookies” in the footer.