# Flat Design — style guide for coding agents

> Generated from the Aesthetary record for **Flat Design**.
> Research: **Partly sourced** · Build guidance: recorded in 5 of 8 research dimensions.
> 10 sources attached. 2 claims graded by our research brief, no source attached.

## How to use this

Paste this file into your agent as context before asking it to design or build something in this visual language. It states what is established, what is our interpretation, and what nobody has established. Treat all three differently.

**The most important section is "Not researched yet".** Its purpose is to stop you and your agent inventing rules that sound right and are not recorded anywhere.

## What this language is

**Defining:** Zero depth, solid fills, simple icon set, bright but limited palette

**Recognise it by:** 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.

**Family:** Minimal & Ordered
**Era:** contemporary
**Native medium:** screen

**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.

## What it is arguing

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:** Refuses shadow, gradient, bevel, texture and every other skeuomorphic depth cue without exception.

## What it is not

Commonly confused with these. Getting the difference right matters more than getting the surface right:

- Modern SaaS
- Corporate Memphis — Flat Design plus a specific figure convention; the illustration is the whole identity

## Established rules

Grouped by what kind of claim each is. A requirement of the language and our own interpretation are not interchangeable.

**How to read each rule.** Every rule states two separate things, and neither stands in for the other:

- **Kind of claim** (the heading): From our catalogue entry · Graded by our research brief · No source attached · disputed · Graded by our research brief · No source attached · Our reading · Documented · Source attached · Seen in the work.
- **Evidence** (how it is established): Graded by our research brief · No source attached (`DOCUMENTED`) · From our catalogue entry (`SUPPORTED`) · Our reading (`CURATORIAL`) · Not researched yet (`UNKNOWN`) · No grade recorded (no grade in the record). Where a claim has its own canonical label, the Evidence line gives that label instead of the grade.
- **Product area**: which of the twelve areas the rule belongs to (Layout, Typography, Color, Imagery, Surface, Interface, Motion, Motif, Technique, Form, Hierarchy, Density), mapped from its raw area label in bold. "Context" means the rule is about the Aesthetic (its name, origin, lineage) rather than a part of the design. "Not mapped" means the raw area has no single area yet.
- The code in brackets is the `grade` field at `implementationConstraints.tokenRules.value.rules[].provenance.grade` in https://aesthetary.com/data/flat-design.json. "From our catalogue entry" means: Stated in Aesthetary’s existing catalogue entry. An outside source is named only where one is linked to the claim.

### From our catalogue entry

_Carried over from Aesthetary's original catalogue entry. The reasoning behind it was never recorded._

- **color** — Colour: bright but limited.
  - Kind of claim: From our catalogue entry · Evidence: From our catalogue entry · Product area: Color
- **imagery** — Imagery: flat vector icon sets.
  - Kind of claim: From our catalogue entry · Evidence: From our catalogue entry · Product area: Imagery

### Graded by our research brief · No source attached · disputed

- **depth** — No simulated depth cue anywhere: no shadow, gradient, bevel or texture. Meaning is carried by colour, shape and position alone.
  - Kind of claim: Graded by our research brief · No source attached · disputed · Evidence: Graded by our research brief · No source attached · disputed · Product area: Interface

### Graded by our research brief · No source attached

_A research brief graded this documented, but no source is attached yet. A grade is not a source._

- **register** — A 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.
  - Kind of claim: Graded by our research brief · No source attached · Evidence: Graded by our research brief · No source attached · Product area: Context (not a design area)

### Our reading

- **hierarchy** — With elevation unavailable, rank must come from colour weight and size alone.
  - Kind of claim: Our reading · Evidence: Our reading · Product area: Hierarchy

## Found in research

What research established from sources Aesthetary opened and checked. Each line names its area, how it is known, and where it is scoped. "Seen in the work" means the source documents particular works or products rather than the Aesthetic as a whole.

