Layout
Documented · Source attachedComposition favours ample white space and reduced clutter.
Flat
Design
Zero depth, solid fills, simple icon set, bright but limited palette
Documented
A Metro theme is a dark or light background the user chooses, plus one accent colour.
Documented
In iOS 7 bar buttons are borderless: a key colour marks state and hints at what can be tapped.
Our reading
This page carries no depth cue at all. Zero depth is our purist reading: iOS 7 itself kept translucent, blurred layers.
Build with it
A starting grammar for a website in Flat Design: large bright solid shapes in a grid, prominent system sans, one key colour for state, flat single-colour icons, and, in our purist reading, no depth cue at all.
Web translation marks our choices for the screen. Not specified by the source marks what the sources leave open. Everything else is a rule from the record below.
The same system is in the brief (Build → Brief) and in the structured data.
Colour
ground#F5F6F4ink#1D2A36key#00695Fteal#009688orange#F4762Enavy#22364Ayellow#F7C948
A light or dark ground, one accent.
The rules behind it
- From our catalogue entryBright but limited. From our catalogue entry (colour)
- DocumentedBuild a theme as a dark or light background plus one accent colour. From a documented finding (technique)
- Web translationKeep the other hues for large shapes; let only the key colour mean state. One accent carries state in both canonical systems; more hues on controls would compete with it. From a documented finding (interface), our catalogue entry (colour)
Typography
Departures
The platform’s own sans, large, as signage is.
The rules behind it
- DocumentedMake type a primary interface element, used prominently. From a documented finding (typography)
- DocumentedUse the platform’s system sans-serif. From a documented finding (typography)
- Seen in the workLet type echo airport and metro signage. From the work itself (typography)
- Web translationRank by size and weight: headings jump well above the body. With elevation unavailable, rank comes from colour weight and size alone. From our reading (hierarchy)
Layout
Large shapes in a grid, to the edges.
The rules behind it
- DocumentedFavour ample white space and reduced clutter. From a documented finding (layout)
- DocumentedRun content to the screen edges rather than insetting it in frames. From a documented finding (layout)
- DocumentedArrange large bright shapes in a grid. From a documented finding (layout)
- Web translationTile on six columns with an 8px gutter. A narrow gutter keeps the shapes large and the grid legible, as Metro’s menus did. From a documented finding (layout)
Shape
radius 0 · shadow none · gradient none. The purist end of the family.
The rules behind it
- Graded by our research brief · No source attached · disputedNo simulated depth cue: no shadow, gradient, bevel or texture. From our research brief (interface)
- DocumentedNo elevation, shadow, gradient or bevel: Aesthetary’s purist reading, since iOS 7 kept translucent layers. From a documented finding
- DocumentedKeep icons and UI simple with flat shapes, colour and contrast. From a documented finding (form)
- Web translationSquare corners. The sources do not specify a radius; square tiles keep the large shapes plain, as the room draws them. From a documented finding (layout)
Icons
One colour, tinted by the system.
The rules behind it
- From our catalogue entryUse flat vector icon sets. From our catalogue entry (imagery)
- DocumentedDraw icons as single-colour assets the system tints to the current style. From a documented finding (technique)
- Web translationDraw icons from simple geometry at 48px in currentColor. A single-colour asset tinted by the system is, on the web, an SVG filled with currentColor. From a documented finding (technique), our catalogue entry (imagery)
- Not specified by the sourceThe sources do not specify photography. If photographs appear, run them full-bleed and unframed; add no filter or overlay.
Components
Flat Design is a screen register. Where the record states a component value (iOS 7’s borderless bar buttons and key colour) it is marked as the record’s; the rest are our translations.
The rules behind it
- DocumentedIn bars, make buttons borderless: a key colour highlights state and signals interactivity. From a documented finding (interface)
- Web translationOutside bars, give an action a solid fill, not a bare label. Flat UIs lost clickability signifiers; with elevation removed, a solid shape is the cue that remains. From a documented finding (interface)
- DocumentedPut content over chrome: the card is the content, with no frame around it. From a documented finding (motif)
- Web translationMake each card one solid tile of a single hue with one icon. Metro arranged large bright shapes in a grid; a tile is that shape carrying content. From a documented finding (layout), a documented finding (form)
- Web translationBound the field with a flat fill and a solid line, never an inset shadow. Bezels and shadows are discouraged as realistic cues; without them the field still needs a visible edge to be found. From a documented finding (interface)
- DocumentedUse a key colour to highlight state. From a documented finding (interface)
- DocumentedMake type a primary interface element: the words are the navigation. From a documented finding (typography)
Motion
Hover me
History moved in depth; this grammar slides in the plane.
The rules behind it
- DocumentedAnimate transitions: motion is a named principle of the canonical releases. From a documented finding (motion)
- DocumentedDepth-implying motion is part of the history: parallax panoramas, transitions that convey depth. From a documented finding (motion)
- Web translationUnder the purist reading, move in the plane only: position and colour. Zero depth is our reading, so this grammar keeps motion flat as well; the historical releases did not. From a documented finding, a documented finding (motion)
How flat
iOS 7 kept translucent layers. Zero depth is our reading of the fully flat end.
The rules behind it
- DocumentediOS 7 kept translucent, blurred layers: the flat label does not imply zero depth historically. From a documented finding (interface)
- DocumentedSemi-flat keeps subtle shadows, highlights and layers; the fully flat end uses none. From a documented finding
- DocumentedMaterial Design is an explicit depth system, not this. From a documented finding
What is clickable
Fill for actions, the key colour for state, underlines for links.
The rules behind it
- DocumentedFlat UIs coincided with a loss of signifiers that tell users what is clickable. From a documented finding (interface)
- DocumentedWeak signifiers cost users time: 22% longer and 25% more fixations in one study. From a documented finding (interface)
- Web translationSignal every control without depth: solid fill for actions, the key colour for state, underlines on links in text. Depth is off the table in the purist reading, so the cue has to come from colour, shape and words. From a documented finding (interface)
What it argues
Interfaces should stop pretending to be objects.
Removing every simulated depth cue leaves only colour, shape and position to carry meaning, which is honest about what a screen is and renders faster on the devices people actually use.
It refuses: shadow, gradient, bevel, texture and every other skeuomorphic depth cue without exception.
How you recognise it
Large bright solid shapes with no gloss, bevel or drop shadow, prominent sans-serif type, and a simple geometric icon set carrying meaning through colour and contrast. The diagnostic condition, as Aesthetary reads it, is the purist zero of depth: the canonical releases themselves kept some layering and blur (iOS 7's translucent layers), so the total absence identifies the fully flat end of the family, and semi-flat keeps subtle shadows. Modern SaaS uses soft elevation and rounded cards. Material Design is explicitly a depth system.
What carries the look
0 Elements linked
| Typography | Page set in Schibsted. Typographic research on the record. |
|---|---|
| Colorcarries the look | #009688#F4762E#22364A#F7C948#F5F6F4#1D2A36#FFFFFF#53606C as built |
| Composition | Nothing linked yet |
| Imagerycarries the look | Nothing linked yet |
| Surfaces | Nothing linked yet |
| Motion | Nothing linked yet |
| Motifs & Symbols | Nothing linked yet |
| Techniques | Nothing linked yet |
No Element is linked to this Aesthetic yet. Each row still opens its gallery.
Rules
23 · by area, each labelled with what kind of claim it is
Layout, again
Documented · Source attachedContent extends to the screen edges rather than sitting inside insets and visual frames.
Layout, again
Documented · Source attachedMetro menus used a grid-like arrangement of large bright shapes.
Typography
Documented · Source attachedType is a primary interface element, used prominently and elevated as a key design element.
Typography, again
Documented · Source attachedTypography is a sans-serif system face: Segoe WP on Windows Phone 7; iOS 7 directs designers to the system fonts.
Typography, again
Seen in the workMetro's type was meant to echo airport and metro-system signage.
Color
From our catalogue entryColour: bright but limited.
Imagery
From our catalogue entryImagery: flat vector icon sets.
Interface
Graded by our research brief · No source attached · disputedNo simulated depth cue anywhere: no shadow, gradient, bevel or texture. Meaning is carried by colour, shape and position alone.
Interface, again
Documented · Source attachedBezels, gradients and drop shadows are discouraged as physical/realistic cues that compete with content.
Interface, again
Documented · Source attachedIn iOS 7 all bar buttons are borderless; a key colour highlights state and subtly indicates interactivity.
Interface, again
Documented · Source attachediOS 7 kept translucent, blurred layers; the flat label therefore does not imply zero depth historically.
Interface, again
Documented · Source attachedStanding criticism: flat design coincided with a loss of signifiers; many flat UIs removed the cues (including 3D or glossy button treatment) that tell users what is clickable.
Interface, again
Documented · Source attachedIn NN/g's eyetracking test, users spent on average 22% more time and made 25% more fixations on pages with weak clickability signifiers; in some cases the strong versions were made by adding shadows, gradients and text treatments to an already flat page.
Motion
Documented · Source attachedMotion is a named principle of the canonical releases: Metro specified hardware-accelerated animations and transitions, and iOS 7 was presented with subtle motion.
Motion, again
Documented · Source attachedDepth-implying motion is part of the history: Metro panoramas pan layers at different speeds like parallax, and iOS 7 transitions convey hierarchy and depth.
Motif
Documented · Source attachedOrnament and chrome are subordinated to content: Metro puts content over chrome, and iOS 7 has the UI defer to content and restores embellishment only with care.
Technique
Documented · Source attachedWindows Phone 7 application bar icons are single-colour assets (white foreground on transparent background) that the system tints to the current style.
Technique, again
Documented · Source attachedA Metro theme is a user-chosen dark or light background plus one of ten accent colours.
Form
Documented · Source attachedA community wiki in Microsoft's archive says Metro relies on flat shapes, flat icons, colour and contrast to keep icons and UI simple and clear.
Form, again
Seen in the workiOS 7 (2013) describes its depth as on-screen layering: distinct layers create depth and hierarchy, translucency gives context and place, and together they create a sense of dimension. Aesthetary's reading: that is elevation (Interface), not a three-dimensional Form.
Hierarchy
Our readingWith elevation unavailable, rank must come from colour weight and size alone.
Context
Graded by our research brief · No source attachedA datable industry shift, not a movement: Microsoft's Metro language on Windows Phone 7 (2010), Google's Ice Cream Sandwich (2011), Apple's iOS 7 (2013). Its stated purpose was content over chrome and the abandonment of skeuomorphism.
Known about Flat Design: where it comes from, what it is called. Not a part of the design, and not something to check work against.Ruled out, or left open by the sources
Form
Does not applyResearch found the area does not apply.
What stands behind it
Partly sourced. 10 sources attached. 2 claims graded by our research brief, no source attached.
Build guidance: recorded in 5 of 8 research dimensions. It says what usable material is recorded, never how well it is evidenced.
No source attached: Argument, Recognition test. Not researched yet: Summary, Typeface guidance, Overall positions by area, Ornament and contrast scales, Moving it to screen, Source notes.
Neither is a free hand: an area research has not reached is not permission to decide on the language’s behalf.
What this record covers: The visual register of the 2010-2014 flat interface releases, following the Metro strand: large bright solid shapes, sans-serif type, flat imagery. Strict zero depth is Aesthetary's purist reading; iOS 7 kept blur.
Scope: The visual register of the 2010-2014 flat interface releases, following the Metro strand: large bright solid shapes, sans-serif type, flat imagery. Strict zero depth is Aesthetary's purist reading; iOS 7 kept blur.
| Research dimension | Evidence | Carries guidance |
|---|---|---|
| Composition | Specified | yes |
| Typography | Specified | yes |
| Hierarchy | Specified · Our reading | yes |
| Colour | Specified · From our catalogue entry | yes |
| Density | Not specified by the source | no |
| Imagery | Specified · From our catalogue entry | yes |
| Form / motif / surface / technique | Does not apply: form · Specified: motif, surface, technique | yes |
| Motion | Specified | yes |
Often confused with
Often confused with · AestheticModern SaaSZero depth versus soft elevation and rounded cards.
Often confused withCorporate MemphisFlat Design plus a specific figure convention; the illustration is the whole identity
Use it
Use itPut it on the Mix benchSee where its rules collide with another Aesthetic’s.
Use itDownload the briefEvery rule with its kind of claim, and a checklist for grading the result. Paste it into your AI site tool.
Contribute
Contributing and commenting need JavaScript. Nothing else on this page does.
Work made in this style: a poster, a page, a type setting. Every submission is reviewed before it appears.
Nothing here yet.
Comments
No comments yet.