Flat

Applying a Flat visual direction

You are being asked to apply a Flat visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.

What “Flat” means here

Flat design removes every attempt to imitate physical material. Nothing has a shadow, a bevel, a gradient, or a texture suggesting it exists in three dimensions. What remains is solid color, simple geometry, and clear type — and color takes over the structural job that depth used to do. A region is distinguishable because it is a different color, not because it appears raised.

Flat is not the same as minimal, and conflating them produces a worse version of both. A minimal interface reduces how much is on screen and restricts color to a single accent. Flat can be extremely colorful — several saturated colors distinguishing regions, states, and categories is normal and desirable. What it removes is the illusion of depth, not the quantity of material.

The style has one well-documented failure, and the correction is not optional. When everything is flat, buttons can stop looking like buttons: a piece of colored text and a clickable control become visually identical. The fix is straightforward — every interactive element gets a fill or an outline with real contrast against what surrounds it — and applying it is what separates flat design that works from the version that frustrated people when the style first spread.

Recommendations

• Remove all shadows, gradients, bevels, and textures, including the subtle ones a component library may add by default. Check the computed styles rather than trusting the design file.
• Let color do the structural work. Give each major region, category, or state its own solid color, and build a palette of at least three saturated colors so the system has range.
• Draw icons as flat geometry in one or two tones. No gradient fills, no drop shadows, no faux depth in the icon.
• Separate regions with a color change or a thin line, never with a shadow. If two adjacent regions are the same color, they are one region.
• Give every control a fill or an outline with a contrast ratio of at least 3:1 against its immediate background. This is the rule that keeps controls findable without depth.
• Express state through color and opacity rather than elevation. Hover changes the fill; it does not lift the element.
• Use a clean sans-serif with no effects on the text itself — no shadows, no outlines, no gradient fills.

Avoid

• Any shadow, including a barely visible one inherited from a UI library default.
• Gradients used to add “just a little” depth, which is the most common way this style erodes.
• Icons with gradients, shadows, or dimensional shading.
• Regions separated by elevation rather than by color.
• Text-only controls with no fill or outline, indistinguishable from surrounding copy.
• Hover or active states that raise an element rather than changing its color.

How to check your own work

Before considering the result finished, look at it and ask:

• Search the computed styles for any box-shadow, text-shadow, or gradient. Every hit is a violation, including the ones you did not write.
• Ask someone to point at everything on the screen they believe is clickable. If they miss something or point at something that is not, the controls need stronger fills or outlines.
• How many saturated colors are actually doing structural work? If the answer is one, this is closer to a minimal interface than a flat one, and either the palette should grow or the direction should change.
• Do the icons still look flat when you enlarge them? Dimensional shading tends to hide at small sizes.
• Hover over a control. Does anything change other than color or opacity? If the element moves or lifts, that is depth returning.

Flat — Specification

Definition

Flat is a web-interface design style that eliminates every simulation of physical depth — shadow, gradient, bevel, and texture — and transfers the structural work of separation onto solid color, simple geometry, and clear typography. It is distinguished from reductive styles by its palette: flat interfaces are frequently colorful, because color is the mechanism that replaces depth.

Core principles

• No simulated depth. Nothing imitates elevation, material, or light.
• Color is structure. Regions, categories, and states are distinguished chromatically rather than spatially.
• Geometry over rendering. Icons and shapes are drawn as flat forms, not shaded objects.
• Controls announce themselves without relief. Interactivity is carried by fill and outline contrast.
• State changes are chromatic. Hover and active alter color or opacity, never height.

Visual characteristics

• Solid color regions with no gradient or texture anywhere.
• A palette of several saturated colors distinguishing regions and states.
• Two-tone geometric icons without shading.
• Boundaries formed by color change or a thin line.
• Filled or outlined controls that read as controls at a glance.
• Clean sans-serif type with no applied effects.

Rules

1. No simulated depth. The interface contains no device that imitates elevation. Acceptance criterion: Inspecting computed CSS across the page finds no box-shadow, no text-shadow, and no gradient background-image on any element.

2. Color forms the boundary. Separation between regions is chromatic or linear. Acceptance criterion: Each boundary between adjacent regions is produced by a background-color change or a border of 1–2px; no boundary is produced by a shadow.

3. Flat iconography. Icons are drawn without dimensional rendering. Acceptance criterion: Every icon uses one or two flat tones and contains no gradient, shadow, or shading.

4. Broad saturated palette. Color carries structural information. Acceptance criterion: At least three distinct colors with a saturation of 40% or greater are used to identify regions, states, or categories.

5. Unaffected typography. Type is rendered plainly. Acceptance criterion: All text uses a sans-serif family and carries no text-shadow, outline, or textured fill.

6. Controls announce themselves without relief. Interactivity is visible at rest. Acceptance criterion: Every interactive control has a fill or border measuring at least 3:1 against its immediate background.

7. Chromatic state changes. States never reintroduce depth. Acceptance criterion: Between resting and hover or active, the computed background-color or opacity changes, and no shadow appears in any state.

Avoid

• Any shadow, including near-invisible defaults inherited from a component library.
• Gradients used to reintroduce a small amount of depth.
• Icons with gradients, shadows, or dimensional shading.
• Regions separated by elevation instead of color.
• Text-only controls with no fill or outline, visually identical to surrounding copy.
• Hover or active states that lift or translate an element.

Acceptance criteria

• Rule 1: No shadow, text-shadow, or gradient exists anywhere on the page.
• Rule 2: Every region boundary is a color change or a 1–2px line.
• Rule 3: All icons use flat tones with no shading.
• Rule 4: At least three saturated colors carry structural meaning.
• Rule 5: All text is sans-serif with no applied effects.
• Rule 6: Every control has a fill or border at 3:1 or better against its background.
• Rule 7: State changes alter color or opacity only, with no shadow in any state.

Blocking failures

• An interactive control is visually indistinguishable from static content, so a visitor cannot tell what can be acted on. This is the historical failure of the style and Rule 6 exists to prevent it.
• Color is the only carrier of a distinction that has no textual or shape equivalent, making that information unavailable to a color-blind reader — a risk this style raises specifically because color does so much structural work.
• Shadows or gradients are present, which contradicts the definition of the style rather than merely weakening it.

These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.

Responsive adaptation guidance

• Region boundaries (Rule 2) may switch from color blocks to thin lines as regions stack into a single column, since adjacent same-color regions would otherwise merge.
• The palette (Rule 4) is evaluated per breakpoint: colors dropped along with the regions they identified do not count against the requirement, provided at least three remain structural.
• Control contrast (Rule 6) is re-verified after reflow, because a control moving onto a differently colored region changes its measured ratio.
• The prohibition on depth (Rules 1 and 7) holds unchanged at every breakpoint; no shadow may be introduced at narrow widths to compensate for lost separation.