- **Layout** — Composition favours ample white space and reduced clutter.
  - Evidence: Documented · Source attached · Claim: `kcc:layout-1` · Covers Metro (2010) and iOS 7 (2013) guidelines.
- **Layout** — Content extends to the screen edges rather than sitting inside insets and visual frames.
  - Evidence: Documented · Source attached · Claim: `kcc:layout-2` · Covers iOS 7 strand.
- **Layout** — Metro menus used a grid-like arrangement of large bright shapes.
  - Evidence: Documented · Source attached · Claim: `kcc:layout-3` · Covers Metro strand; encyclopedia support only.
- **Typography** — Type is a primary interface element, used prominently and elevated as a key design element.
  - Evidence: Documented · Source attached · Claim: `kcc:typography-1` · Covers Metro strand.
- **Typography** — Typography is a sans-serif system face: Segoe WP on Windows Phone 7; iOS 7 directs designers to the system fonts.
  - Evidence: Documented · Source attached · Claim: `kcc:typography-2` · Covers platform system faces; which sans is free.
- **Typography** — Metro's type was meant to echo airport and metro-system signage.
  - Evidence: Seen in the work · Claim: `kcc:typography-3` · Covers Metro strand.
- **Interface** — Bezels, gradients and drop shadows are discouraged as physical/realistic cues that compete with content.
  - Evidence: Documented · Source attached · Claim: `kcc:interface-1` · Covers iOS 7 guidance: 'reconsider', not prohibit.
- **Interface** — In iOS 7 all bar buttons are borderless; a key colour highlights state and subtly indicates interactivity.
  - Evidence: Documented · Source attached · Claim: `kcc:interface-2` · Covers iOS 7.
- **Interface** — iOS 7 kept translucent, blurred layers; the flat label therefore does not imply zero depth historically.
  - Evidence: Documented · Source attached · Claim: `kcc:interface-3`
- **Interface** — Standing 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.
  - Evidence: Documented · Source attached · Claim: `kcc:w2-interface-1` · Covers NN/g, 2017; the criticism, not the movement's own argument.
- **Interface** — In 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.
  - Evidence: Documented · Source attached · Claim: `kcc:w2-interface-2` · Covers One study of six page pairs; web pages, not the 2010–2014 OS releases.
- **Motion** — Motion is a named principle of the canonical releases: Metro specified hardware-accelerated animations and transitions, and iOS 7 was presented with subtle motion.
  - Evidence: Documented · Source attached · Claim: `kcc:motion-1`
- **Motion** — Depth-implying motion is part of the history: Metro panoramas pan layers at different speeds like parallax, and iOS 7 transitions convey hierarchy and depth.
  - Evidence: Documented · Source attached · Claim: `kcc:motion-2` · Covers historical releases; a no-z-axis rule can only be Aesthetary's purist reading.
- **Motif** — Ornament 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.
  - Evidence: Documented · Source attached · Claim: `kcc:motif-1` · Covers restraint, not a total ban: iOS 7 permits careful embellishment.
- **Technique** — Windows Phone 7 application bar icons are single-colour assets (white foreground on transparent background) that the system tints to the current style.
  - Evidence: Documented · Source attached · Claim: `kcc:technique-1` · Covers Windows Phone 7 application bar icons.
- **Technique** — A Metro theme is a user-chosen dark or light background plus one of ten accent colours.
  - Evidence: Documented · Source attached · Claim: `kcc:technique-2` · Covers Windows Phone 7.
- **Form** — A 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.
  - Evidence: Documented · Source attached · Claim: `kcc:w2-form-2` · Covers Community wiki hosted in Microsoft's archive; secondary weight.
- **Form** — iOS 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.
  - Evidence: Seen in the work · Claim: `kcc:w2-form-1` · Covers iOS 7, 2013.

## Positions by area

The overall position recorded for each area. "No overall position recorded" means rules exist for the area but no position above them; the rules still apply. It is not the same as "Not established", which means nobody has researched the area.

