{
  "contract": "aesthetary.record/1.0",
  "record_spec": "1.1.0",
  "semantics": {
    "vocabulary": "aesthetary.public-evidence/1.0",
    "definitions": "vocabulary.json"
  },
  "slug": "neo-brutalism",
  "name": "Neo-Brutalism",
  "identity": {
    "definition": {
      "state": "resolved",
      "text": "Thick black outlines, hard unblurred shadows, clashing candy colour, chunky buttons"
    },
    "scope": {
      "state": "resolved",
      "text": "The codified phase of neo-brutalism in web and product interface: the rules fixed by style guides and component kits (neubrutalism.com, neobrutalism.dev and similar) — thick outlines of one stroke width, hard unblurred offset shadows, square corners and loud flat fills. The trend as first named in 2022 was looser (desaturated colour, inconsistent line thickness and corner roundness, 'very relaxed rules'); it is kept as history and is not bound by these rules.",
      "ruling": "D0-1"
    },
    "aliases": [
      "neubrutalism",
      "neo brutalist",
      "Gumroad style"
    ],
    "layer_verdict": {
      "state": "ruled",
      "value": "coherent_visual_language",
      "ruling": "D0-1"
    }
  },
  "native_medium": {
    "state": "resolved",
    "value": [
      "screen"
    ],
    "evidence": {
      "quote": "web",
      "field": "register_context[kind=medium]"
    },
    "ruling": "AM2-1 (2026-09-27)"
  },
  "research": {
    "line": "partly_sourced",
    "text": "Partly sourced",
    "sentence": "9 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": "synthesis",
      "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": "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": "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": "CURATORIAL: rank by outline weight and shadow offset — the element with the biggest offset sits \"highest\". Quoted depth used as a ranking system.",
      "role": "rule",
      "area": "hierarchy",
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "scope": {
        "practice": "codified component-kit phase (c. 2022 on)"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "color-5",
      "text": "Colour: saturated, high-contrast flat colour.",
      "role": "rule",
      "area": "color",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "3SFWMGEXBGX4ZJ6PGHQ01VF827",
          "5YGBVKP6NV7DY8XTWXXSESKTQ5"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "codified component-kit phase (c. 2022 on)"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "motion-14",
      "text": "CURATORIAL: elements pressing into their own shadow on interaction — the offset collapsing to zero. Native to the shadow logic, and not generic easing.",
      "role": "rule",
      "area": "motion",
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "scope": {
        "practice": "codified component-kit phase (c. 2022 on)"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "nb-r1",
      "text": "The offset shadow is solid and unblurred — a displaced shape behind the element, never a soft elevation. It quotes depth rather than simulating it.",
      "role": "rule",
      "area": "interface",
      "basis": "synthesis",
      "support": {
        "state": "cited",
        "for": [
          "3SFWMGEXBGX4ZJ6PGHQ01VF827",
          "5YGBVKP6NV7DY8XTWXXSESKTQ5"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "scope": {
        "practice": "codified component-kit phase (c. 2022 on)"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "nb-outline",
      "text": "Components carry thick, solid, dark outlines with square corners.",
      "role": "rule",
      "area": "surface",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "3SFWMGEXBGX4ZJ6PGHQ01VF827",
          "5YGBVKP6NV7DY8XTWXXSESKTQ5"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "codified component-kit phase (c. 2022 on)"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "intent",
      "text": "Interface conventions can be exaggerated into ornament. Taking the border, the shadow and the button — the plainest furniture of a web page — and making them thick, hard and loud turns usability signals into decoration while leaving them perfectly usable.",
      "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": "Thick uniform black outlines around every element, hard offset shadows with no blur at all, saturated candy colours on a flat ground, and chunky oversized buttons that look pressable to the point of parody. The diagnostic condition is the unblurred offset shadow: a solid shape displaced behind the element, never a soft elevation — it quotes depth rather than simulating it. Web Brutalism strips styling away; this piles it on. Memphis assembles unrelated shapes with no compositional relationship; this is ordinary interface furniture, exaggerated.",
      "role": "diagnostic",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "cited",
        "for": [
          "3SFWMGEXBGX4ZJ6PGHQ01VF827",
          "18YG42J1YKSBEM6G2DG7BNK5P1"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "scope": {
        "practice": "codified component-kit phase (c. 2022 on)"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "failure-1",
      "text": "No blurred 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 soft or muted palette.",
      "role": "negative",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "scope": {
        "practice": "codified component-kit phase (c. 2022 on)"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "failure-3",
      "text": "No thin or varied outline weight.",
      "role": "negative",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "scope": {
        "practice": "codified component-kit phase (c. 2022 on)"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "failure-4",
      "text": "No subtlety.",
      "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 stripped-back plainness.",
      "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": "Not open: blurring the 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-8",
      "text": "Not open: softening the outline.",
      "role": "negative",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "scope": {
        "practice": "codified component-kit phase (c. 2022 on)"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "failure-9",
      "text": "Not open: stripping the styling..",
      "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 softness, subtlety, blur, and the tasteful neutrality of the contemporary product default.",
      "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: Seriousness; Enterprise credibility; Ageing well",
      "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 who knows the conventional version and enjoys seeing it overplayed.",
      "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": "Heavily styled, where Web Brutalism is unstyled",
      "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, rebellious",
      "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.interface",
      "text": "Interface: hard-shadow systems, thick outline",
      "role": "rule",
      "area": "interface",
      "basis": "inherited",
      "support": {
        "state": "inherited",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "catalogue",
        "text": "From our catalogue entry"
      },
      "scope": {
        "practice": "codified component-kit phase (c. 2022 on)"
      },
      "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-layout",
      "text": "Declared freedom: composition.",
      "role": "context",
      "area": "layout",
      "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.",
      "role": "context",
      "area": "imagery",
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:layout-1",
      "text": "Neo-brutalism is defined by high contrast, blocky layouts, bold colours, thick borders and 'unpolished' elements, and is more colourful and orderly than brutalist web design.",
      "role": "rule",
      "area": "layout",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-neo-brutalism-S1",
          "kcc-neo-brutalism-S2"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "2022–2025 descriptions"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:layout-3",
      "text": "One self-published guide prescribes an underlying grid that is locally disrupted by offset, asymmetric or overscaled modules.",
      "role": "context",
      "area": "layout",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-neo-brutalism-S3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "prescriptive, single self-published source"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:typography-1",
      "text": "Bold, 'unpolished' elements often include quirky or slightly eccentric typefaces, balanced by generous whitespace.",
      "role": "rule",
      "area": "typography",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-neo-brutalism-S1",
          "kcc-neo-brutalism-S2",
          "kcc-neo-brutalism-S8"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:typography-2",
      "text": "Monospace fonts may appear as a nostalgic early-interface reference.",
      "role": "context",
      "area": "typography",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-neo-brutalism-S2"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:typography-3",
      "text": "One self-published guide pushes display type to oversized sans-serif headlines with abrupt scale shifts.",
      "role": "context",
      "area": "typography",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-neo-brutalism-S3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "self-published prescriptive guide only"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:motion-2",
      "text": "A codified guide gives the button press as the element moving into its own shadow, with the shadow disappearing.",
      "role": "context",
      "area": "motion",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-neo-brutalism-S3"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "single self-published prescriptive source"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:form-1",
      "text": "Depth is depicted, not built. Offset shadows 'add depth' and fake-3D objects are drawn in isometric view at about 45°. The language is flat screen UI.",
      "role": "negative",
      "area": "form",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-neo-brutalism-S2",
          "kcc-neo-brutalism-S1",
          "kcc-neo-brutalism-S4"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "kcc:technique-1",
      "text": "The look is expressed with a few CSS properties (border, flat fill, hard offset shadow, square corners) and is packaged in ready-made component libraries such as one built on shadcn/ui.",
      "role": "rule",
      "area": "technique",
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-neo-brutalism-S3",
          "kcc-neo-brutalism-S5"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "scope": {
        "practice": "codified phase; self-published and component-library sources"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "idr:codified",
      "text": "In its codified form, as style guides and component kits fix it, neo-brutalism is border plus flat fill plus hard shadow, with square corners and a single canonical stroke width for most components.",
      "role": "context",
      "area": null,
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-neo-brutalism-S3",
          "kcc-neo-brutalism-S5"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "idr:history-2022",
      "text": "As first described in 2022, the trend was looser than its later codification: colours desaturated (rarely above 80% saturation), line thickness and corner roundness inconsistent within one project, and 'very relaxed rules' for composition, shapes and colour. The codified rules on this record do not apply to that earlier work.",
      "role": "history",
      "area": null,
      "basis": "documentary",
      "support": {
        "state": "cited",
        "for": [
          "kcc-neo-brutalism-S8",
          "kcc-neo-brutalism-S4"
        ],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "documented",
        "mark": "attached",
        "text": "Documented · Source attached"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "dcc:surface-8",
      "text": "hard shadows are the one interface treatment Neo-Brutalism shares with the wider catalogue, and the sharpest implementable instruction: a solid offset shape, blur: 0, always. Any blur radius converts it to conventional elevation and the register dies.",
      "role": "rule",
      "area": null,
      "basis": "synthesis",
      "support": {
        "state": "none",
        "for": [],
        "against": [],
        "contested": false
      },
      "label": {
        "kind": "reading",
        "text": "Our reading"
      },
      "derives_from": [],
      "ruling": null
    },
    {
      "id": "dcc:failure-6",
      "text": "Against Web Brutalism: styled versus stripped. Same word, opposite method. Against Memphis: exaggerated interface furniture versus unrelated arbitrary shapes. Anti-signature: add blur to the shadow and it becomes ordinary elevation. Remove the styling and it becomes Web Brutalism. Drop the interface furniture and keep the shapes and it drifts to Memphis.",
      "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 Web Brutalism: styled versus stripped. Same word, opposite method. Against Memphis: exaggerated interface furniture versus unrelated arbitrary shapes. Anti-signature: add blur to the shadow and it becomes ordinary elevation. Remove the styling and it becomes Web Brutalism. Drop the interface furniture and keep the shapes and it drifts to Memphis.",
      "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": "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": "5YGBVKP6NV7DY8XTWXXSESKTQ5",
      "kind": "source",
      "title": "Neubrutalism (community reference)",
      "url": "https://neubrutalism.com/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "18YG42J1YKSBEM6G2DG7BNK5P1",
      "kind": "source",
      "title": "Neubrutalism is taking over the web (opening paragraph only; remainder behind login)",
      "url": "https://hype4.academy/articles/design/neubrutalism-is-taking-over-web",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-neo-brutalism-S1",
      "kind": "source",
      "title": "Neubrutalism is taking over the web (UX Collective, archived copy of https://uxdesign.cc/neubrutalism-is-taking-over-the-web-e9d09e0fe441)",
      "url": "https://archive.is/ABvs6",
      "status": "unresolved",
      "retrieval": "not_retrieved"
    },
    {
      "id": "kcc-neo-brutalism-S2",
      "kind": "source",
      "title": "Neobrutalism: Definition and Best Practices",
      "url": "https://www.nngroup.com/articles/neobrutalism/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-neo-brutalism-S3",
      "kind": "source",
      "title": "Neubrutalism — The Definitive Guide to Neubrutalist Web Design",
      "url": "https://neubrutalism.com/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-neo-brutalism-S4",
      "kind": "source",
      "title": "What Is The Neubrutalism Web Design Trend? A Visual Guide",
      "url": "https://www.svgator.com/blog/what-is-neubrutalism/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-neo-brutalism-S5",
      "kind": "source",
      "title": "Neobrutalism components",
      "url": "https://www.neobrutalism.dev/",
      "status": "verified",
      "retrieval": "retrieved"
    },
    {
      "id": "kcc-neo-brutalism-S8",
      "kind": "source",
      "title": "Neubrutalism is taking over the web",
      "url": "https://hype4.academy/articles/design/neubrutalism-is-taking-over-web",
      "status": "verified",
      "retrieval": "retrieved"
    }
  ],
  "relations": [
    {
      "slug": "web-brutalism",
      "kind": "confused_with",
      "status": "proposed"
    },
    {
      "slug": "memphis",
      "kind": "confused_with",
      "status": "proposed"
    }
  ],
  "open": [
    {
      "kind": "verification",
      "question": "Motif: research found evidence on pages that refuse automated retrieval, so the quoted passages could not be checked and nothing was published from them."
    },
    {
      "kind": "missing_research",
      "question": "Is neo-brutalist colour saturated (record color-5) or desaturated?"
    },
    {
      "kind": "missing_research",
      "question": "Is outline weight and corner radius uniform?"
    },
    {
      "kind": "missing_research",
      "question": "Is the press-into-shadow interaction characteristic of practice?"
    }
  ],
  "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": "neo-brutalism",
      "stylesheet": "neo-brutalism.css",
      "bytes": 14149,
      "colours": [
        "#FFF4E0",
        "#000000",
        "#FF90E8",
        "#FFC900",
        "#7BF1A8",
        "#90A8ED",
        "#FF7A45",
        "#FFFFFF",
        "#BFD9C9",
        "#E6D7A3"
      ],
      "radii": [
        "6px",
        "18px"
      ],
      "fontSizes": [
        "0.7em",
        "12px",
        "15px",
        "16px",
        "17px",
        "19px",
        "20px",
        "21px",
        "22px",
        "24px",
        "28px"
      ],
      "faces": [
        "ArchivoBlackNB",
        "SpaceGroteskNB"
      ],
      "tokens": [
        {
          "name": "--nb-cream",
          "value": "#FFF4E0"
        },
        {
          "name": "--nb-k",
          "value": "#000000"
        },
        {
          "name": "--nb-pink",
          "value": "#FF90E8"
        },
        {
          "name": "--nb-yel",
          "value": "#FFC900"
        },
        {
          "name": "--nb-mint",
          "value": "#7BF1A8"
        },
        {
          "name": "--nb-blue",
          "value": "#90A8ED"
        },
        {
          "name": "--nb-or",
          "value": "#FF7A45"
        },
        {
          "name": "--nb-w",
          "value": "#FFFFFF"
        },
        {
          "name": "--nb-display",
          "value": "\"ArchivoBlackNB\", \"Arial Black\", sans-serif"
        },
        {
          "name": "--nb-body",
          "value": "\"SpaceGroteskNB\", \"Helvetica Neue\", Arial, sans-serif"
        },
        {
          "name": "--nb-m",
          "value": "1"
        },
        {
          "name": "--o",
          "value": "6px"
        },
        {
          "name": "--6",
          "value": "checked ~ .nb-spec { box-shadow: 10px 10px 6px var(--nb-k)"
        },
        {
          "name": "--16",
          "value": "checked ~ .nb-spec { box-shadow: 0 10px 16px rgba(0, 0, 0, 0.25)"
        }
      ],
      "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": "neo-brutalism",
      "version": "2026-09-29",
      "summary": "A starting grammar for a website in codified Neo-Brutalism: every component outlined in one thick black stroke, square-cornered, flat-filled in loud candy colour, casting a hard unblurred shadow it presses into.",
      "color": {
        "roles": [
          {
            "role": "ground",
            "value": "#FFF4E0",
            "contrast": "19.3:1 (ink on it)",
            "use": "The page: the room's cream, a choice, not a rule.",
            "basis": "translation",
            "cites": [
              "token_rule:color-5"
            ]
          },
          {
            "role": "ink",
            "value": "#000000",
            "contrast": "21:1",
            "use": "Every outline, every shadow, all text.",
            "basis": "record",
            "cites": [
              "token_rule:nb-outline"
            ]
          },
          {
            "role": "pink",
            "value": "#FF90E8",
            "contrast": "10.4:1 (ink on it)",
            "use": "Fill.",
            "basis": "translation",
            "cites": [
              "token_rule:color-5"
            ]
          },
          {
            "role": "yellow",
            "value": "#FFC900",
            "contrast": "13.6:1 (ink on it)",
            "use": "Fill; focus and current state.",
            "basis": "translation",
            "cites": [
              "token_rule:color-5"
            ]
          },
          {
            "role": "mint",
            "value": "#7BF1A8",
            "contrast": "15.0:1 (ink on it)",
            "use": "Fill.",
            "basis": "translation",
            "cites": [
              "token_rule:color-5"
            ]
          },
          {
            "role": "blue",
            "value": "#90A8ED",
            "contrast": "9.0:1 (ink on it)",
            "use": "Fill.",
            "basis": "translation",
            "cites": [
              "token_rule:color-5"
            ]
          },
          {
            "role": "orange",
            "value": "#FF7A45",
            "contrast": "8.1:1 (ink on it)",
            "use": "Fill for the loudest action.",
            "basis": "translation",
            "cites": [
              "token_rule:color-5"
            ]
          }
        ],
        "alternates": [],
        "rules": [
          {
            "rule": "Saturated, high-contrast flat colour.",
            "basis": "record",
            "cites": [
              "token_rule:color-5"
            ]
          },
          {
            "rule": "No soft or muted palette.",
            "basis": "record",
            "cites": [
              "claim:failure-2"
            ]
          },
          {
            "rule": "Set all text in black; never set text in a candy colour.",
            "basis": "translation",
            "cites": [
              "token_rule:color-5",
              "claim:kcc:layout-1"
            ],
            "because": "High contrast is the record's; black on every fill keeps it above 8:1."
          },
          {
            "rule": "The sources do not name the candy hues.",
            "basis": "not_recorded",
            "cites": [],
            "guidance": "Any saturated flat set works; these five are the room's choice. Do not treat them as canonical.",
            "silence": "source"
          }
        ]
      },
      "typography": {
        "family": {
          "stack": "\"Archivo Black\", \"Arial Black\", sans-serif",
          "class": "oversized heavy sans for display (Archivo Black), with Space Grotesk for text"
        },
        "roles": [
          {
            "role": "display",
            "size": "6rem",
            "weight": 400,
            "lineHeight": "0.92",
            "case": null,
            "tracking": "-0.02em",
            "measure": null,
            "use": "Mastheads: oversized."
          },
          {
            "role": "heading",
            "size": "2.5rem",
            "weight": 400,
            "lineHeight": "1.05",
            "case": null,
            "tracking": null,
            "measure": null,
            "use": "Section heads: an abrupt step down."
          },
          {
            "role": "body",
            "size": "1.125rem",
            "weight": 500,
            "lineHeight": "1.55",
            "case": null,
            "tracking": null,
            "measure": "60ch",
            "use": "Text, in Space Grotesk."
          },
          {
            "role": "label",
            "size": "0.8125rem",
            "weight": 700,
            "lineHeight": "1.4",
            "case": "uppercase",
            "tracking": "0.06em",
            "measure": null,
            "use": "Chips and labels."
          }
        ],
        "tokens": {
          "font-body": "\"Space Grotesk\", \"Helvetica Neue\", Arial, sans-serif"
        },
        "rules": [
          {
            "rule": "Oversized sans-serif headlines with abrupt scale shifts.",
            "basis": "record",
            "cites": [
              "claim:kcc:typography-3"
            ]
          },
          {
            "rule": "Quirky or slightly eccentric typefaces, balanced by generous whitespace.",
            "basis": "record",
            "cites": [
              "claim:kcc:typography-1"
            ]
          },
          {
            "rule": "Archivo Black for display, Space Grotesk for text.",
            "basis": "translation",
            "cites": [
              "claim:kcc:typography-3",
              "claim:kcc:typography-1"
            ],
            "because": "An oversized heavy sans and a slightly eccentric grotesque, as the research describes; the pair is the room's choice."
          },
          {
            "rule": "Monospace may appear as a nostalgic early-interface reference.",
            "basis": "record",
            "cites": [
              "claim:kcc:typography-2"
            ]
          }
        ]
      },
      "gridLayout": {
        "summary": "Blocky and orderly: an underlying grid that single modules break by offset or overscale.",
        "tokens": {
          "gap": "40px"
        },
        "rules": [
          {
            "rule": "Blocky layouts, high contrast, more orderly than brutalist web design.",
            "basis": "record",
            "cites": [
              "claim:kcc:layout-1"
            ]
          },
          {
            "rule": "Keep an underlying grid and disrupt it locally with offset, asymmetric or overscaled modules.",
            "basis": "record",
            "cites": [
              "claim:kcc:layout-3"
            ]
          },
          {
            "rule": "Leave generous space between blocks so each shadow reads.",
            "basis": "translation",
            "cites": [
              "claim:kcc:typography-1",
              "claim:dcc:surface-8"
            ],
            "because": "The research pairs the loud elements with generous whitespace, and a shadow needs room to be seen."
          }
        ]
      },
      "shapeGeometry": {
        "tokens": {
          "radius": "0",
          "stroke": "3px",
          "shadow-1": "4px",
          "shadow-2": "8px",
          "shadow-3": "16px",
          "blur": "0"
        },
        "rules": [
          {
            "rule": "Thick, solid, dark outlines with square corners.",
            "basis": "record",
            "cites": [
              "token_rule:nb-outline"
            ]
          },
          {
            "rule": "A solid offset shadow, blur 0, always.",
            "basis": "record",
            "cites": [
              "claim:dcc:surface-8"
            ]
          },
          {
            "rule": "No thin or varied outline weight.",
            "basis": "record",
            "cites": [
              "claim:failure-3"
            ]
          },
          {
            "rule": "Depth is depicted, not built: offset shadows and flat isometric drawing.",
            "basis": "record",
            "cites": [
              "claim:kcc:form-1"
            ]
          },
          {
            "rule": "Step shadow offsets 4, 8, 16px by rank.",
            "basis": "translation",
            "cites": [
              "token_rule:hierarchy-13"
            ],
            "because": "Rank by shadow offset; three doubling steps keep the ranks readable."
          }
        ]
      },
      "imagery": {
        "rules": [
          {
            "rule": "Imagery is neither demanded nor forbidden.",
            "basis": "not_recorded",
            "cites": [
              "claim:imagery-reason"
            ],
            "guidance": "If you use images, frame them like any component: outline, square corners, hard shadow.",
            "silence": "source"
          },
          {
            "rule": "Fake-3D objects, where drawn, are isometric at about 45°.",
            "basis": "record",
            "cites": [
              "claim:kcc:form-1"
            ]
          }
        ]
      },
      "components": {
        "button": {
          "name": "Button",
          "becomes": "A chunky flat-filled box with a thick black outline and a hard shadow it presses into.",
          "anatomy": [
            "3px solid black outline",
            "flat candy fill",
            "square corners",
            "hard 6px offset shadow, blur 0",
            "label in the display face"
          ],
          "tokens": {
            "border": "3px solid #000000",
            "radius": "0",
            "shadow": "6px 6px 0 #000000",
            "min-height": "60px",
            "transition": "none"
          },
          "states": {
            "default": "Flat fill, outline, shadow at 6px.",
            "hover": "Lifts 2px: the shadow grows to 8px.",
            "focus": "3px black outline, 4px outside.",
            "active": "Moves 6px down and right into its shadow; the shadow is gone.",
            "disabled": "White fill, no shadow, label struck through."
          },
          "accessibility": [
            "All text is black on the fills: 8.1:1 on orange at worst.",
            "At least 44px tall; the display size makes it bigger.",
            "Pressed state is shown by position and the lost shadow, not by colour."
          ],
          "values": [
            {
              "rule": "Outline it thick and solid, with square corners.",
              "basis": "record",
              "cites": [
                "token_rule:nb-outline"
              ]
            },
            {
              "rule": "Give it a solid offset shadow with blur 0.",
              "basis": "record",
              "cites": [
                "claim:dcc:surface-8",
                "token_rule:nb-r1"
              ]
            },
            {
              "rule": "On press, move the element into its own shadow and let the shadow disappear.",
              "basis": "record",
              "cites": [
                "claim:kcc:motion-2",
                "token_rule:motion-14"
              ]
            }
          ]
        },
        "card": {
          "name": "Card",
          "becomes": "An outlined box with a flat fill and a hard shadow whose offset is its rank.",
          "anatomy": [
            "3px black outline",
            "flat fill",
            "hard offset shadow",
            "heading in the display face"
          ],
          "tokens": {
            "border": "3px solid #000000",
            "radius": "0",
            "shadow": "8px 8px 0 #000000",
            "padding": "1.25rem"
          },
          "states": {
            "default": "Outline and shadow at its rank.",
            "hover": "Where the card is a link, it lifts 2px.",
            "focus": "3px black outline outside the shadow.",
            "active": "Presses into its shadow."
          },
          "accessibility": [
            "Headings and body stay black on every fill.",
            "The shadow is decoration; nothing is communicated by it alone."
          ],
          "values": [
            {
              "rule": "Border plus flat fill plus hard shadow, square corners, one stroke width.",
              "basis": "record",
              "cites": [
                "claim:idr:codified",
                "claim:kcc:technique-1"
              ]
            },
            {
              "rule": "Rank by shadow offset: the most important card casts the biggest.",
              "basis": "record",
              "cites": [
                "token_rule:hierarchy-13"
              ]
            }
          ]
        },
        "input": {
          "name": "Input",
          "becomes": "A white field in the same outline, with a small hard shadow and a bold label above.",
          "anatomy": [
            "3px black outline",
            "white fill",
            "hard 4px shadow",
            "label above, bold"
          ],
          "tokens": {
            "border": "3px solid #000000",
            "radius": "0",
            "shadow": "4px 4px 0 #000000",
            "background": "#FFFFFF"
          },
          "states": {
            "default": "White, outline, 4px shadow.",
            "focus": "Fill turns yellow; 3px outline outside.",
            "error": "Pink fill and a written message beginning \"Error:\".",
            "disabled": "No shadow, label struck through."
          },
          "accessibility": [
            "A visible label on every field.",
            "Errors are written, not only coloured."
          ],
          "values": [
            {
              "rule": "Same outline and corner as every component: one canonical stroke width.",
              "basis": "record",
              "cites": [
                "claim:idr:codified",
                "token_rule:nb-outline"
              ]
            },
            {
              "rule": "Mark focus with a flat yellow fill, not a glow.",
              "basis": "translation",
              "cites": [
                "claim:failure-1",
                "token_rule:color-5"
              ],
              "because": "No blur anywhere, and colour is flat and saturated; a glow would be a soft elevation."
            }
          ]
        },
        "navigation": {
          "name": "Navigation",
          "becomes": "A row of outlined tabs with hard shadows; the current one is already pressed.",
          "anatomy": [
            "outlined tabs, 3px",
            "hard 4px shadows",
            "current tab pressed in, filled yellow"
          ],
          "tokens": {
            "border": "3px solid #000000",
            "shadow": "4px 4px 0 #000000",
            "current": "pressed: offset 0, fill #FFC900"
          },
          "states": {
            "default": "Outlined tab with shadow.",
            "hover": "Lifts 2px.",
            "focus": "3px black outline.",
            "current": "Pressed into its shadow and filled yellow."
          },
          "accessibility": [
            "aria-current on the current page.",
            "Current is shown by position and fill together."
          ],
          "values": [
            {
              "rule": "Show the current page as a tab already pressed into its shadow.",
              "basis": "translation",
              "cites": [
                "token_rule:motion-14",
                "claim:kcc:motion-2"
              ],
              "because": "The press is the language's own state change; a pressed tab reads as selected."
            }
          ]
        }
      },
      "motion": {
        "spec": {
          "durations": {
            "press": "0ms",
            "lift": "0ms"
          },
          "easing": {
            "press": "none"
          },
          "transforms": "translate by the shadow offset only",
          "entrance": "None.",
          "hover": "A 2px lift, the shadow growing by the same amount.",
          "reducedMotion": "The lift is dropped; the press stays, because it is state, not animation."
        },
        "rules": [
          {
            "rule": "Elements press into their own shadow on interaction, the offset collapsing to zero.",
            "basis": "record",
            "cites": [
              "token_rule:motion-14"
            ]
          },
          {
            "rule": "The press moves the element into its shadow and the shadow disappears.",
            "basis": "record",
            "cites": [
              "claim:kcc:motion-2"
            ]
          },
          {
            "rule": "Make the press instant, with no easing.",
            "basis": "translation",
            "cites": [
              "token_rule:motion-14"
            ],
            "because": "The motion rule is native to the shadow logic and not generic easing."
          }
        ]
      },
      "dimensions": [
        {
          "key": "phase",
          "label": "Which phase",
          "summary": "The codified kits bind these values. The trend as first named in 2022 was looser and is history, not a violation.",
          "values": [
            {
              "rule": "Build the codified form: border, flat fill, hard shadow, square corners, one stroke width.",
              "basis": "record",
              "cites": [
                "claim:idr:codified"
              ]
            },
            {
              "rule": "Do not grade 2022-era work by these rules: its colour was desaturated and its lines and corners uneven.",
              "basis": "record",
              "cites": [
                "claim:idr:history-2022"
              ]
            },
            {
              "rule": "Styled, not stripped: that is Web Brutalism.",
              "basis": "record",
              "cites": [
                "boundary:web-brutalism",
                "claim:v1-distinguishing"
              ]
            }
          ]
        }
      ],
      "notRecorded": [
        {
          "category": "color",
          "what": "Which candy hues",
          "why": "The record holds saturated flat colour, not a palette."
        },
        {
          "category": "imagery",
          "what": "Imagery",
          "why": "Not specified by the source."
        },
        {
          "category": "gridLayout",
          "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 sets interface conventions for Neo-Brutalism. These four components are contemporary builds on them, not historical artefacts."
    }
  }
}