All interface styles
System & typographic
Free

Flat UI

Solid fills, no shadows and no simulated material: hierarchy comes from colour, size and spacing alone.

Also called: flat design, vector UI, flat 2.0, no-chrome

Flat UI specimen

There is not a single shadow in this specimen. Compare the card against the page: the separation is a fill step, and the selected chip is a fill inversion plus a check, because flat has nothing else to spend.

Every style in this collection renders the same markup — one navigation row, one headline and action, one labelled input, a selected and an unselected control, a card with a status and a data row, and a secondary action. Colour and type come from the active design kit; the style decides the rendering.

What you see

The perceptual fingerprint, in the order you notice it.

  • Surfaces separated by fill colour rather than by shadow or border
  • Fully flat controls — a button is a coloured rectangle with a label
  • Moderate, consistent radii applied to everything at the same value
  • Generous whitespace doing the grouping that dividers would do elsewhere
  • Icons as single-weight vector glyphs, no gloss and no depth

Best for

  • Products that must read the same on every screen and every browser
  • Teams shipping fast — nothing here needs asset work or a shadow scale
  • Marketing and app surfaces that share one component set

Avoid when

  • Elevation genuinely carries meaning — flat has no vocabulary for 'above'
  • Dense screens with many adjacent surfaces, where fill alone stops distinguishing them
  • The brand needs to feel crafted or premium; flat reads efficient, not made

Accessibility

Where this style tends to fail an audit, and what fixes it.

  • With no borders and no shadows, adjacent surfaces need a 3:1 fill difference or the boundary is invisible to low-vision users.
  • Flat's classic failure is the 'clickable?' problem: a control needs a second affordance — a label verb, an icon, or a persistent underline — not just a fill.
  • Focus must be an outline with an offset, since there is no elevation change to fall back on.

Built for

The site archetypes this render grammar suits. Each opens the catalog on that lane.

Matching design kits

A style is a render grammar. A design kit supplies the colour, type and personality it paints.

Depth removed entirely — solid fills, crisp vector shapes, bright flat color, no shadows or gradients. The post-skeuomorphic baseline.

Implementation bundle

What an agent needs in order to actually build Flat UI on top of your design kit — surface rules, per-component behaviour, responsive behaviour, fallbacks and QA.

Surface rules

The declarations that make the render grammar, stated as CSS.

  • Zero `box-shadow` anywhere. Surfaces separate by fill: page `--background`, card `--card`, raised region `--muted`.
  • One radius token applied everywhere (`--radius: 6px` is the safe centre); flat has no reason for per-component radii.
  • Borders only where a fill step is impossible — `1px solid hsl(var(--border))`, never decorative.
  • Fills are opaque and unmixed: `--primary` for the one primary action, `--secondary` for the rest, `--muted` for passive regions.
  • Type carries the hierarchy: a 1.25–1.33 modular scale with weight steps at 400/500/600 and nothing above 700.

Component rules

Nav, action, input, selection, card and status, one rule each.

  • Nav: flat bar in `--background`, active item marked by a 2px `--primary` underline plus a weight step, never by a background pill alone.
  • Primary action: solid `--primary` with `--primary-foreground` text; hover darkens the fill by one tonal step, no lift.
  • Inputs: `--background` fill with a `--border` outline and a visible label above; on focus the border becomes `--ring` at 2px.
  • Selected chip: `--primary` fill, `--primary-foreground` text, leading check glyph. Unselected: `--muted` fill, `--foreground` text, no glyph.
  • Cards are `--card` fill with a 1px `--border` only when they sit on `--card`-adjacent surfaces; on `--background` the fill step is enough.
  • Status is a labelled pill with a fill from the semantic token plus its text label — never a bare coloured dot.

Responsive rules

What has to change as the viewport narrows for the style to survive.

  • Spacing scale steps down one notch below 640px (24px → 16px section rhythm); flat depends on whitespace, so it must not collapse to zero.
  • The nav underline becomes a full-width bottom rule on the active item when the bar wraps to a second line.
  • Cards go full width with the fill step preserved — do not switch to borders on mobile, that changes the language mid-page.

Fallbacks

The degraded paths: unsupported effects, weak shadows, reduced motion.

  • Forced-colors mode: add `border: 1px solid` transparent on interactive surfaces so system colours can paint an outline where the fill is dropped.
  • If two adjacent fills fall under a 3:1 difference in the active kit, promote the boundary to a `--border` rule rather than tinting the fill.
  • `prefers-reduced-motion`: nothing to do — flat has no motion vocabulary by design.

QA checks

What to verify before shipping an interface in this style.

  • Screenshot in greyscale: every surface boundary and every selected state is still distinguishable.
  • Every adjacent surface pair clears 3:1, or has a border.
  • Each control reads as interactive without hovering it — verb label, icon, or underline present.
  • No `box-shadow` in the computed styles of any component.

Agent tags

The vocabulary a coding agent can match this style on.

  • no-shadow
  • solid-fill
  • tonal-separation
  • vector-icon
  • system-ui