F · 6 / 26

F — Flat design

Colour and shape, nothing pretending to be real.

The style

Nothing pretending to be real.

Flat design is older than screens. In 1950s Switzerland the International Typographic Style built posters from a grid, plain sans-serif type and flat fields of colour, and let the layout carry the meaning. Nothing pretended to be paper, leather or glass.

Software came to it late. Microsoft’s Metro design language, grown out of the Zune player and made the face of Windows Phone 7 in 2010, set large type and solid tiles where rivals drew glossy buttons. In 2013 iOS 7 took the stitched leather and green felt out of Apple’s apps, and flat became the default. A year later Google’s Material Design put a little depth back: flat sheets of colour, stacked, with shadows to show what sits above what.

The method is subtraction. No bevels, no gradients, no shadows, so shape, colour and type do all the work and have to be chosen well. A button must look pressable from its shape and place alone, and bright colours need checking: on yellow or green, white text disappears.

In use

Money, at a glance.

Tally, a budgeting app drawn flat. Pick a month, tap a category to filter, search the list. Every state you see is a change of fill.

OverviewSeptember 2026
Balance
€10,922.80
+€2,536.00 this month
In
€3,400.00
Salary, on the 1st
Out
€864.00
74% of a €1,170.00 budget

Spending by category

Spent€864.00

Budgets

  • Groceries€103.60 left€296.40 of €400.00
  • TransportOver by €6.60€126.60 of €120.00
  • Eating out€69.40 left€110.60 of €180.00
  • Bills€127.60 left€192.40 of €320.00
  • Fun€12.00 left€138.00 of €150.00

Transactions

17 transactions

  • Concert ticketsSep 30 · Fun−€78.00
  • Pizza nightSep 29 · Eating out−€38.90
  • Bike repairSep 27 · Transport−€22.00
  • Northside MarketSep 26 · Groceries−€102.15
  • Record shopSep 24 · Fun−€36.00
  • Ramen IchiSep 22 · Eating out−€27.40
  • TaxiSep 20 · Transport−€18.60
  • Each colour has one jobA category keeps its colour in the ring, the bars and the list.
  • Shape says what you can pressFilled blocks and edged fields act. Plain text only reads.
  • State is a fill, not a shadowThe chosen month and category turn ink. Nothing lifts.
  • Words beside every colourOver budget says so in text, with a mark at the limit.
The kit

Thirteen parts, every state.

Each part with its states side by side, then the real thing to try. Hover is a darker fill, focus an ink ring, disabled a quiet mist. No part casts a shadow.

Button

A state is a fill, one step darker; nothing lifts or glowsDisabled drops the fill and the contrast

Text field

Edges at 4.8:1 so the field shows without a shadow

Select

Switch, checkbox, radio

Spending alerts
Round up to savings
Summary email
On adds a tick, not only blue

Slider

Progress

Importing statement64%
68%Holiday fund€1,360 of €2,000
Syncing accounts

Segments and tabs

€864.00 out in September, 34% of it on groceries.

Chosen: an ink fill or a 4px bar, and bold

List rows

Default account
Chosen row: a blue edge and a tick

Card and loading

Holiday fund€150 a month, on the 2nd
€1,360 savedof €2,000 · 68%
Loading the next goal
Loading: flat blocks where the content will go

Toast

Transaction archived
Ink, not a colour, so any status fits on it

Modal

A flat scrim, not a blur; the dialog is plain white

Steps

  1. Done: Account
  2. 2Budget
  3. 3Goals
  4. 4Done
Done turns green with a tick; now is blue and bold

Badges and avatars

  • Paid
  • Due soon
  • Overdue
  • Draft
33 new alerts
  • MK, online
  • JS, away
  • AR, online
Every tag carries a word and a mark, not only a colour
Signature

Pull it apart.

A flat icon is a few plain shapes on a grid, and nothing else. Drag to take one to pieces, then switch on the long shadow that every flat icon wore in 2013.

