Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

新粗野主义

Neo-Brutalism

加入比较 +

以明显描边、硬边投影和鲜明色块形成直接、醒目的数字视觉语言。

可操作示例 · 虚构产品 FIELDNOTES
FIELDNOTES城市 / 观察 / 日常
COLLECT THE EVERYDAY

Look
closer.

在熟悉的街角,发现未曾注意的日常。

01 / WALK

周末散步

沿着旧街,重新认识城市。

02 / BOOKS

一家书店

停下来,留一点时间给阅读。

03 / DAILY

雨后的街角

把平常的一刻,放进手记。

识别特征

  • 明显的深色边框
  • 无模糊或少模糊的偏移投影
  • 对比鲜明的块面和排版

概念边界

这里采用当代 UI 社区的用法;它与历史建筑粗野主义、Web Brutalism 不应直接等同。

什么时候考虑它

  • 需要醒目的品牌表现
  • 页面可以承受强烈的视觉节奏

什么时候慎用

  • 把每个次要元素都处理成同等强烈的视觉焦点
  • 认为高对比配色自动保证无障碍

取舍

识别度强,但边框和投影会占用空间,需要限制强调层级。

条件规则 · 编辑建议

当用于复杂应用建议保留明确的主次层级,为状态提示保留专用语义。

相关词条

瑞士国际主义 ↗条件替代 · 选择主视觉语言

表现力度不同,仍可共享内容和语义结构。

Bento 网格 ↗可以配合 · 突出不同内容块

风格与布局是独立选择。

来源与支持范围

StyleKit · Neo-Brutalist ↗

该目录以粗描边、硬边阴影、高对比色定义此 UI 风格;不作为历史或效果研究。

检索日期:2026-09-15

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

能力标签只描述本演示;应用到产品时仍须重新验证。

{
  "tokens": {
    "surface": "#fff6d8",
    "ink": "#18231f",
    "accent": "#d7ef78",
    "radiusPx": 0,
    "shadow": "5px 5px 0 #18231f"
  },
  "tokenScope": "本样例配方,非唯一标准。"
}
完整 Agent 条目 JSON
{
  "id": "neo-brutalism",
  "type": "visual",
  "name": {
    "zh": "新粗野主义",
    "en": "Neo-Brutalism"
  },
  "aliases": [
    "Neubrutalism",
    "Neo-Brutalist"
  ],
  "granularity": "experience",
  "intents": [
    "express-brand"
  ],
  "tags": [
    "粗描边",
    "硬阴影",
    "鲜明",
    "playful",
    "高对比"
  ],
  "definition": "以明显描边、硬边投影和鲜明色块形成直接、醒目的数字视觉语言。",
  "boundary": "这里采用当代 UI 社区的用法;它与历史建筑粗野主义、Web Brutalism 不应直接等同。",
  "signature": [
    "明显的深色边框",
    "无模糊或少模糊的偏移投影",
    "对比鲜明的块面和排版"
  ],
  "when": [
    "需要醒目的品牌表现",
    "页面可以承受强烈的视觉节奏"
  ],
  "when_not": [
    "把每个次要元素都处理成同等强烈的视觉焦点",
    "认为高对比配色自动保证无障碍"
  ],
  "tradeoff": "识别度强,但边框和投影会占用空间,需要限制强调层级。",
  "comparison": {
    "focus": "鲜明与直接",
    "mechanism": "描边、色块、硬投影",
    "cost": "易出现多个视觉焦点"
  },
  "sources": [
    {
      "id": "neo-stylekit",
      "title": "StyleKit · Neo-Brutalist",
      "url": "https://www.stylekit.top/en/styles/neo-brutalist",
      "claim": "该目录以粗描边、硬边阴影、高对比色定义此 UI 风格;不作为历史或效果研究。",
      "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": "选择主视觉语言",
      "reason": "表现力度不同,仍可共享内容和语义结构。",
      "basis": "editorial"
    },
    {
      "target": "bento",
      "kind": "composes_with",
      "condition": "突出不同内容块",
      "reason": "风格与布局是独立选择。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "用于复杂应用",
      "instruction": "保留明确的主次层级,为状态提示保留专用语义。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "visual": {
    "tokens": {
      "surface": "#fff6d8",
      "ink": "#18231f",
      "accent": "#d7ef78",
      "radiusPx": 0,
      "shadow": "5px 5px 0 #18231f"
    },
    "tokenScope": "本样例配方,非唯一标准。"
  },
  "demo": "neo-brutalism",
  "version": "0.1.0",
  "editorialStatus": "sample-reviewed",
  "requirements": [],
  "demoCapabilities": [
    "keyboard",
    "reduced_motion"
  ],
  "implementationNote": "能力标签只描述本演示;应用到产品时仍须重新验证。",
  "searchTerms": [
    "heavy outlines",
    "hard shadows",
    "bold",
    "playful",
    "high contrast"
  ]
}