- **Layout** — Specified
- **Typography** — Specified
- **Color** — Specified
- **Imagery** — Specified
- **Surface** — Specified
- **Interface** — Specified
- **Motion** — Specified
- **Motif** — Specified
- **Technique** — Specified
- **Form** — Outside this language. The area does not apply; this is not a gap in the research.

## Design grammar — web primitives

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.

Three kinds of line: **On the record** names a rule this record holds (its wording is under Established rules) and states what it becomes on the web. **Web translation** is Aesthetary's choice for the web, derived from the rules it cites; change it if you have a reason, keep the cited rule. **Not specified by the source** means the research reached this but the sources say nothing about it; **Not researched yet** means the research has not reached it yet. Either way, follow the instruction and do not invent a rule. Structured version: `designGrammar` in data/flat-design.json.

### Colour

| Role | Value | Contrast | Use | Kind |
| --- | --- | --- | --- | --- |
| ground | `#F5F6F4` | — | The light background of the theme. | Web translation |
| ink | `#1D2A36` | 13.9:1 | Text on light hues; the dark ground. | Web translation |
| key | `#00695F` | 6.6:1 (white on it) | The one accent: state, primary actions, current page. | Web translation |
| teal | `#009688` | — | Large shapes only; never a text ground (white on it 3.7:1). | Web translation |
| orange | `#F4762E` | 5.2:1 (ink on it) | Large shapes. | Web translation |
| navy | `#22364A` | 12.4:1 (white on it) | Large shapes. | Web translation |
| yellow | `#F7C948` | 9.3:1 (ink on it) | Large shapes; the focus ring. | Web translation |

Other accents the record supports:

- dark theme (recorded as "a user-chosen dark or light background"): `#1D2A36`

- **On the record · From our catalogue entry** · `token_rule:color-5` → Bright but limited.
- **On the record · Documented** · `claim:kcc:technique-2` → Build a theme as a dark or light background plus one accent colour.
- **Web translation** — Keep the other hues for large shapes; let only the key colour mean state. _Why:_ One accent carries state in both canonical systems; more hues on controls would compete with it. (`claim:kcc:interface-2`, `token_rule:color-5`)

### Typography

Family: the platform’s system sans. Stack: `system-ui, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif`

| Role | Size | Weight | Line height | Case | Tracking | Measure | Use |
| --- | --- | --- | --- | --- | --- | --- | --- |
| display | 5rem | 900 | 0.9 | not specified | -0.03em | — | Names and titles, set large. |
| heading | 2.5rem | 900 | 1 | not specified | -0.02em | — | Section heads. |
| body | 1.125rem | 400 | 1.55 | not specified | not specified | 64ch | Reading text. |

- **On the record · Documented** · `claim:kcc:typography-1` → Make type a primary interface element, used prominently.
- **On the record · Documented** · `claim:kcc:typography-2` → Use the platform’s system sans-serif.
- **On the record · Seen in the work** · `claim:kcc:typography-3` → Let type echo airport and metro signage.
- **Web translation** — Rank by size and weight: headings jump well above the body. _Why:_ With elevation unavailable, rank comes from colour weight and size alone. (`token_rule:hierarchy-13`)

### Grid and layout

Large solid tiles on an 8px gutter, content running to the edges; one column under 901px.

| Viewport | Columns |
| --- | --- |
| 901px and up | 6 |
| under 901px | 1 |

Tokens: gutter `8px`

- **On the record · Documented** · `claim:kcc:layout-1` → Favour ample white space and reduced clutter.
- **On the record · Documented** · `claim:kcc:layout-2` → Run content to the screen edges rather than insetting it in frames.
- **On the record · Documented** · `claim:kcc:layout-3` → Arrange large bright shapes in a grid.
- **Web translation** — Tile on six columns with an 8px gutter. _Why:_ A narrow gutter keeps the shapes large and the grid legible, as Metro’s menus did. (`claim:kcc:layout-3`)

### Shape and geometry