Home is one triangle, one rectangle and one rectangle cut out, on a 24-unit grid. Nothing else.

Long shadow, the 2013 fad

Around 2013, flat icons grew a long shadow at 45°. Switch it on to see the fad, and how much it adds to read.

Tokens

Six fills and a rule.

The whole system in a page: colours with the ink that reads on them, one typeface, state fills, radii and spacing. Elevation is not a token here.

Colour
  • --blue#2d6cdfPrimary actions. White text, 4.9:1
  • --yellow#f2b632Highlights. Ink text, 9.5:1
  • --red#e8553eAlerts and errors. Ink text, 4.8:1
  • --green#2fb380Success and income. Ink text, 6.5:1
  • --ink#161b26Text, 17.2:1 on white
  • --ink-2#4d5566Labels and notes, 7.5:1
  • --edge#6b7385Field edges, 4.8:1
  • --mist#eef1f6Wells, tracks and quiet panels
  • --line#dfe3eaCard borders and rules
  • --red-ink#c23a24Error text on white, 5.4:1
  • --green-ink#1e7a56Income text on white, 5.3:1
  • --blue-ink#1f58c4Links, and blue on hover, 6.5:1
Contrast

White on blue · 4.9:1Passes AA. Ink would be 3.6:1.

Typeface · Rubik
  • 96pxDisplayBold 700, shown at 44px
  • 60pxHeadingBold 700, shown at 44px
  • 22pxLeadLight 300
  • 18pxBodyRegular 400
  • 13pxLabelMedium 500
States
  • Default#2d6cdf
  • Hover#1f58c4
  • Pressed#1a4fb0
  • Disabled#eef1f6

Elevation: none. A state is a fill one step darker, and the change is instant.

Radius
  • 6px
  • 10px
  • 16px
  • 24px
  • Pill
Spacing
  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
:root {
  --blue: #2d6cdf;
  --yellow: #f2b632;
  --red: #e8553e;
  --green: #2fb380;
  --ink: #161b26;
  --ink-2: #4d5566;
  --edge: #6b7385;
  --mist: #eef1f6;
  --line: #dfe3ea;
  --red-ink: #c23a24;
  --green-ink: #1e7a56;
  --blue-ink: #1f58c4;
  --surface: #ffffff;

  /* No shadows. A state is a fill, one step darker. */
  --blue-hover: #1f58c4;
  --blue-pressed: #1a4fb0;
  --border: 2px solid var(--line);
  --focus: 3px solid var(--ink);

  --radius-tag: 6px;
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-panel: 24px;
  --radius-pill: 999px;

  --font: 'Rubik', system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --swap: 0s; /* colour changes never fade */
}

Do

  1. Let shape, colour and type carry everything. If it needs a shadow to read, redraw it.
  2. Give each colour one job and keep it there, page after page.
  3. Check every fill for contrast. Bright colours usually want dark ink, not white.
  4. Label icons and make buttons look like buttons by shape and place, not colour alone.

Don’t

  • White on a bright fill

    White on yellow is 1.8:1, far under the 4.5:1 that body text needs. Bright fills want dark ink.

  • A word that might be a button

    Bare blue text could be a link or an action, and nobody can tell which. Give every action a shape.

  • Depth smuggled back in

    Long shadows on everything, then gradients, then gloss. Each one is a step back towards the skeuomorphism flat left.

In the wild

Where the style shows up outside this page.

  1. Munich Olympics pictograms

    Otl Aicher · 1972Figures on a strict grid of angles: no depth, no outline, one colour each.

  2. Windows Phone 7

    Microsoft · 2010Metro: live tiles in solid colour, type as the interface.

  3. iOS 7

    Apple · 2013The year leather and felt left the iPhone: thin type, plain fills, hairline icons.

  4. Material Design

    Google · 2014Flat colour on paper-like layers, with shadows kept for meaning only.