Surface
Solid color fills
Each surface uses a direct color without texture or gloss.
Established movement
Simple flat fills, geometric icons, and no simulated material.
Also called: flat UI, flat 2.0
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.
A credible example should make these signals 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.
Choose the intent that matches the actual work. Each brief preserves the style signals and safeguards.
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.