Tokens: radius `0` · shadow `none` · gradient `none`

- **On the record · Graded by our research brief · No source attached · disputed** · `token_rule:fd-r1` → No simulated depth cue: no shadow, gradient, bevel or texture.
- **On the record · Documented** · `claim:kcc:revision-surface-8` → No elevation, shadow, gradient or bevel: Aesthetary’s purist reading, since iOS 7 kept translucent layers.
- **On the record · Documented** · `claim:kcc:w2-form-2` → Keep icons and UI simple with flat shapes, colour and contrast.
- **Web translation** — Square corners. _Why:_ The sources do not specify a radius; square tiles keep the large shapes plain, as the room draws them. (`claim:kcc:layout-3`)

### Imagery

- **On the record · From our catalogue entry** · `token_rule:imagery-7` → Use flat vector icon sets.
- **On the record · Documented** · `claim:kcc:technique-1` → Draw icons as single-colour assets the system tints to the current style.
- **Web translation** — Draw icons from simple geometry at 48px in currentColor. _Why:_ A single-colour asset tinted by the system is, on the web, an SVG filled with currentColor. (`claim:kcc:technique-1`, `token_rule:imagery-7`)
- **Not specified by the source** — The sources do not specify photography. _Instead:_ If photographs appear, run them full-bleed and unframed; add no filter or overlay.

### How flat

The label covers a family. The releases kept some depth; the fully flat end keeps none. This grammar builds the fully flat end and says so.

- **On the record · Documented** · `claim:kcc:interface-3` → iOS 7 kept translucent, blurred layers: the flat label does not imply zero depth historically.
- **On the record · Documented** · `claim:kcc:boundary-2` → Semi-flat keeps subtle shadows, highlights and layers; the fully flat end uses none.
- **On the record · Documented** · `claim:kcc:boundary-1` → Material Design is an explicit depth system, not this.

### What is clickable

The standing criticism of the style: remove every depth cue and users lose the cue that says “press here”. The grammar pays it back with fill, colour and words.

- **On the record · Documented** · `claim:kcc:w2-interface-1` → Flat UIs coincided with a loss of signifiers that tell users what is clickable.
- **On the record · Documented** · `claim:kcc:w2-interface-2` → Weak signifiers cost users time: 22% longer and 25% more fixations in one study.
- **Web translation** — Signal every control without depth: solid fill for actions, the key colour for state, underlines on links in text. _Why:_ Depth is off the table in the purist reading, so the cue has to come from colour, shape and words. (`claim:kcc:w2-interface-1`, `claim:kcc:interface-2`)

### Components

Anatomy, tokens and states below are Web translation: Aesthetary's specification for the screen. Each value line after them says whether it restates a rule this record holds.

#### Button

A solid rectangle of one hue with its label, nothing raised; in a bar, just the word in the key colour.

- Anatomy: solid fill, square corners; label in the system sans, bold; no border, no shadow, no gradient
- Tokens: fill `#00695F` · label `#FFFFFF` · radius `0` · shadow `none` · bar-label `#00695F`
- State, default: Deep teal fill, white label (6.6:1).
- State, hover: Fill changes hue to navy.
- State, focus: 4px yellow outline, no offset.
- State, active: Fill changes to ink.
- State, disabled: Slate label on off-white, no fill, and the word "unavailable" in its accessible name.
- Accessibility: White on deep teal 6.6:1.
- Accessibility: Without depth, the fill and label are the signifier: never make a primary action a bare word outside a bar.
- **On the record · Documented** · `claim:kcc:interface-2` → In bars, make buttons borderless: a key colour highlights state and signals interactivity.
- **Web translation** — Outside bars, give an action a solid fill, not a bare label. _Why:_ Flat UIs lost clickability signifiers; with elevation removed, a solid shape is the cue that remains. (`claim:kcc:w2-interface-1`, `claim:kcc:w2-interface-2`)

#### Card

A tile: one flat hue, one flat icon, the content, and nothing framing it.

