{
  "contract": "aesthetary.record/1.0",
  "record_spec": "1.1.0",
  "semantics": {
    "vocabulary": "aesthetary.public-evidence/1.0",
    "definitions": "vocabulary.json"
  },
  "slug": "flat-design",
  "name": "Flat Design",
  "identity": {
    "definition": {
      "state": "resolved",
      "text": "Flat design is the screen-interface register popularised by Microsoft's Metro language for Windows Phone 7 and Apple's iOS 7: large bright shapes, prominent sans-serif type, simple-geometry icons and the absence of glossy or three-dimensional effects. Strict zero depth is Aesthetary's purist reading; iOS 7 itself kept translucent overlays, layers and depth-implying motion."
    },
    "scope": {
      "state": "resolved",
      "text": "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.",
      "ruling": "D0-1"
    },
    "aliases": [
      "flat UI",
      "2013 flat"
    ],
    "layer_verdict": {
      "state": "ruled",
      "value": "umbrella_or_family",
      "ruling": "D0-1"
    }
  },
  "native_medium": {
    "state": "resolved",
    "value": [
      "screen"
    ],
    "evidence": {
      "quote": "UI",
      "field": "register_context[kind=medium]"
    },
    "ruling": "AM2-2 (2026-09-27)"
  },
  "research": {
    "line": "partly_sourced",
    "text": "Partly sourced",
    "sentence": "10 sources attached. 2 claims graded by our research brief, no source attached."
  },
  "areas": [
    {
      "area": "layout",
      "state": "resolved",
      "canon": "specified",
      "importance": "unknown",
      "posture_basis": "synthesis",
      "label": {
        "text": "Specified"
      }
    },
    {
      "area": "typography",
      "state": "resolved",
      "canon": "specified",
      "importance": "unknown",
      "posture_basis": "synthesis",
      "label": {
        "text": "Specified"
      }
    },
    {
      "area": "color",
      "state": "resolved",
      "canon": "specified",
      "importance": "unknown",
      "posture_basis": "synthesis",
      "label": {
        "text": "Specified"
      }
    },
    {
      "area": "imagery",
      "state": "resolved",
      "canon": "specified",
      "importance": "unknown",
      "posture_basis": "synthesis",
      "label": {
        "text": "Specified"
      }
    },
    {
      "area": "surface",
      "state": "resolved",
      "canon": "specified",
      "importance": "unknown",
      "posture_basis": null,
      "label": {
        "text": "Specified"
      }
    },
    {
      "area": "interface",
      "state": "resolved",
      "canon": "specified",
      "importance": "unknown",
      "posture_basis": "synthesis",
      "label": {
        "text": "Specified"
      }
    },
    {
      "area": "motion",
      "state": "resolved",
      "canon": "specified",
      "importance": "unknown",
      "posture_basis": "synthesis",
      "label": {
        "text": "Specified"
      }
    },
    {
      "area": "motif",
      "state": "resolved",
      "canon": "specified",
      "importance": "unknown",
      "posture_basis": null,
      "label": {
        "text": "Specified"
      }
    },
    {
      "area": "technique",
      "state": "resolved",
      "canon": "specified",
      "importance": "unknown",
      "posture_basis": null,
      "label": {
        "text": "Specified"
      }
    },
    {
      "area": "form",
      "state": "resolved",
      "canon": "not_applicable",
      "importance": "unknown",
      "posture_basis": null,
      "label": {
        "text": "Does not apply"
      }
    },
    {
      "area": "hierarchy",
      "state": "resolved",
      "canon": "specified",
      "importance": "unknown",
      "posture_basis": "synthesis",
      "label": {
        "text": "Specified"
      }
    },
    {
      "area": "density",
      "state": "resolved",
      "canon": "not_canonically_specified",
      "importance": "unknown",
      "posture_basis": "synthesis",
      "label": {
        "text": "Not specified by the source"
      }
    }
  ],
  "claims": [
    {
      "id": "hierarchy-13",
      "text": "with elevation unavailable, rank must come from colour weight and size alone.",
      "role": "rule",
      "area": "hierarchy",
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "color-5",
      "text": "Colour: bright but limited.",
      "role": "rule",
      "area": "color",
      "basis": "inherited",
      "support": {
        "state": "inherited",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "catalogue",
        "text": "From our catalogue entry"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "imagery-7",
      "text": "Imagery: flat vector icon sets.",
      "role": "rule",
      "area": "imagery",
      "basis": "inherited",
      "support": {
        "state": "inherited",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "catalogue",
        "text": "From our catalogue entry"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "fd-r1",
      "text": "No simulated depth cue anywhere: no shadow, gradient, bevel or texture. Meaning is carried by colour, shape and position alone.",
      "role": "rule",
      "area": "interface",
      "basis": "documentary",
      "support": {
        "state": "graded_unlinked",
        "for": [],
        "against": [
          "mass-01:flat-design:WP_FLAT"
        ],
        "contested": true
      },
      "label": {
        "kind": "graded",
        "mark": "none",
        "text": "Graded by our research brief · No source attached · disputed"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "fd-r2",
      "text": "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.",
      "role": "context",
      "area": null,
      "basis": "documentary",
      "support": {
        "state": "graded_unlinked",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "graded",
        "mark": "none",
        "text": "Graded by our research brief · No source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "intent",
      "text": "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.",
      "role": "argument",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "failure-1",
      "text": "No shadow.",
      "role": "negative",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "failure-2",
      "text": "No gradient.",
      "role": "negative",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "failure-3",
      "text": "No bevel.",
      "role": "negative",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "failure-4",
      "text": "No texture.",
      "role": "negative",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "failure-5",
      "text": "No blur.",
      "role": "negative",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "failure-6",
      "text": "No simulated material.",
      "role": "negative",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "failure-7",
      "text": "No depth-implying motion.",
      "role": "negative",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "failure-9",
      "text": "Not open: any depth cue whatsoever..",
      "role": "negative",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "intent-negation",
      "text": "Refuses shadow, gradient, bevel, texture and every other skeuomorphic depth cue without exception.",
      "role": "argument",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "intent-cost",
      "text": "Costs accepted: Affordance clarity; Perceived hierarchy; Anything a shadow used to signal",
      "role": "argument",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "intent-audience",
      "text": "Audience: A user who has learned that coloured rectangles are tappable and does not need them to look raised.",
      "role": "argument",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "v1-distinguishing",
      "text": "No shadow or gradient at all, which separates it from every later UI style",
      "role": "diagnostic",
      "area": null,
      "basis": "inherited",
      "support": {
        "state": "inherited",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "catalogue",
        "text": "From our catalogue entry"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "v1-era",
      "text": "Era: contemporary",
      "role": "context",
      "area": null,
      "basis": "inherited",
      "support": {
        "state": "inherited",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "catalogue",
        "text": "From our catalogue entry"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "v1-mood",
      "text": "Mood: playful, serious",
      "role": "context",
      "area": null,
      "basis": "inherited",
      "support": {
        "state": "inherited",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "catalogue",
        "text": "From our catalogue entry"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "v1-cross-library",
      "text": "Cross-library: UI Treatments: no-elevation systems · Imagery: flat vector icon sets",
      "role": "context",
      "area": null,
      "basis": "inherited",
      "support": {
        "state": "inherited",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "catalogue",
        "text": "From our catalogue entry"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "surface-8.surface",
      "text": "Surface: solid fill",
      "role": "rule",
      "area": "surface",
      "basis": "inherited",
      "support": {
        "state": "inherited",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "catalogue",
        "text": "From our catalogue entry"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "surface-8.interface",
      "text": "Interface: zero elevation",
      "role": "rule",
      "area": "interface",
      "basis": "inherited",
      "support": {
        "state": "inherited",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "catalogue",
        "text": "From our catalogue entry"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:layout-1",
      "text": "Composition favours ample white space and reduced clutter.",
      "role": "rule",
      "area": "layout",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S1",
          "kcc-flat-design-S3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "Metro (2010) and iOS 7 (2013) guidelines"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:layout-2",
      "text": "Content extends to the screen edges rather than sitting inside insets and visual frames.",
      "role": "rule",
      "area": "layout",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "iOS 7 strand"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:layout-3",
      "text": "Metro menus used a grid-like arrangement of large bright shapes.",
      "role": "diagnostic",
      "area": "layout",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S6"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "Metro strand; encyclopedia support only"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:typography-1",
      "text": "Type is a primary interface element, used prominently and elevated as a key design element.",
      "role": "rule",
      "area": "typography",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S1"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "Metro strand"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:typography-2",
      "text": "Typography is a sans-serif system face: Segoe WP on Windows Phone 7; iOS 7 directs designers to the system fonts.",
      "role": "rule",
      "area": "typography",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S1",
          "kcc-flat-design-S6",
          "kcc-flat-design-S3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "platform system faces; which sans is free"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:typography-3",
      "text": "Metro's type was meant to echo airport and metro-system signage.",
      "role": "context",
      "area": "typography",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S2"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "seen",
        "text": "Seen in the work"
      },
      "scope": {
        "practice": "Metro strand"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:motion-1",
      "text": "Motion is a named principle of the canonical releases: Metro specified hardware-accelerated animations and transitions, and iOS 7 was presented with subtle motion.",
      "role": "rule",
      "area": "motion",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S1",
          "kcc-flat-design-S4"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:motion-2",
      "text": "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.",
      "role": "context",
      "area": "motion",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S1",
          "kcc-flat-design-S3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "historical releases; a no-z-axis rule can only be Aesthetary's purist reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:motif-1",
      "text": "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.",
      "role": "negative",
      "area": "motif",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S1",
          "kcc-flat-design-S3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "restraint, not a total ban: iOS 7 permits careful embellishment"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:technique-1",
      "text": "Windows Phone 7 application bar icons are single-colour assets (white foreground on transparent background) that the system tints to the current style.",
      "role": "rule",
      "area": "technique",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S1"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "Windows Phone 7 application bar icons"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:technique-2",
      "text": "A Metro theme is a user-chosen dark or light background plus one of ten accent colours.",
      "role": "context",
      "area": "technique",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S1"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "Windows Phone 7"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:interface-1",
      "text": "Bezels, gradients and drop shadows are discouraged as physical/realistic cues that compete with content.",
      "role": "negative",
      "area": "interface",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "iOS 7 guidance: 'reconsider', not prohibit"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:interface-2",
      "text": "In iOS 7 all bar buttons are borderless; a key colour highlights state and subtly indicates interactivity.",
      "role": "rule",
      "area": "interface",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "iOS 7"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:interface-3",
      "text": "iOS 7 kept translucent, blurred layers; the flat label therefore does not imply zero depth historically.",
      "role": "context",
      "area": "interface",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S3",
          "kcc-flat-design-S4",
          "kcc-flat-design-S6"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:w2-interface-1",
      "text": "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.",
      "role": "negative",
      "area": "interface",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-W2S1"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "NN/g, 2017; the criticism, not the movement's own argument"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:w2-interface-2",
      "text": "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.",
      "role": "context",
      "area": "interface",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-W2S1"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "One study of six page pairs; web pages, not the 2010–2014 OS releases"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:w2-form-1",
      "text": "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.",
      "role": "negative",
      "area": "form",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-W2S2"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "seen",
        "text": "Seen in the work"
      },
      "scope": {
        "practice": "iOS 7, 2013"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:w2-form-2",
      "text": "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.",
      "role": "context",
      "area": "form",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-W2S3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "Community wiki hosted in Microsoft's archive; secondary weight"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:definition",
      "text": "Flat design is the screen-interface register popularised by Microsoft's Metro language for Windows Phone 7 and Apple's iOS 7: large bright shapes, prominent sans-serif type, simple-geometry icons and the absence of glossy or three-dimensional effects. Strict zero depth is Aesthetary's purist reading; iOS 7 itself kept translucent overlays, layers and depth-implying motion.",
      "role": "definition",
      "area": null,
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S6",
          "kcc-flat-design-S5",
          "kcc-flat-design-S1",
          "kcc-flat-design-S3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:boundary-1",
      "text": "Not Material Design: Material is an explicit depth system (lighting, seams, shadows for hierarchy) that NN/g classes as 'flat 2.0'; flat design as scoped is the Metro-led register that removed such cues.",
      "role": "boundary",
      "area": null,
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S7",
          "kcc-flat-design-S6",
          "kcc-flat-design-S5"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:boundary-2",
      "text": "Not Flat 2.0 / semi-flat: Semi-flat keeps subtle shadows, highlights and layers; the fully flat end uses none of the 3D, skeuomorphic or realistic styles.",
      "role": "boundary",
      "area": null,
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S5"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:revision-surface-8",
      "text": "Interface: no elevation, shadow, gradient or bevel. This is Aesthetary's purist reading (matching NN/g's 'fully flat'); the canonical iOS 7 release kept translucent blurred layers, and Material, often grouped under the label, is an explicit depth system.",
      "role": "rule",
      "area": null,
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-flat-design-S3",
          "kcc-flat-design-S5",
          "kcc-flat-design-S7"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "dcc:gestalt",
      "text": "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.",
      "role": "diagnostic",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [
        "kcc:definition",
        "kcc:w2-form-2",
        "kcc:typography-1",
        "kcc:interface-3",
        "kcc:boundary-1",
        "kcc:boundary-2"
      ],
      "ruling": null
    },
    {
      "id": "dcc:failure-8",
      "text": "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.",
      "role": "negative",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "dcc:gestalt-boundary",
      "text": "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.",
      "role": "boundary",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    }
  ],
  "web_translations": [],
  "standard_practice": [],
  "sources": [
    {
      "id": "mass-01:flat-design:WP_FLAT",
      "kind": "source",
      "title": "Flat design",
      "url": "https://en.wikipedia.org/wiki/Flat_design",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-flat-design-S1",
      "kind": "source",
      "title": "UI Design and Interaction Guide for Windows Phone 7, Version 2.0 (July 2010)",
      "url": "http://tableless.github.io/exemplos/pdf/guidelines-interface-mobiles/UI%20Design%20and%20Interaction%20Guide%20for%20Windows%20Phone%207%20v2.0.pdf",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-flat-design-S2",
      "kind": "source",
      "title": "Windows Phone 7 Series UI Design & Interaction Guide",
      "url": "https://blogs.windows.com/windowsdeveloper/2010/03/18/windows-phone-7-series-ui-design-interaction-guide/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-flat-design-S3",
      "kind": "source",
      "title": "iOS Human Interface Guidelines: Designing for iOS 7 (archived, updated 2013-09-18)",
      "url": "https://web.archive.org/web/20131001000000id_/https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-flat-design-S4",
      "kind": "source",
      "title": "Apple Unveils iOS 7",
      "url": "https://www.apple.com/newsroom/2013/06/10Apple-Unveils-iOS-7/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-flat-design-S5",
      "kind": "source",
      "title": "Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users",
      "url": "https://www.nngroup.com/articles/flat-design/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-flat-design-S6",
      "kind": "source",
      "title": "Flat design",
      "url": "https://en.wikipedia.org/wiki/Flat_design",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-flat-design-S7",
      "kind": "source",
      "title": "Material design: Introduction (2014 specification, archived)",
      "url": "https://web.archive.org/web/2014id_/http://www.google.com/design/spec/material-design/introduction.html",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-flat-design-W2S1",
      "kind": "source",
      "title": "Flat UI Elements Attract Less Attention and Cause Uncertainty",
      "url": "https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-flat-design-W2S2",
      "kind": "source",
      "title": "Apple - iOS 7 - Design (Wayback snapshot 2013-09-11)",
      "url": "https://web.archive.org/web/20130911100339id_/http://www.apple.com/ios/design/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-flat-design-W2S3",
      "kind": "source",
      "title": "Microsoft Metro Design Language (TechNet Wiki, archived)",
      "url": "https://learn.microsoft.com/en-us/archive/technet-wiki/8128.microsoft-metro-design-language",
      "status": "verified",
      "retrieval": "retrieved"
    }
  ],
  "relations": [
    {
      "slug": "modern-saas",
      "kind": "confused_with",
      "status": "proposed"
    },
    {
      "slug": "corporate-memphis",
      "kind": "confused_with",
      "status": "proposed"
    }
  ],
  "open": [
    {
      "kind": "missing_research",
      "question": "Is layering (iOS 7 layers, Metro parallax) Form or Interface?"
    },
    {
      "kind": "missing_research",
      "question": "Did Metro documentation itself prohibit drop shadows or gradients?"
    }
  ],
  "aesthetary_build": {
    "note": "Values Aesthetary built with. Not claims about the Aesthetic.",
    "measured": {
      "note": "Read from the page's own stylesheet at build time. Values Aesthetary built with, not claims about the Aesthetic.",
      "slug": "flat-design",
      "stylesheet": "flat-design.css",
      "bytes": 10121,
      "colours": [
        "#009688",
        "#F4762E",
        "#22364A",
        "#F7C948",
        "#F5F6F4",
        "#1D2A36",
        "#FFFFFF",
        "#53606C",
        "#00695F"
      ],
      "radii": [],
      "fontSizes": [
        "11px",
        "13px",
        "15px",
        "17px",
        "19px",
        "20px",
        "22px",
        "24px",
        "30px"
      ],
      "faces": [
        "SchibstedX"
      ],
      "tokens": [
        {
          "name": "--fd-teal",
          "value": "#009688"
        },
        {
          "name": "--fd-or",
          "value": "#F4762E"
        },
        {
          "name": "--fd-navy",
          "value": "#22364A"
        },
        {
          "name": "--fd-yel",
          "value": "#F7C948"
        },
        {
          "name": "--fd-off",
          "value": "#F5F6F4"
        },
        {
          "name": "--fd-ink",
          "value": "#1D2A36"
        },
        {
          "name": "--fd-w",
          "value": "#FFFFFF"
        },
        {
          "name": "--fd-slate",
          "value": "#53606C"
        },
        {
          "name": "--fd-dteal",
          "value": "#00695F"
        },
        {
          "name": "--fd-face",
          "value": "\"SchibstedX\", \"Helvetica Neue\", Arial, sans-serif"
        },
        {
          "name": "--fd-pad",
          "value": "clamp(22px, 4vw, 48px)"
        }
      ],
      "animates": false,
      "absent": [
        "no box-shadow anywhere",
        "no gradient anywhere",
        "no rounded corner anywhere",
        "no text-shadow anywhere",
        "nothing animates"
      ]
    },
    "design_grammar": {
      "note": "Aesthetary's translation of this record into web primitives. Every value carries a basis: \"record\" is a rule the record holds (cites names it), \"translation\" is our choice derived from the cited rules (because says how), \"not_recorded\" means the record is silent (guidance says what to do). A \"record\" value restates a claim the record holds; its standing is that claim's own kind in the record (a requirement, period practice, modern practice, or our interpretation), which the cited rule states. \"record\" does not by itself make a value a property of the language.",
      "slug": "flat-design",
      "version": "2026-09-29",
      "summary": "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.",
      "color": {
        "roles": [
          {
            "role": "ground",
            "value": "#F5F6F4",
            "use": "The light background of the theme.",
            "basis": "translation",
            "cites": [
              "claim:kcc:technique-2"
            ]
          },
          {
            "role": "ink",
            "value": "#1D2A36",
            "contrast": "13.9:1",
            "use": "Text on light hues; the dark ground.",
            "basis": "translation",
            "cites": [
              "claim:kcc:technique-2"
            ]
          },
          {
            "role": "key",
            "value": "#00695F",
            "contrast": "6.6:1 (white on it)",
            "use": "The one accent: state, primary actions, current page.",
            "basis": "translation",
            "cites": [
              "claim:kcc:technique-2",
              "claim:kcc:interface-2"
            ]
          },
          {
            "role": "teal",
            "value": "#009688",
            "use": "Large shapes only; never a text ground (white on it 3.7:1).",
            "basis": "translation",
            "cites": [
              "token_rule:color-5"
            ]
          },
          {
            "role": "orange",
            "value": "#F4762E",
            "contrast": "5.2:1 (ink on it)",
            "use": "Large shapes.",
            "basis": "translation",
            "cites": [
              "token_rule:color-5"
            ]
          },
          {
            "role": "navy",
            "value": "#22364A",
            "contrast": "12.4:1 (white on it)",
            "use": "Large shapes.",
            "basis": "translation",
            "cites": [
              "token_rule:color-5"
            ]
          },
          {
            "role": "yellow",
            "value": "#F7C948",
            "contrast": "9.3:1 (ink on it)",
            "use": "Large shapes; the focus ring.",
            "basis": "translation",
            "cites": [
              "token_rule:color-5"
            ]
          }
        ],
        "alternates": [
          {
            "label": "dark theme",
            "recorded": "a user-chosen dark or light background",
            "value": "#1D2A36",
            "basis": "record",
            "cites": [
              "claim:kcc:technique-2"
            ]
          }
        ],
        "rules": [
          {
            "rule": "Bright but limited.",
            "basis": "record",
            "cites": [
              "token_rule:color-5"
            ]
          },
          {
            "rule": "Build a theme as a dark or light background plus one accent colour.",
            "basis": "record",
            "cites": [
              "claim:kcc:technique-2"
            ]
          },
          {
            "rule": "Keep the other hues for large shapes; let only the key colour mean state.",
            "basis": "translation",
            "cites": [
              "claim:kcc:interface-2",
              "token_rule:color-5"
            ],
            "because": "One accent carries state in both canonical systems; more hues on controls would compete with it."
          }
        ]
      },
      "typography": {
        "family": {
          "stack": "system-ui, \"Segoe UI\", -apple-system, BlinkMacSystemFont, Roboto, sans-serif",
          "class": "the platform’s system sans"
        },
        "roles": [
          {
            "role": "display",
            "size": "5rem",
            "weight": 900,
            "lineHeight": "0.9",
            "case": null,
            "tracking": "-0.03em",
            "measure": null,
            "use": "Names and titles, set large."
          },
          {
            "role": "heading",
            "size": "2.5rem",
            "weight": 900,
            "lineHeight": "1",
            "case": null,
            "tracking": "-0.02em",
            "measure": null,
            "use": "Section heads."
          },
          {
            "role": "body",
            "size": "1.125rem",
            "weight": 400,
            "lineHeight": "1.55",
            "case": null,
            "tracking": null,
            "measure": "64ch",
            "use": "Reading text."
          }
        ],
        "rules": [
          {
            "rule": "Make type a primary interface element, used prominently.",
            "basis": "record",
            "cites": [
              "claim:kcc:typography-1"
            ]
          },
          {
            "rule": "Use the platform’s system sans-serif.",
            "basis": "record",
            "cites": [
              "claim:kcc:typography-2"
            ]
          },
          {
            "rule": "Let type echo airport and metro signage.",
            "basis": "record",
            "cites": [
              "claim:kcc:typography-3"
            ]
          },
          {
            "rule": "Rank by size and weight: headings jump well above the body.",
            "basis": "translation",
            "cites": [
              "token_rule:hierarchy-13"
            ],
            "because": "With elevation unavailable, rank comes from colour weight and size alone."
          }
        ]
      },
      "gridLayout": {
        "summary": "Large solid tiles on an 8px gutter, content running to the edges; one column under 901px.",
        "columns": [
          {
            "width": "901px and up",
            "columns": 6
          },
          {
            "width": "under 901px",
            "columns": 1
          }
        ],
        "gutter": "8px",
        "margin": "8px",
        "tokens": {
          "gutter": "8px"
        },
        "rules": [
          {
            "rule": "Favour ample white space and reduced clutter.",
            "basis": "record",
            "cites": [
              "claim:kcc:layout-1"
            ]
          },
          {
            "rule": "Run content to the screen edges rather than insetting it in frames.",
            "basis": "record",
            "cites": [
              "claim:kcc:layout-2"
            ]
          },
          {
            "rule": "Arrange large bright shapes in a grid.",
            "basis": "record",
            "cites": [
              "claim:kcc:layout-3"
            ]
          },
          {
            "rule": "Tile on six columns with an 8px gutter.",
            "basis": "translation",
            "cites": [
              "claim:kcc:layout-3"
            ],
            "because": "A narrow gutter keeps the shapes large and the grid legible, as Metro’s menus did."
          }
        ]
      },
      "shapeGeometry": {
        "tokens": {
          "radius": "0",
          "shadow": "none",
          "gradient": "none"
        },
        "rules": [
          {
            "rule": "No simulated depth cue: no shadow, gradient, bevel or texture.",
            "basis": "record",
            "cites": [
              "token_rule:fd-r1"
            ]
          },
          {
            "rule": "No elevation, shadow, gradient or bevel: Aesthetary’s purist reading, since iOS 7 kept translucent layers.",
            "basis": "record",
            "cites": [
              "claim:kcc:revision-surface-8"
            ]
          },
          {
            "rule": "Keep icons and UI simple with flat shapes, colour and contrast.",
            "basis": "record",
            "cites": [
              "claim:kcc:w2-form-2"
            ]
          },
          {
            "rule": "Square corners.",
            "basis": "translation",
            "cites": [
              "claim:kcc:layout-3"
            ],
            "because": "The sources do not specify a radius; square tiles keep the large shapes plain, as the room draws them."
          }
        ]
      },
      "imagery": {
        "rules": [
          {
            "rule": "Use flat vector icon sets.",
            "basis": "record",
            "cites": [
              "token_rule:imagery-7"
            ]
          },
          {
            "rule": "Draw icons as single-colour assets the system tints to the current style.",
            "basis": "record",
            "cites": [
              "claim:kcc:technique-1"
            ]
          },
          {
            "rule": "Draw icons from simple geometry at 48px in currentColor.",
            "basis": "translation",
            "cites": [
              "claim:kcc:technique-1",
              "token_rule:imagery-7"
            ],
            "because": "A single-colour asset tinted by the system is, on the web, an SVG filled with currentColor."
          },
          {
            "rule": "The sources do not specify photography.",
            "basis": "not_recorded",
            "cites": [],
            "guidance": "If photographs appear, run them full-bleed and unframed; add no filter or overlay.",
            "silence": "source"
          }
        ]
      },
      "components": {
        "button": {
          "name": "Button",
          "becomes": "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"
          },
          "states": {
            "default": "Deep teal fill, white label (6.6:1).",
            "hover": "Fill changes hue to navy.",
            "focus": "4px yellow outline, no offset.",
            "active": "Fill changes to ink.",
            "disabled": "Slate label on off-white, no fill, and the word \"unavailable\" in its accessible name."
          },
          "accessibility": [
            "White on deep teal 6.6:1.",
            "Without depth, the fill and label are the signifier: never make a primary action a bare word outside a bar."
          ],
          "values": [
            {
              "rule": "In bars, make buttons borderless: a key colour highlights state and signals interactivity.",
              "basis": "record",
              "cites": [
                "claim:kcc:interface-2"
              ]
            },
            {
              "rule": "Outside bars, give an action a solid fill, not a bare label.",
              "basis": "translation",
              "cites": [
                "claim:kcc:w2-interface-1",
                "claim:kcc:w2-interface-2"
              ],
              "because": "Flat UIs lost clickability signifiers; with elevation removed, a solid shape is the cue that remains."
            }
          ]
        },
        "card": {
          "name": "Card",
          "becomes": "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"
          },
          "states": {
            "default": "Solid hue.",
            "hover": "Slides 6px sideways and changes hue.",
            "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.",
            "The icon is aria-hidden and repeats nothing the text needs."
          ],
          "values": [
            {
              "rule": "Put content over chrome: the card is the content, with no frame around it.",
              "basis": "record",
              "cites": [
                "claim:kcc:motif-1"
              ]
            },
            {
              "rule": "Make each card one solid tile of a single hue with one icon.",
              "basis": "translation",
              "cites": [
                "claim:kcc:layout-3",
                "claim:kcc:w2-form-2"
              ],
              "because": "Metro arranged large bright shapes in a grid; a tile is that shape carrying content."
            }
          ]
        },
        "input": {
          "name": "Input",
          "becomes": "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"
          },
          "states": {
            "default": "White field, ink line.",
            "focus": "4px yellow outline.",
            "error": "Line and message in ink on an orange strip, prefixed \"Error:\".",
            "disabled": "Slate line and label."
          },
          "accessibility": [
            "A visible label on every field.",
            "The field is findable by fill and line together, not by a bevel."
          ],
          "values": [
            {
              "rule": "Bound the field with a flat fill and a solid line, never an inset shadow.",
              "basis": "translation",
              "cites": [
                "claim:kcc:interface-1",
                "claim:kcc:w2-interface-1"
              ],
              "because": "Bezels and shadows are discouraged as realistic cues; without them the field still needs a visible edge to be found."
            }
          ]
        },
        "navigation": {
          "name": "Navigation",
          "becomes": "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"
          },
          "states": {
            "default": "Ink words.",
            "hover": "Key colour.",
            "focus": "4px yellow outline.",
            "current": "Bold in the key colour with a solid bar beneath, and aria-current."
          },
          "accessibility": [
            "aria-current on the current page.",
            "The bar beneath repeats the colour cue so state is not colour alone."
          ],
          "values": [
            {
              "rule": "Use a key colour to highlight state.",
              "basis": "record",
              "cites": [
                "claim:kcc:interface-2"
              ]
            },
            {
              "rule": "Make type a primary interface element: the words are the navigation.",
              "basis": "record",
              "cites": [
                "claim:kcc:typography-1"
              ]
            }
          ]
        }
      },
      "motion": {
        "spec": {
          "durations": {
            "state": "200ms"
          },
          "easing": {
            "state": "ease"
          },
          "transforms": "translateX only",
          "entrance": "none",
          "hover": "A tile slides 6px sideways and changes hue.",
          "reducedMotion": "No slide; the hue change alone."
        },
        "rules": [
          {
            "rule": "Animate transitions: motion is a named principle of the canonical releases.",
            "basis": "record",
            "cites": [
              "claim:kcc:motion-1"
            ]
          },
          {
            "rule": "Depth-implying motion is part of the history: parallax panoramas, transitions that convey depth.",
            "basis": "record",
            "cites": [
              "claim:kcc:motion-2"
            ]
          },
          {
            "rule": "Under the purist reading, move in the plane only: position and colour.",
            "basis": "translation",
            "cites": [
              "claim:kcc:revision-surface-8",
              "claim:kcc:motion-2"
            ],
            "because": "Zero depth is our reading, so this grammar keeps motion flat as well; the historical releases did not."
          }
        ]
      },
      "dimensions": [
        {
          "key": "depth",
          "label": "How flat",
          "summary": "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.",
          "values": [
            {
              "rule": "iOS 7 kept translucent, blurred layers: the flat label does not imply zero depth historically.",
              "basis": "record",
              "cites": [
                "claim:kcc:interface-3"
              ]
            },
            {
              "rule": "Semi-flat keeps subtle shadows, highlights and layers; the fully flat end uses none.",
              "basis": "record",
              "cites": [
                "claim:kcc:boundary-2"
              ]
            },
            {
              "rule": "Material Design is an explicit depth system, not this.",
              "basis": "record",
              "cites": [
                "claim:kcc:boundary-1"
              ]
            }
          ]
        },
        {
          "key": "signifiers",
          "label": "What is clickable",
          "summary": "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.",
          "values": [
            {
              "rule": "Flat UIs coincided with a loss of signifiers that tell users what is clickable.",
              "basis": "record",
              "cites": [
                "claim:kcc:w2-interface-1"
              ]
            },
            {
              "rule": "Weak signifiers cost users time: 22% longer and 25% more fixations in one study.",
              "basis": "record",
              "cites": [
                "claim:kcc:w2-interface-2"
              ]
            },
            {
              "rule": "Signal every control without depth: solid fill for actions, the key colour for state, underlines on links in text.",
              "basis": "translation",
              "cites": [
                "claim:kcc:w2-interface-1",
                "claim:kcc:interface-2"
              ],
              "because": "Depth is off the table in the purist reading, so the cue has to come from colour, shape and words."
            }
          ]
        }
      ],
      "notRecorded": [
        {
          "category": "shapeGeometry",
          "what": "Corner radius",
          "why": "Not specified by the source; square is our choice."
        },
        {
          "category": "imagery",
          "what": "Photography",
          "why": "The record documents icons, not photographs."
        },
        {
          "category": "layout",
          "what": "Density",
          "why": "Not specified by the source."
        }
      ],
      "silence": {
        "color": "source",
        "typography": "source",
        "gridLayout": "source",
        "shapeGeometry": "source",
        "imagery": "source",
        "components": "source",
        "motion": "source"
      },
      "uiNote": "The record documents interface conventions for Flat Design. These four components are contemporary builds on those conventions, not historical artefacts."
    }
  }
}