Neo-Brutalism

Capability tags describe this specimen only; verify the implementation again in a real product.

{
  "tokens": {
    "surface": "#fff6d8",
    "ink": "#18231f",
    "accent": "#d7ef78",
    "radiusPx": 0,
    "shadow": "5px 5px 0 #18231f"
  },
  "tokenScope": "A recipe for this specimen, not a universal standard."
}

{
  "id": "neo-brutalism",
  "type": "visual",
  "name": {
    "zh": "新粗野主义",
    "en": "Neo-Brutalism"
  },
  "aliases": [
    "Neubrutalism",
    "Neo-Brutalist"
  ],
  "granularity": "experience",
  "intents": [
    "express-brand"
  ],
  "tags": [
    "heavy outlines",
    "hard shadows",
    "bold",
    "playful",
    "high contrast"
  ],
  "definition": "A direct, conspicuous digital visual language using pronounced outlines, hard shadows, and bold color blocks.",
  "boundary": "This entry uses the contemporary UI community meaning. It should not be equated with architectural Brutalism or Web Brutalism.",
  "signature": [
    "Pronounced dark borders",
    "Offset shadows with little or no blur",
    "Strong contrasts in color blocks and typography"
  ],
  "when": [
    "The brand needs a conspicuous expression",
    "The page can accommodate a strong visual rhythm"
  ],
  "when_not": [
    "Giving every secondary element equal visual emphasis",
    "Assuming high-contrast colors automatically ensure accessibility"
  ],
  "tradeoff": "The style is recognizable, but borders and shadows consume space; the number of emphasis levels needs restraint.",
  "comparison": {
    "focus": "Boldness and directness",
    "mechanism": "Outlines, color blocks, and hard shadows",
    "cost": "Can create competing focal points"
  },
  "sources": [
    {
      "id": "neo-stylekit",
      "title": "StyleKit · Neo-Brutalist",
      "url": "https://www.stylekit.top/en/styles/neo-brutalist",
      "claim": "The directory defines this UI style through heavy outlines, hard shadows, and high contrast. It is not historical or effectiveness research.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.stylekit.top/en/styles/neo-brutalist",
        "status": "available",
        "checkedAt": "2026-09-15T16:49:14.302Z",
        "jobId": "spn2-924e720776eb8928771a46e83f70a27113fa7c2e",
        "url": "https://web.archive.org/web/20260915164945/https://www.stylekit.top/en/styles/neo-brutalist",
        "timestamp": "20260915164945"
      }
    }
  ],
  "relations": [
    {
      "target": "swiss",
      "kind": "alternative",
      "condition": "Choosing the primary visual language",
      "reason": "The expressive intensity differs, while content and semantic structure can remain the same.",
      "basis": "editorial"
    },
    {
      "target": "bento",
      "kind": "composes_with",
      "condition": "Emphasizing distinct content blocks",
      "reason": "Style and layout are independent choices.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "Applying it to a complex application",
      "instruction": "Maintain a clear hierarchy and reserve distinct meanings for status signals.",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "visual": {
    "tokens": {
      "surface": "#fff6d8",
      "ink": "#18231f",
      "accent": "#d7ef78",
      "radiusPx": 0,
      "shadow": "5px 5px 0 #18231f"
    },
    "tokenScope": "A recipe for this specimen, not a universal standard."
  },
  "demo": "neo-brutalism",
  "version": "0.1.0",
  "editorialStatus": "sample-reviewed",
  "requirements": [],
  "demoCapabilities": [
    "keyboard",
    "reduced_motion"
  ],
  "implementationNote": "Capability tags describe this specimen only; verify the implementation again in a real product.",
  "searchTerms": [
    "粗描边",
    "硬阴影",
    "鲜明",
    "playful",
    "高对比"
  ]
}