- Anatomy: solid hue, no border; one geometric icon, 48px, currentColor; label, then content in the system sans
- Tokens: radius `0` · shadow `none` · padding `clamp(16px, 2.4vw, 28px)` · gutter `8px`
- State, default: Solid hue.
- State, hover: Slides 6px sideways and changes hue.
- State, focus: 4px yellow outline (ink on the light hues).
- Accessibility: Text colour per hue: ink on orange 5.2, ink on yellow 9.3, white on navy 12.4, white on deep teal 6.6.
- Accessibility: The icon is aria-hidden and repeats nothing the text needs.
- **On the record · Documented** · `claim:kcc:motif-1` → Put content over chrome: the card is the content, with no frame around it.
- **Web translation** — Make each card one solid tile of a single hue with one icon. _Why:_ Metro arranged large bright shapes in a grid; a tile is that shape carrying content. (`claim:kcc:layout-3`, `claim:kcc:w2-form-2`)

#### Input

A white field on the off-white ground, bounded by a solid ink line along its foot, label above.

- Anatomy: white fill; 3px solid ink bottom line; label above in bold
- Tokens: fill `#FFFFFF` · line `3px solid #1D2A36` · radius `0`
- State, default: White field, ink line.
- State, focus: 4px yellow outline.
- State, error: Line and message in ink on an orange strip, prefixed "Error:".
- State, disabled: Slate line and label.
- Accessibility: A visible label on every field.
- Accessibility: The field is findable by fill and line together, not by a bevel.
- **Web translation** — Bound the field with a flat fill and a solid line, never an inset shadow. _Why:_ Bezels and shadows are discouraged as realistic cues; without them the field still needs a visible edge to be found. (`claim:kcc:interface-1`, `claim:kcc:w2-interface-1`)

#### Navigation

A row of words in the system sans, the current one in the key colour; nothing boxed.

- Anatomy: words, large; current item in the key colour and bold; no dividers, no pills
- Tokens: key `#00695F` · current `bold, key colour, 4px bar beneath`
- State, default: Ink words.
- State, hover: Key colour.
- State, focus: 4px yellow outline.
- State, current: Bold in the key colour with a solid bar beneath, and aria-current.
- Accessibility: aria-current on the current page.
- Accessibility: The bar beneath repeats the colour cue so state is not colour alone.
- **On the record · Documented** · `claim:kcc:interface-2` → Use a key colour to highlight state.
- **On the record · Documented** · `claim:kcc:typography-1` → Make type a primary interface element: the words are the navigation.

### Motion

Durations, easing and the rest of this specification are Web translation: Aesthetary's choice for the screen.

- Durations: state 200ms
- Easing: state `ease`
- Transforms: translateX only
- Entrance: none
- Hover: A tile slides 6px sideways and changes hue.
- Reduced motion: No slide; the hue change alone.
- **On the record · Documented** · `claim:kcc:motion-1` → Animate transitions: motion is a named principle of the canonical releases.
- **On the record · Documented** · `claim:kcc:motion-2` → Depth-implying motion is part of the history: parallax panoramas, transitions that convey depth.
- **Web translation** — Under the purist reading, move in the plane only: position and colour. _Why:_ Zero depth is our reading, so this grammar keeps motion flat as well; the historical releases did not. (`claim:kcc:revision-surface-8`, `claim:kcc:motion-2`)

### Deliberately not added

- **Corner radius** (shapeGeometry): Not specified by the source; square is our choice.
- **Photography** (imagery): The record documents icons, not photographs.
- **Density** (layout): Not specified by the source.

## Coverage — what has been looked at

One row per research dimension a research pass considered. "Not researched yet" (`UNKNOWN`) means exactly that; a dimension can carry an Aesthetary recommendation and still be unresearched, and those are different things.

