{
  "contract": "aesthetary.record/1.0",
  "record_spec": "1.1.0",
  "semantics": {
    "vocabulary": "aesthetary.public-evidence/1.0",
    "definitions": "vocabulary.json"
  },
  "slug": "web-brutalism",
  "name": "Web Brutalism",
  "identity": {
    "definition": {
      "state": "resolved",
      "text": "The purist strand of brutalist web design, a label Pascal Deville coined in 2014: sites that take 'truth to materials' from brutalist architecture and build with the plainest markup, leaving HTML (and a little CSS) exposed as the raw material, the look of light backgrounds, black text and blue links. Reading zero radius, harsh contrast and oversized system type as its signature, and as four deliberate removals, is Aesthetary's reading."
    },
    "scope": {
      "state": "resolved",
      "text": "The visual register of the purist strand of brutalist web design: bare, near-unstyled HTML exposed as material. Zero radius, harsh contrast and oversized system type are Aesthetary's reading; Neo-Brutalism stays separate.",
      "ruling": "D0-1"
    },
    "aliases": [
      "brutalist web",
      "raw HTML",
      "unstyled"
    ],
    "layer_verdict": {
      "state": "ruled",
      "value": "umbrella_or_family",
      "ruling": "D0-1"
    }
  },
  "native_medium": {
    "state": "resolved",
    "value": [
      "screen"
    ],
    "ruling": null
  },
  "research": {
    "line": "partly_sourced",
    "text": "Partly sourced",
    "sentence": "11 sources 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": "not_canonically_specified",
      "importance": "unknown",
      "posture_basis": "synthesis",
      "label": {
        "text": "Not specified by the source"
      }
    },
    {
      "area": "surface",
      "state": "resolved",
      "canon": "specified",
      "importance": "unknown",
      "posture_basis": null,
      "label": {
        "text": "Specified"
      }
    },
    {
      "area": "interface",
      "state": "resolved",
      "canon": "specified",
      "importance": "unknown",
      "posture_basis": null,
      "label": {
        "text": "Specified"
      }
    },
    {
      "area": "motion",
      "state": "resolved",
      "canon": "open_question",
      "importance": "unknown",
      "posture_basis": "synthesis",
      "label": {
        "text": "Open question"
      }
    },
    {
      "area": "motif",
      "state": "owed",
      "owed": "research",
      "why": "No source has been examined for this yet."
    },
    {
      "area": "technique",
      "state": "resolved",
      "canon": "specified",
      "importance": "unknown",
      "posture_basis": null,
      "label": {
        "text": "Specified"
      }
    },
    {
      "area": "form",
      "state": "owed",
      "owed": "research",
      "why": "No source has been examined for this yet."
    },
    {
      "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": "layout-3",
      "text": "Composition: document flow made visible.",
      "role": "rule",
      "area": "layout",
      "basis": "inherited",
      "support": {
        "state": "cited",
        "for": [
          "06QPZTFKFT7KMSMS2DS8D7RZVH",
          "5A6E3R2PXKRSJMW16WF8M0CRAG",
          "6GAKJ5RQ2MZH7J4M7PYR2YKENV"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "catalogue",
        "mark": "attached",
        "text": "From our catalogue entry · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "typography-4",
      "text": "Typography: the system's own faces at scale, its sans stack or its monospace.",
      "role": "rule",
      "area": "typography",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "6GAKJ5RQ2MZH7J4M7PYR2YKENV"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "hierarchy-13",
      "text": "CURATORIAL: rank by raw scale and rule weight. Type sizes jump rather than step; a heading is three times the body, not 1.4.",
      "role": "rule",
      "area": "hierarchy",
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "surface-8",
      "text": "Form / motif / surface / technique: zero radius; zero elevation.",
      "role": "rule",
      "area": null,
      "basis": "inherited",
      "support": {
        "state": "inherited",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "catalogue",
        "text": "From our catalogue entry"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "motion-14",
      "text": "CURATORIAL from intent: instant state changes, no easing. Transitions are a comfort device and the register refuses comfort.",
      "role": "rule",
      "area": "motion",
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "intent",
      "text": "The conventions of contemporary web design are a costume, and removing them is an argument. Showing the document's real structure — undecorated, unrounded, unsoftened — is a position about honesty, taken by someone who could have done otherwise.",
      "role": "argument",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "gestalt",
      "text": "Undisguised document structure — no border radius anywhere, no shadow, hard unmodulated contrast, system fonts used at conspicuous sizes, and layout that follows the markup rather than concealing it. The diagnostic condition is legible intent: the removals are emphatic and somebody is meant to notice them, which is why the register usually overshoots plainness into something loud. Utilitarian arrives at a similar surface without having decided anything. Anti-Design breaks the structure; this exposes it intact.",
      "role": "diagnostic",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "cited",
        "for": [
          "3SFWMGEXBGX4ZJ6PGHQ01VF827"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "failure-1",
      "text": "No border radius.",
      "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 shadow or elevation.",
      "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 easing or transition.",
      "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 webfont chosen for warmth.",
      "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 muted palette.",
      "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 decorative whitespace.",
      "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": "Against Utilitarian: argued versus unexamined. Inherited verbatim. Against Anti-Design: exposure versus breakage. This keeps structure legible; Anti-Design deliberately breaks alignment and legibility. Anti-signature: soften one corner and the position collapses. Break the alignment and it becomes Anti-Design.",
      "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-8",
      "text": "Not open: radius.",
      "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: 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-10",
      "text": "Not open: easing..",
      "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 rounded corners, soft shadow, decorative easing, and the whole grammar of comfort that marks a page as professionally designed.",
      "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: Approachability; Client acceptability; Being mistaken for laziness",
      "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 viewer fluent enough in web convention to register what has been removed.",
      "role": "argument",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "gestalt-boundary",
      "text": "Against Utilitarian: argued versus unexamined. Inherited verbatim. Against Anti-Design: exposure versus breakage. This keeps structure legible; Anti-Design deliberately breaks alignment and legibility. Anti-signature: soften one corner and the position collapses. Break the alignment and it becomes Anti-Design.",
      "role": "boundary",
      "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": "Plainness as a statement; Utilitarian's plainness is unexamined",
      "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: rebellious, 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: Typography: system stacks · Layout: document flow",
      "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": "typography-block",
      "text": "Typography: system stacks; role all",
      "role": "rule",
      "area": "typography",
      "basis": "inherited",
      "support": {
        "state": "inherited",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "catalogue",
        "text": "From our catalogue entry"
      },
      "derives_from": [],
      "ruling": "D0-3 C2 typo"
    },
    {
      "id": "surface-8.interface",
      "text": "Interface: zero radius, 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": "imagery-reason",
      "text": "Neither demanded nor forbidden.",
      "role": "context",
      "area": "imagery",
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "freedom-imagery",
      "text": "Declared freedom: imagery, presence or absence.",
      "role": "context",
      "area": "imagery",
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "declared-freedom",
      "text": "Declared freedom: how far type scale overshoots.",
      "role": "context",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:surface-1",
      "text": "The material shown is the web's own: HTML and, to a lesser extent, CSS left raw, paralleling brutalist architecture's bare building materials.",
      "role": "rule",
      "area": "surface",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-web-brutalism-B1",
          "kcc-web-brutalism-B6"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "purist strand (O'Brien's 'l'Internet brut')"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:surface-2",
      "text": "This aspect of brutalism is sometimes expressed as bare-bones, almost naked HTML with raw or nonexistent styling; excluding applied texture or grain is Aesthetary's inference.",
      "role": "negative",
      "area": "surface",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-web-brutalism-B3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:technique-1",
      "text": "Pages are built from the purest markup elements available, with little or no custom styling.",
      "role": "rule",
      "area": "technique",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-web-brutalism-B1",
          "kcc-web-brutalism-B3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "purist strand as described by Deville"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:technique-2",
      "text": "The build stays legible from the source: a novice can follow how the page is put together.",
      "role": "diagnostic",
      "area": "technique",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-web-brutalism-B1"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:technique-3",
      "text": "Default, unstyled HTML is itself readable on all devices; styling is added only to solve a specific problem.",
      "role": "context",
      "area": "technique",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-web-brutalism-B2"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "Copeland's guidelines, which are behavioural rather than visual"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:technique-4",
      "text": "Several exemplars never set out to be brutalist: their style was a result of the limitations of HTML and CSS at the time, not an artistic choice.",
      "role": "context",
      "area": "technique",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-web-brutalism-B3",
          "kcc-web-brutalism-B1"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "separates the historical exemplars from later deliberate practice"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:motion-1",
      "text": "Documented animation belongs to the antidesign strand ('unnecessary distracting animations'), which the approved scope excludes.",
      "role": "context",
      "area": "motion",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-web-brutalism-B3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "antidesign / 'anti-ist' strand, out of scope"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:motif-1",
      "text": "The practitioner guidelines allow decoration when needed and reject decoration for its own sake, which leaves ornament conditional rather than forbidden.",
      "role": "context",
      "area": "motif",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-web-brutalism-B2"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "Copeland's guidelines, not Deville's purists"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:motif-2",
      "text": "The architectural parent is defined by bare materials over decorative design.",
      "role": "context",
      "area": "motif",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-web-brutalism-B6"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "architecture, not the web strand"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:w2-motion-1",
      "text": "Deville's Brutalist Websites collection lists 'Motherfucking Website'.",
      "role": "context",
      "area": "motion",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-web-brutalism-W2S1"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "Deville's collection also includes antidesign-leaning sites; the listing places this page in the brutalist canon, not specifically in the purist strand."
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:w2-motion-2",
      "text": "That page explicitly rejects decorative animation: hover-animated banners and 'bobbing' buttons driven by scroll plugins.",
      "role": "negative",
      "area": "motion",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-web-brutalism-W2S2"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "One exemplar; the page calls itself satire."
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:w2-motion-3",
      "text": "The thesis describes design using few features beyond websites' default appearance, and names animations and customised cursors as distracting features.",
      "role": "diagnostic",
      "area": "motion",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-web-brutalism-W2S3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:definition",
      "text": "The purist strand of brutalist web design, a label Pascal Deville coined in 2014: sites that take 'truth to materials' from brutalist architecture and build with the plainest markup, leaving HTML (and a little CSS) exposed as the raw material, the look of light backgrounds, black text and blue links. Reading zero radius, harsh contrast and oversized system type as its signature, and as four deliberate removals, is Aesthetary's reading.",
      "role": "definition",
      "area": null,
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-web-brutalism-B1",
          "kcc-web-brutalism-B3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "dcc:color-5",
      "text": "Colour: the browser's own defaults, light ground, black text, blue links; reading it as harsh contrast is ours.",
      "role": "rule",
      "area": "color",
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [
        "kcc:definition",
        "kcc:technique-1"
      ],
      "ruling": null
    },
    {
      "id": "dcc:wb-r1",
      "text": "Web Brutalism is contested as a term: its coiner describes three camps under one name — purists (truth to materials, the purest markup), UX minimalists (efficiency and performance) and anti-ists. This record's rules describe the purist surface: raw HTML shown as material, unconcerned rather than broken. The anti-ist camp is Anti-Design. Which camps belong under the name is still open.",
      "role": "context",
      "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": "06QPZTFKFT7KMSMS2DS8D7RZVH",
      "kind": "source",
      "title": "Brutalist Web Design — David Bryant Copeland",
      "url": "https://brutalist-web.design/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "5A6E3R2PXKRSJMW16WF8M0CRAG",
      "kind": "source",
      "title": "Frederick O'Brien, The Split Personality Of Brutalist Web Development (8 Jan 2020)",
      "url": "https://www.smashingmagazine.com/2020/01/split-personality-brutalist-web-development/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "6GAKJ5RQ2MZH7J4M7PYR2YKENV",
      "kind": "source",
      "title": "Kate Moran, Brutalism and Antidesign (5 Nov 2017)",
      "url": "https://www.nngroup.com/articles/brutalism-antidesign/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "3SFWMGEXBGX4ZJ6PGHQ01VF827",
      "kind": "source",
      "title": "Hayat Sheikh, Neobrutalism: Definition and Best Practices (11 Apr 2025)",
      "url": "https://www.nngroup.com/articles/neobrutalism/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-web-brutalism-B1",
      "kind": "source",
      "title": "The Split Personality Of Brutalist Web Development",
      "url": "https://www.smashingmagazine.com/2020/01/split-personality-brutalist-web-development/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-web-brutalism-B2",
      "kind": "source",
      "title": "Guidelines for Brutalist Web Design",
      "url": "https://brutalist-web.design/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-web-brutalism-B3",
      "kind": "source",
      "title": "Brutalism and Antidesign",
      "url": "https://www.nngroup.com/articles/brutalism-antidesign/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-web-brutalism-B6",
      "kind": "source",
      "title": "Brutalist architecture",
      "url": "https://en.wikipedia.org/wiki/Brutalist_architecture",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-web-brutalism-W2S1",
      "kind": "source",
      "title": "Brutalist Websites",
      "url": "https://brutalistwebsites.com/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-web-brutalism-W2S2",
      "kind": "source",
      "title": "Motherfucking Website",
      "url": "https://motherfuckingwebsite.com/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-web-brutalism-W2S3",
      "kind": "source",
      "title": "The rise of Brutalism and Antidesign: And their implications on web design history",
      "url": "http://www.diva-portal.org/smash/get/diva2:1304924/FULLTEXT01.pdf",
      "status": "verified",
      "retrieval": "retrieved"
    }
  ],
  "relations": [
    {
      "slug": "utilitarian",
      "kind": "confused_with",
      "status": "proposed"
    },
    {
      "slug": "anti-design",
      "kind": "confused_with",
      "status": "proposed"
    },
    {
      "slug": "neo-brutalism",
      "kind": "confused_with",
      "status": "proposed"
    }
  ],
  "open": [
    {
      "kind": "open_question",
      "question": "Does the purist strand specify motion or its absence?"
    },
    {
      "kind": "missing_research",
      "question": "Is 'harsh contrast; no mid-tones' (color-5) evidenced for the purist strand?"
    },
    {
      "kind": "missing_research",
      "question": "What counts as the 'material' of a website?"
    }
  ],
  "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": "web-brutalism",
      "stylesheet": "web-brutalism.css",
      "bytes": 11491,
      "colours": [
        "#FFFFFF",
        "#000000",
        "#0000EE",
        "#551A8B"
      ],
      "radii": [
        "4px",
        "8px",
        "24px"
      ],
      "fontSizes": [
        "13px",
        "14px",
        "18px",
        "19px",
        "20px",
        "22px",
        "28px"
      ],
      "faces": [
        "Georgia"
      ],
      "tokens": [
        {
          "name": "--wb-ground",
          "value": "#FFFFFF"
        },
        {
          "name": "--wb-ink",
          "value": "#000000"
        },
        {
          "name": "--wb-link",
          "value": "#0000EE"
        },
        {
          "name": "--wb-visited",
          "value": "#551A8B"
        },
        {
          "name": "--wb-rule",
          "value": "4px"
        },
        {
          "name": "--wb-pad",
          "value": "24px"
        },
        {
          "name": "--wb-face",
          "value": "system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif"
        },
        {
          "name": "--wb-mono",
          "value": "ui-monospace, Menlo, Consolas, monospace"
        },
        {
          "name": "--web-brutalism",
          "value": ":before {\n  content: \"<\" attr(data-tag) \">\""
        },
        {
          "name": "--8",
          "value": "checked) .wb-spec { border-radius: 8px"
        },
        {
          "name": "--24",
          "value": "checked) .wb-spec { border-radius: 24px"
        },
        {
          "name": "--0",
          "value": "checked) .wb-rv--0,\n.wb-blk:has(.wb-r-in--8:checked) .wb-rv--8,\n.wb-blk:has(.wb-r-in--24:checked) .wb-rv--24 { display: block"
        }
      ],
      "animates": false,
      "absent": [
        "no gradient 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": "web-brutalism",
      "version": "2026-09-29",
      "summary": "A starting grammar for a website in Web Brutalism: the plainest markup, the document's own structure left showing, the browser's light ground, black text and blue links, system fonts at conspicuous sizes, nothing softened and nothing eased.",
      "color": {
        "roles": [
          {
            "role": "ground",
            "value": "#FFFFFF",
            "use": "The page: a light ground.",
            "basis": "record",
            "cites": [
              "claim:kcc:definition"
            ]
          },
          {
            "role": "ink",
            "value": "#000000",
            "contrast": "21:1",
            "use": "Text: black.",
            "basis": "record",
            "cites": [
              "claim:kcc:definition"
            ]
          },
          {
            "role": "link",
            "value": "#0000EE",
            "contrast": "9.4:1",
            "use": "Links and focus: the browser default blue.",
            "basis": "record",
            "cites": [
              "claim:kcc:definition"
            ]
          }
        ],
        "alternates": [],
        "rules": [
          {
            "rule": "Use the browser's own defaults: a light ground, black text, blue links. Choose no palette.",
            "basis": "record",
            "cites": [
              "claim:kcc:definition"
            ]
          }
        ]
      },
      "typography": {
        "family": {
          "stack": "system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
          "class": "none chosen: the platform decides"
        },
        "roles": [
          {
            "role": "heading",
            "size": "3.1875rem",
            "weight": 700,
            "lineHeight": "1",
            "case": null,
            "tracking": null,
            "measure": null,
            "use": "Headings: three times the body."
          },
          {
            "role": "body",
            "size": "1.0625rem",
            "weight": 400,
            "lineHeight": "1.5",
            "case": null,
            "tracking": null,
            "measure": null,
            "use": "Everything else."
          }
        ],
        "rules": [
          {
            "rule": "Use the system's own faces, its sans stack or its monospace; choose no typeface.",
            "basis": "record",
            "cites": [
              "typography",
              "token_rule:typography-4"
            ]
          },
          {
            "rule": "Make a heading three times the body size; sizes jump rather than step.",
            "basis": "record",
            "cites": [
              "token_rule:hierarchy-13"
            ]
          }
        ]
      },
      "gridLayout": {
        "summary": "No grid: the layout follows the markup and lets the document's flow show.",
        "rules": [
          {
            "rule": "Stack content in source order; let the document flow be visible.",
            "basis": "record",
            "cites": [
              "token_rule:layout-3"
            ]
          },
          {
            "rule": "The sources do not specify a column system.",
            "basis": "not_recorded",
            "cites": [],
            "guidance": "Do not add a grid to tidy the page; if one is needed, state it as a decision.",
            "silence": "source"
          }
        ]
      },
      "shapeGeometry": {
        "tokens": {
          "radius": "0",
          "shadow": "none",
          "border": "2px solid #000"
        },
        "rules": [
          {
            "rule": "border-radius: 0 and box-shadow: none, everywhere.",
            "basis": "record",
            "cites": [
              "token_rule:surface-8"
            ]
          },
          {
            "rule": "Draw boundaries as heavy 2px black lines.",
            "basis": "translation",
            "cites": [
              "token_rule:hierarchy-13"
            ],
            "because": "Rank by rule weight; a heavy line is a rule the reader is meant to notice."
          }
        ]
      },
      "imagery": {
        "rules": [
          {
            "rule": "The sources do not specify imagery.",
            "basis": "not_recorded",
            "cites": [],
            "guidance": "If images appear, show them as the browser would: no frame, no filter.",
            "silence": "source"
          }
        ]
      },
      "components": {
        "button": {
          "name": "Button",
          "becomes": "The browser's own button, left almost alone: a black box, system type, no rounding, no easing.",
          "anatomy": [
            "2px solid black border",
            "system font at body size",
            "no radius, no shadow"
          ],
          "tokens": {
            "border": "2px solid #000",
            "radius": "0",
            "shadow": "none",
            "transition": "none"
          },
          "states": {
            "default": "White field, black border, black label.",
            "hover": "Inverts to black field, white label. Instantly.",
            "focus": "3px blue outline (the default link blue).",
            "active": "Stays inverted.",
            "disabled": "Border and label struck through, not faded."
          },
          "accessibility": [
            "Contrast is 21:1 in both states.",
            "Disabled is shown by a strike-through, not only by fading."
          ],
          "values": [
            {
              "rule": "border-radius: 0 and box-shadow: none.",
              "basis": "record",
              "cites": [
                "token_rule:surface-8"
              ]
            },
            {
              "rule": "Change state instantly: transition: none.",
              "basis": "record",
              "cites": [
                "token_rule:motion-14"
              ]
            },
            {
              "rule": "Invert black and white on hover instead of tinting.",
              "basis": "translation",
              "cites": [
                "claim:dcc:color-5"
              ],
              "because": "The palette is the browser's defaults (light ground, black text, blue links); an inversion stays inside it where a tint would add a colour."
            }
          ]
        },
        "card": {
          "name": "Card",
          "becomes": "Not a card: a block with its outline left showing, stacked in document order.",
          "anatomy": [
            "2px black outline",
            "heading at raw scale",
            "plain paragraph",
            "underlined link"
          ],
          "tokens": {
            "border": "2px solid #000",
            "radius": "0",
            "padding": "1rem"
          },
          "states": {
            "default": "Outlined block.",
            "hover": "The outline thickens to 6px.",
            "focus": "3px blue outline."
          },
          "accessibility": [
            "Links stay underlined.",
            "Blocks follow source order, so reading order and visual order agree."
          ],
          "values": [
            {
              "rule": "Let the layout follow the markup: blocks stack in document order.",
              "basis": "record",
              "cites": [
                "token_rule:layout-3"
              ]
            },
            {
              "rule": "Leave each block's outline visible.",
              "basis": "translation",
              "cites": [
                "token_rule:layout-3",
                "gestalt"
              ],
              "because": "Document flow made visible: the boxes the browser draws are shown, not hidden."
            }
          ]
        },
        "input": {
          "name": "Input",
          "becomes": "A native field with a heavy black border and its label as plain text above.",
          "anatomy": [
            "2px black border",
            "system font",
            "label as plain text"
          ],
          "tokens": {
            "border": "2px solid #000",
            "radius": "0",
            "font": "system"
          },
          "states": {
            "default": "2px black.",
            "focus": "3px blue outline.",
            "error": "Black field, white message: \"Error: …\".",
            "disabled": "Struck through."
          },
          "accessibility": [
            "A visible label on every field.",
            "Error text, not colour."
          ],
          "values": [
            {
              "rule": "Use the system font for entry text.",
              "basis": "translation",
              "cites": [
                "typography"
              ],
              "because": "Our translation of the record's typography block into this web primitive; the block is a catalogue phrase, not a rule."
            },
            {
              "rule": "No radius on the field.",
              "basis": "record",
              "cites": [
                "token_rule:surface-8"
              ]
            }
          ]
        },
        "navigation": {
          "name": "Navigation",
          "becomes": "A list of underlined links, left as a list.",
          "anatomy": [
            "links underlined, default blue",
            "separated by a slash or a line break",
            "current page as plain bold text, not a link"
          ],
          "tokens": {
            "link": "#0000EE",
            "underline": "always",
            "separator": "/"
          },
          "states": {
            "default": "Underlined blue.",
            "hover": "Black background, white text.",
            "focus": "3px blue outline.",
            "current": "Bold black text, no link."
          },
          "accessibility": [
            "Underlined links need no colour to be found.",
            "aria-current on the current page."
          ],
          "values": [
            {
              "rule": "Leave links underlined in the browser's default blue.",
              "basis": "record",
              "cites": [
                "claim:kcc:definition"
              ]
            },
            {
              "rule": "Rank by raw scale and rule weight, not by colour.",
              "basis": "record",
              "cites": [
                "token_rule:hierarchy-13"
              ]
            }
          ]
        }
      },
      "motion": {
        "spec": {
          "durations": {
            "state": "0ms"
          },
          "easing": {
            "state": "none"
          },
          "transforms": "none",
          "entrance": "none",
          "hover": "An instant swap.",
          "reducedMotion": "Nothing changes: there is no motion to reduce."
        },
        "rules": [
          {
            "rule": "Change state instantly, with no easing.",
            "basis": "record",
            "cites": [
              "token_rule:motion-14"
            ]
          },
          {
            "rule": "Add no decorative animation: a thesis on brutalist web design names animations and custom cursors as distracting features.",
            "basis": "record",
            "cites": [
              "claim:kcc:w2-motion-3"
            ]
          },
          {
            "rule": "Whether the purist strand specifies motion or its absence is an open question.",
            "basis": "not_recorded",
            "cites": [],
            "guidance": "Treat the instant swap as our reading; do not cite it as the strand's rule.",
            "silence": "source"
          }
        ]
      },
      "dimensions": [
        {
          "key": "exposure",
          "label": "Exposure",
          "summary": "The removals are the point, and they are meant to be noticed. Soften one corner and the position collapses.",
          "values": [
            {
              "rule": "Make the removals emphatic: no radius, no shadow, no easing, visible structure.",
              "basis": "translation",
              "cites": [
                "gestalt",
                "intent"
              ],
              "because": "Our translation of the record's recognition signature into this web primitive; the record states it as the look, not as a rule."
            },
            {
              "rule": "Refuse rounded corners, soft shadow, decorative easing and the grammar of comfort.",
              "basis": "translation",
              "cites": [
                "intent"
              ],
              "because": "Our translation of the record's argument (intent) into this web primitive; the record argues it, it does not state it as a rule."
            }
          ]
        },
        {
          "key": "register",
          "label": "Which Brutalism",
          "summary": "Three camps share the name, by its coiner's account, and which of them the record covers is contested. This grammar is the purist camp; the anti-ist camp is Anti-Design.",
          "values": [
            {
              "rule": "Build the purist register: raw HTML shown as material, unconcerned rather than broken.",
              "basis": "record",
              "cites": [
                "claim:dcc:wb-r1"
              ]
            },
            {
              "rule": "Build from the purest markup elements available, with little or no custom styling; add styling only to solve a specific problem.",
              "basis": "record",
              "cites": [
                "claim:kcc:technique-1",
                "claim:kcc:technique-3"
              ]
            },
            {
              "rule": "Keep contrast, visible focus, underlined links and labels.",
              "basis": "translation",
              "cites": [
                "claim:dcc:wb-r1"
              ],
              "because": "The purist camp shows the material without breaking it; so does Aesthetary."
            }
          ]
        }
      ],
      "notRecorded": [
        {
          "category": "imagery",
          "what": "Imagery",
          "why": "Unknown."
        },
        {
          "category": "gridLayout",
          "what": "A column system",
          "why": "The record holds document flow, not a grid."
        },
        {
          "category": "motion",
          "what": "Whether the purist strand specifies motion",
          "why": "An open question on the record; the instant swap is our reading."
        },
        {
          "category": "components",
          "what": "Interface conventions",
          "why": "The research record does not establish them. The four components are contemporary translations of documented rules."
        }
      ],
      "silence": {
        "color": "source",
        "typography": "source",
        "gridLayout": "source",
        "shapeGeometry": "source",
        "imagery": "source",
        "components": "source",
        "motion": "source"
      },
      "uiNote": "The record sets interface conventions for Web Brutalism. These four components are contemporary builds on them, not historical artefacts."
    }
  }
}