Flat design
Also called flat UI or flat style
A design style that uses solid colors, simple shapes, and clean type, with no gradients, textures, or realistic shadows.
const APPS = [
{ name: 'Mail', letter: 'M', fill: 'bg-blue-600' },
{ name: 'Notes', letter: 'N', fill: 'bg-emerald-600' },
{ name: 'Photos', letter: 'P', fill: 'bg-rose-600' },
{ name: 'Calendar', letter: 'C', fill: 'bg-violet-600' }
];
export function FlatLauncher() {
return (
<div className='flex flex-col items-start gap-8'>
<ul className='flex gap-5'>
{APPS.map((app) => (
<li
key={app.name}
className='flex flex-col items-center gap-2 text-xs font-semibold'
>
{/* Solid fill and a simple glyph: no gradient, texture, or shadow. */}
<span
className={`grid size-14 place-items-center rounded-xl text-2xl text-white ${app.fill}`}
>
{app.letter}
</span>
{app.name}
</li>
))}
</ul>
{/* Interactivity shows through color: a darker fill and a focus ring. */}
<button
type='button'
className='rounded-xl bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600'
>
Open Mail
</button>
</div>
);
}Restyle the app icons and buttons in flat design: solid fills from a four-color palette, white glyphs, 12px radius, no gradients or shadows, and 600-weight labels. Show interactivity with a 10% darker fill on hover and a 2px focus ring.
Paste into Layerwise or any AI coding tool.
What is Flat design?
Flat design strips an interface down to color, shape, and type. Buttons are solid blocks, icons are simple glyphs, and hierarchy comes from color, size, and spacing. Microsoft’s Metro design language and Apple’s iOS 7 redesign in 2013 made it mainstream.
It loads fast, scales cleanly to any screen size, and keeps attention on content, which is why most modern apps start from it. Material Design and many current interfaces add a little depth back, a variation sometimes called flat 2.0, so people can still tell what is clickable.
The main pitfall is lost affordance: when everything is a flat rectangle, buttons can look like labels. Keep strong color for actions, consistent hover and focus states, and a clear difference between interactive and static elements.
Often confused with
- Neo-brutalism
- Neo-brutalism also uses flat colors, but adds thick borders and hard offset shadows on purpose.
Related terms
All termsSkeuomorphism
A design style where digital controls imitate real objects and materials, such as metal knobs, leather, paper, and physical switches.
Neo-brutalism
A bold UI style with thick black borders, hard offset shadows, flat bright colors, and chunky type that looks raw on purpose.
Accent color
The one highlight color an interface uses for actions and selected states, and the CSS property that tints native form controls.
Affordance
The visual cues that tell people what they can do with an element, like a raised button that looks pressable or a grip that says "drag me".
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.