| Research dimension | Evidence | Resolved by | Carries a rule |
| --- | --- | --- | --- |
| Composition | Specified | Aesthetary decided | yes |
| Typography | Specified | Aesthetary decided | yes |
| Hierarchy | Specified · Our reading | Aesthetary decided | yes |
| Colour | Specified · From our catalogue entry | follows the recorded claim | yes |
| Density | Not specified by the source | Aesthetary decided | no |
| Imagery | Specified · From our catalogue entry | follows the recorded claim | yes |
| Form / motif / surface / technique | Does not apply: form · Specified: motif, surface, technique | follows the recorded claim | yes |
| Motion | Specified | Aesthetary decided | yes |

Unresearched: Composition, Typography, Motion. Where a rule appears for one of these it is Aesthetary's implementation recommendation, not a property of the language, and its Evidence line above says so.

## Not researched yet

Every area of this record has a recorded position. That is unusual — most records do not.

## Grade your own work

17 checks: 9 mechanically testable, 6 needing a person to look, 0 needing a source Aesthetary does not hold, 2 with no recorded position. 3 further research dimensions produced no rule (Composition, Typography, Density). This rubric is silent on them. 1 context rule is listed apart: known about this Aesthetic, not something to check finished work against. Scores do not add up. A failure against a required rule and a departure from something we invented are not the same result, and no total should let them cancel.

### Recognition — does this read as the intended Aesthetic?

- **[visual_human · recognition signature · Evidence: No grade recorded]** Strip every logo, word and borrowed image out of your work, then show it to someone who knows the collection. Do they land on this Aesthetic? The signature to hold is: 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.
  - _If it fails:_ The work may be competent and still read as a different Aesthetic, or as none. Nothing below matters until this passes.

### Fidelity — are its defining rules present?

- **[unassessable · no recorded position · Evidence: Not researched yet (`UNKNOWN`)]** Nothing is recorded as a requirement of this Aesthetic. There is no rule here that your work must hold — which means nothing you do can fail this dimension, and nothing you do can satisfy it either. That is missing research, not freedom: our research brief does record failure modes to avoid, listed under avoidance below. They are recorded judgement, not requirements.
  - _If it fails:_ Not applicable. An empty dimension is an absence of research, never a pass and never a failure.

### Implementation — were those rules translated appropriately into this medium?

- **[visual_human · Our reading · Evidence: Our reading]** Your work may depart from this — but knowingly, not by accident. With elevation unavailable, rank must come from colour weight and size alone.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[visual_human · From our catalogue entry · Evidence: From our catalogue entry]** Your work may depart from this — but knowingly, not by accident. Colour: bright but limited.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[visual_human · From our catalogue entry · Evidence: From our catalogue entry]** Your work may depart from this — but knowingly, not by accident. Imagery: flat vector icon sets.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[mechanical · Graded by our research brief · No source attached · disputed · Evidence: Graded by our research brief · No source attached · disputed]** Your work may depart from this — but knowingly, not by accident. No simulated depth cue anywhere: no shadow, gradient, bevel or texture. Meaning is carried by colour, shape and position alone.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.

### Avoidance — known failure modes, neighbour drift, cloning

- **[mechanical · recorded failure mode · Evidence: No grade recorded]** Check your work against this: No shadow.
  - _If it fails:_ A failure mode recorded in our research brief: recorded judgement about what weakens this Aesthetic, not a requirement of the language.
- **[mechanical · recorded failure mode · Evidence: No grade recorded]** Check your work against this: No gradient.
  - _If it fails:_ A failure mode recorded in our research brief: recorded judgement about what weakens this Aesthetic, not a requirement of the language.
- **[mechanical · recorded failure mode · Evidence: No grade recorded]** Check your work against this: No bevel.
  - _If it fails:_ A failure mode recorded in our research brief: recorded judgement about what weakens this Aesthetic, not a requirement of the language.
- **[mechanical · recorded failure mode · Evidence: No grade recorded]** Check your work against this: No texture.
  - _If it fails:_ A failure mode recorded in our research brief: recorded judgement about what weakens this Aesthetic, not a requirement of the language.
