Solid colours
Bright, flat fills from a set palette, with no gradients or textures.
The great clean-up of 2013. Textures, gloss and fake leather were thrown out, and interfaces turned into solid colours, simple icons and long diagonal shadows.
Open the kit Copy promptFlat design removed the imitation of real materials from interfaces. Everything became simple shapes and solid colour, focused on clarity and speed.
Bright, flat fills from a set palette, with no gradients or textures.
A signature trick: a diagonal shadow stretches far from icons and letters.
Pictograms reduced to basic outlines and shapes.
Friendly sans-serifs at clear sizes replace embossed, textured labels.
Flat design was a reaction against years of glossy, textured interfaces.
An early portable media player interface uses big type and flat colour, pointing the way.
A mobile operating system launches a tile-based interface built on typography and flat colour.
Desktop operating systems adopt full-screen flat tiles.
Apple removes textures and gloss from its mobile interface, and flat becomes the industry default.
Material Design brings back subtle shadows and layers, often called flat 2.0.
Flat motion is clean and mechanical. Tiles flip to reveal content, like the live tiles of early flat phones.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Utility and productivity apps used flat icons and colour-coded sections.
Flat illustration and icons defined a decade of product websites.
Colour-coded flat cards made data easy to scan.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
A bright set of flat colours that became almost universal in the early 2010s, grounded by midnight blue. Tap a swatch to copy its hex value.
:root{
--turquoise: #1ABC9C;
--blue: #3498DB;
--amethyst: #9B59B6;
--sunflower: #F1C40F;
--carrot: #E67E22;
--alizarin: #E74C3C;
--midnight: #2C3E50;
--clouds: #ECF0F1;
}The typical pairing of the era: a geometric sans for headings and a humanist sans for reading.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Montserrat",system-ui,sans-serif;
--font-b: "Open Sans",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(39px, 9vw, 76px);
--fs-1: 39.1px; --fs-2: 31.2px;
--fs-3: 25.0px; --fs-4: 20.0px;
--fs-body: 16px; --fs-sm: 12.8px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 800;
letter-spacing: -.01em;
text-transform: none;
line-height: 1.1;
}
/* fonts: Montserrat and Open Sans, the typical pairing of the era */A tidy 12-column grid with colour-coded blocks. Everything aligns, nothing overlaps.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Small radius, no borders on surfaces and no shadows, except a thin darker edge under buttons.
:root {
--radius: 4px;
--radius-sm: 3px;
--bw: 0px;
--shadow: none;
--shadow-sm: none;
--gap: 24px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Flat Design kit · Anti-Boring */
:root{
--bg:#ECF0F1;
--surface:#FFFFFF;
--surface2:#DDE3E6;
--fg:#2C3E50;
--muted:#5D6D7E;
--accent:#1ABC9C;
--accent-fg:#FFFFFF;
--accent2:#3498DB;
--accent2-fg:#FFFFFF;
--border:#BDC3C7;
--bw:0px;
--radius:4px;
--radius-sm:3px;
--shadow:none;
--shadow-sm:none;
--font-d:"Montserrat",system-ui,sans-serif;
--font-b:"Open Sans",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:800;
--h-track:-.01em;
--h-case:none;
--h-style:normal;
--h-lh:1.1;
--gap:24px;
--pad:24px;
--focus:rgba(26,188,156,.4);
--ok:#27AE60;
--warn:#D35400;
--danger:#C0392B;
--info:#2980B9;
--field-bg:#FFFFFF;
--field-shadow:none;
--media:linear-gradient(135deg,#E67E22 50%,#D35400 50%);
--code-bg:#2C3E50;
--code-fg:#ECF0F1;
--btn-case:none;
--btn-track:0;
--btn-weight:600;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:12.8px;
--fs-body:16px;
--fs-4:20.0px;
--fs-3:25.0px;
--fs-2:31.2px;
--fs-1:39.1px;
--fs-d:clamp(39px, 9vw, 76px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{box-shadow:0 4px 0 rgba(0,0,0,.18)}
.btn:hover{transform:none;filter:brightness(1.07)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.btn-ghost{box-shadow:none;border:2px solid var(--fg)}
.card-media{overflow:hidden}
.badge{border:0;background:#E74C3C;color:#fff;border-radius:3px}
.input,.select,.textarea{border:2px solid var(--border)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);box-shadow:none}
.check,.radio,.switch{border:2px solid var(--border)}
.switch::before{background:#fff}
.alert{border:0;border-left:0;background:var(--c);color:#fff}
.alert b{color:#fff}
.progress{border:0;height:.6em}
.tabs{border-bottom:2px solid var(--border)}
.tab[aria-selected="true"]{border-bottom-color:var(--accent)}
.pager a{border:0;background:var(--surface2)}
.table-wrap{border:0}
.table th{background:var(--fg);color:var(--bg)}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#2C3E50;
--surface:#34495E;
--surface2:#2F4356;
--fg:#ECF0F1;
--muted:#BDC3C7;
--border:#4A6278;
--field-bg:#34495E;
--code-bg:#1C2833;
}
Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a simple task manager app in an authentic Flat Design style.
Palette: Turquoise #1ABC9C, Blue #3498DB, Amethyst #9B59B6, Sunflower #F1C40F, Carrot #E67E22, Alizarin #E74C3C, Midnight #2C3E50, Clouds #ECF0F1.
Typography: Montserrat 800 for headings, Open Sans for body.
Layout: Two-column hero: headline and intro left, a 3 by 2 grid of square flat-colour icon tiles on the right, each icon with a long diagonal shadow.
Signature details: Flat UI palette (turquoise, blue, amethyst, sunflower, carrot, alizarin on midnight and clouds), no gradients or textures, long shadows made from stacked text-shadows.
Components: Solid buttons with a thin darker bottom edge, flat cards, solid-colour alerts with white text, flat tabs with coloured underline.
Motion: Tiles flipping on the X axis in a staggered wave.
Avoid: gradients, textures, gloss, heavy drop shadows, white text on light colours.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Flat buttons can look like labels. Give actions strong colour and clear shape.
Without depth, hierarchy has to come from colour and size.
White text on yellow or turquoise can fail contrast. Check every pair.
Everyone used the same icon sets. Draw icons that fit your content.