- **[mechanical · recorded failure mode · Evidence: No grade recorded]** Check your work against this: No blur.
  - _If it fails:_ A failure mode recorded in our research brief: recorded judgement about what weakens this Aesthetic, not a requirement of the language.
- **[mechanical · recorded failure mode · Evidence: No grade recorded]** Check your work against this: No simulated material.
  - _If it fails:_ A failure mode recorded in our research brief: recorded judgement about what weakens this Aesthetic, not a requirement of the language.
- **[mechanical · recorded failure mode · Evidence: No grade recorded]** Check your work against this: No depth-implying motion.
  - _If it fails:_ A failure mode recorded in our research brief: recorded judgement about what weakens this Aesthetic, not a requirement of the language.
- **[visual_human · recorded failure mode · Evidence: No grade recorded]** Have you made any of these changes? Each one moves the work into a neighbouring Aesthetic: Against Modern SaaS: zero depth versus soft elevation and rounded cards. Against Material / System Design (Module, naming mismatch on *"Material"*): a depth system versus the refusal of one. Anti-signature: one shadow ends it. This is the lowest-tolerance record yet briefed.
  - _If it fails:_ You have built the neighbour. That may be fine — but name which Aesthetic you are in.
- **[mechanical · declared closure · Evidence: No grade recorded]** Check your work against this: Not open: any depth cue whatsoever..
  - _If it fails:_ This one is closed, not open. The record says generation must not go here.
- **[visual_human · neighbour drift · Evidence: No grade recorded]** Could your work be mistaken for Corporate Memphis? That language is: Flat Design plus a specific figure convention; the illustration is the whole identity
  - _If it fails:_ Not necessarily wrong, but you are closer to Corporate Memphis than to this Aesthetic.

### Accessibility — the Aesthetic preserved without its inaccessible practice

- **[unassessable · no recorded position · Evidence: Not researched yet (`UNKNOWN`)]** Does this Aesthetic conflict with any usability floor? Nobody has recorded one for it.
  - _If it fails:_ Nothing — and that is the problem. An unrecorded conflict is not an absent one. Hold AA on reading matter and decide the rest on other grounds.

### Context — known about this Aesthetic, not a check

Where the Aesthetic comes from, what it is called, how it sits among its neighbours. Use it to understand the work; do not score finished work against it.

- A 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. _(Graded by our research brief · No source attached · Evidence: Graded by our research brief · No source attached)_

**Not covered at all:** Composition: Specified; Typography: Specified; Density: Not specified by the source. These research dimensions produced no rule, so there is no check. Treat them as unscored, never as passed and never as failed.

## Rules for the agent

1. Do not invent rules for any area listed under **Not researched yet**.
2. Do not treat an absent position as permission to do anything you like — say that the language has no position, and decide on other grounds.
3. Keep our interpretations separable from the language's own requirements. If asked to justify a choice, cite which kind of claim it came from.
4. If you need something this record does not contain, say so rather than producing a confident answer from the aesthetic's name.
5. When you self-score against "Grade your own work", score only checks marked `mechanical`. Declare `visual_human` and `evidence_dependent` checks unjudged rather than guessing, and never score an `unassessable` one.
6. Evidence "Not researched yet" (`UNKNOWN`) is never a failure. It means nobody researched the dimension, so departing from what is written there costs nothing and must not be reported as a defect. "No grade recorded" is not a grade either: do not treat it as our decision or as an outside source.
7. In **Design grammar**, a "Web translation" line is our choice for the web and may be changed with a reason; the rules it cites may not. Never present a translation as a property of the language.

## Provenance

- Record: `flat-design` · status `draft` · research `partly_researched`
- Full structured record: https://aesthetary.com/data/flat-design.json
- Human-readable record: https://aesthetary.com/a/flat-design.html
- This file is a snapshot. The record may have changed since; check the page above.

_Aesthetary is an alpha. Where a page says nothing, nobody has done the work yet._