{
  "id": "neobrutalism",
  "type": "styles",
  "status": "published",
  "name": {
    "zh": "新粗野主义",
    "en": "Neobrutalism"
  },
  "aliases": [
    "新粗野主义",
    "粗野风",
    "大黑边风格",
    "硬阴影风格",
    "新残酷主义",
    "Neo-brutalism",
    "Brutalist Web Design"
  ],
  "category": [
    "Style",
    "Visual Language"
  ],
  "description": {
    "zh": "用粗黑描边、高饱和撞色与生硬的偏移实心阴影构成的高对比视觉语言：元素像彩色 贴纸一样直接砸在页面上，配合夸张的圆角与醒目标签。它刻意拒绝精致与圆滑， 以\"丑得理直气壮\"的态度换取强烈的记忆点与年轻个性。",
    "en": "A loud visual language of thick black outlines, saturated clashing colors and hard offset shadows: elements sit on the page like bold stickers, paired with chunky radii and punchy badges. It deliberately rejects polish and subtlety, trading refinement for instant recognition and a rebellious, playful voice."
  },
  "use_when": [
    {
      "zh": "面向年轻群体的品牌 活动 开发者工具官网",
      "en": "Youth-oriented brands, campaigns and developer-tool landing pages"
    },
    {
      "zh": "想在千篇一律的精致界面里制造强烈记忆点",
      "en": "Standing out with strong personality among polished sites"
    },
    {
      "zh": "营销页 作品集 创意社区等低密度高表现力场景",
      "en": "Marketing pages, portfolios and creative communities"
    }
  ],
  "avoid_when": [
    {
      "zh": "金融 医疗 企业级产品等需要稳重可信的场景",
      "en": "Finance, healthcare or enterprise products that must feel trustworthy"
    },
    {
      "zh": "长时间使用的生产力工具，高对比装饰易造成视觉疲劳",
      "en": "Long-session productivity tools — loud decoration fatigues"
    },
    {
      "zh": "内容密集 数据密集的界面，粗边与大色块挤占信息空间",
      "en": "Dense content or data UIs where borders and color eat information space"
    }
  ],
  "tags": [
    "bold",
    "high-contrast",
    "border",
    "shadow",
    "playful"
  ],
  "variants": [
    {
      "id": "classic",
      "name": {
        "zh": "经典硬阴影",
        "en": "Classic Hard Shadow"
      },
      "note": {
        "zh": "奶油底色 + 黑边 + 偏移实心阴影",
        "en": "Cream background, black borders, offset solid shadows"
      }
    },
    {
      "id": "candy",
      "name": {
        "zh": "糖果色",
        "en": "Candy"
      },
      "note": {
        "zh": "粉 紫 黄等高饱和糖果色块互相碰撞",
        "en": "Saturated pink, purple and yellow blocks colliding"
      }
    },
    {
      "id": "grunge",
      "name": {
        "zh": "粗粝噪点",
        "en": "Grunge"
      },
      "note": {
        "zh": "加入噪点纹理 倾斜元素与手绘涂鸦",
        "en": "Adds noise, tilted elements and doodles"
      }
    }
  ],
  "applicable_components": [
    "button",
    "input",
    "card",
    "badge"
  ],
  "applicable_pages": [
    "landing-page"
  ],
  "related": [
    {
      "id": "bauhaus",
      "relation": "similar_to"
    },
    {
      "id": "memphis",
      "relation": "similar_to"
    },
    {
      "id": "y2k",
      "relation": "similar_to"
    },
    {
      "id": "button",
      "relation": "affects"
    },
    {
      "id": "card",
      "relation": "affects"
    }
  ],
  "demo": {
    "component": "neobrutalism",
    "modes": [
      "default",
      "dark",
      "variants"
    ]
  },
  "sources": [
    {
      "name": "Gumroad — Neobrutalism 代表案例",
      "url": "https://gumroad.com/"
    },
    {
      "name": "Wikipedia — Brutalist Architecture（风格词源）",
      "url": "https://en.wikipedia.org/wiki/Brutalist_architecture"
    }
  ],
  "implementation": {
    "css": [
      "border: 2-4px solid #000",
      "box-shadow: 4px 4px 0 #000",
      "border-radius: 8-16px",
      "background: saturate()",
      "transition"
    ],
    "notes": {
      "zh": "三件套是风格命门：粗黑边（2～4px）、偏移实心阴影（如 4px 4px 0 #000，绝不用 模糊）、明快圆角。配色选高饱和糖果色并大胆撞色。交互反馈很出效果：hover 时 元素位移，active 时把位移吃掉、阴影归零，像真的被按进纸面。噪点可用 SVG feTurbulence 或重复渐变模拟。",
      "en": "The style hinges on three traits: thick black borders (2–4px), hard offset shadows (e.g. 4px 4px 0 #000 — never blurred) and cheerful radii. Use saturated candy colors and clash them boldly. Interactions shine: shift the element on hover, then zero the shadow on active as if pressed into paper. Add noise with SVG feTurbulence or repeating gradients."
    }
  },
  "prompts": {
    "basic": {
      "zh": "用新粗野主义风格（Neobrutalism）设计界面：粗黑描边、高饱和撞色、偏移实心硬阴影，元素像贴纸一样直接有力。",
      "en": "\"Design an interface in Neobrutalism style: thick black borders, saturated clashing colors and hard offset shadows — elements punchy as stickers.\""
    },
    "design": {
      "zh": "新粗野主义设计规范：底色奶油黄（#FDF2D8）；所有元素 2～3px 纯黑描边； 阴影只用实心偏移（4px 4px 0 #000），禁止模糊投影；圆角 10px 左右；主色 高饱和（红 #FF5D5D、黄 #FFC900、蓝 #4D9FFF 任选撞色）；标题粗黑体可全大写； 按钮按下时位移吃掉阴影。深色模式用近黑底色但保持彩色元素亮度。",
      "en": "\"Neobrutalism design spec: cream background (#FDF2D8); every element gets a 2–3px pure black border; shadows are solid offsets only (4px 4px 0 #000), never blurred; ~10px radii; saturated primary colors (#FF5D5D / #FFC900 / #4D9FFF) that clash boldly; heavy uppercase headings; buttons swallow their shadow when pressed. Dark mode keeps a near-black base with the bright colors intact.\""
    },
    "implementation": {
      "zh": "用 CSS 实现新粗野主义：封装 .nb 基类（border: 3px solid #000; box-shadow: 4px 4px 0 #000; border-radius: 10px），色板用 CSS 变量管理糖果色；hover 用 transform translate(-2px,-2px) 并把阴影加深到 6px，active 归零阴影模拟按压； 徽章用纯色块 + 黑边 + 全大写小字号；所有过渡 120ms 内完成并乘以速度变量。",
      "en": "\"Implement Neobrutalism in CSS: a .nb base class (border: 3px solid #000; box-shadow: 4px 4px 0 #000; border-radius: 10px), candy palette as CSS variables; hover lifts via translate(-2px,-2px) with a deeper 6px shadow, active resets it like a physical press; badges are solid color chips with black borders and uppercase labels; keep transitions under 120ms.\""
    },
    "agent": {
      "zh": "在当前项目中用新粗野主义风格（Neobrutalism）实现一个卡片 + 按钮区块。\n\n先检查现有组件与 Design Token，确定是否已有可复用的边框/阴影变量。\n要求：\n- 粗黑描边（2～3px）+ 偏移实心阴影（无模糊）\n- 高饱和撞色，底色用奶油色系\n- 按钮 hover 上浮、active 阴影归零的物理按压感\n- 支持深色模式（近黑底，彩色保持高亮）\n- 过渡动画尊重 prefers-reduced-motion，时长 120ms 内\n- 不新增任何依赖\n完成后运行项目现有检查，并列出修改的文件。",
      "en": "Implement a card + button section in Neobrutalism style in the current project.\n\nInspect the existing components and design tokens first; check for reusable border/shadow variables.\nRequirements:\n- Thick black borders (2–3px) + hard offset shadows (no blur)\n- Saturated clashing colors on a cream base\n- Buttons that lift on hover and swallow their shadow on active\n- Dark mode support (near-black base, colors stay bright)\n- Transitions respect prefers-reduced-motion, under 120ms\n- No new dependencies\nRun existing project checks when done and list the modified files."
    }
  },
  "style_spec": {
    "typography": {
      "zh": "超粗无衬线，全大写",
      "en": "Ultra-bold sans, all caps"
    },
    "color": {
      "zh": "奶油底 × 纯黑 × 橙 #FF6B00",
      "en": "Cream base, pure black, orange #FF6B00"
    },
    "border": {
      "zh": "3px 黑色实线粗边",
      "en": "3px solid black borders"
    },
    "shadow": {
      "zh": "5px 5px 0 硬投影（不模糊）",
      "en": "5px 5px 0 hard offset shadows"
    },
    "spacing": {
      "zh": "0 圆角，紧凑堆叠",
      "en": "Zero radius, tight stacking"
    },
    "motion": {
      "zh": "约 100ms 的硬位移按压，无缓动",
      "en": "Roughly 100ms hard positional press, no easing"
    },
    "states": {
      "zh": "hover 位移到硬投影位置；focus 用 3px 黑色可见外框；active 继续下压并收起投影；disabled 灰化且不位移；error 用橙红粗边",
      "en": "Hover shifts into the hard shadow; focus shows a visible 3px black frame; active presses down and removes the shadow; disabled greys out without shifting; error uses a harsh orange-red border"
    }
  },
  "preview": {
    "order": 9,
    "keywords": {
      "en": "RAW & LOUD",
      "zh": "粗边 · 高对比 · 直给"
    },
    "url": "https://brutal.wtf",
    "scene": "generic",
    "brand": "BRUTAL*",
    "nav": [
      {
        "zh": "WORK",
        "en": "WORK"
      },
      {
        "zh": "ABOUT",
        "en": "ABOUT"
      },
      {
        "zh": "SHOP",
        "en": "SHOP"
      }
    ],
    "navExt": [
      {
        "zh": "CART (2)",
        "en": "CART (2)"
      }
    ],
    "heroTitle": {
      "zh": "MAKE IT",
      "en": "MAKE IT"
    },
    "heroTitle2": {
      "zh": "LOUD.",
      "en": "LOUD."
    },
    "heroSub": {
      "zh": "粗野直给的设计，绝不拐弯。",
      "en": "Bold, direct design that gets to the point."
    },
    "cta": {
      "zh": "GO →",
      "en": "GO →"
    },
    "heroCaption": {
      "zh": "NO GRADIENTS. NO MERCY.",
      "en": "NO GRADIENTS. NO MERCY."
    },
    "features": [
      {
        "t": {
          "zh": "HUGE TYPE",
          "en": "HUGE TYPE"
        },
        "s": {
          "zh": "字要大，话要狠",
          "en": "Big type, bold words"
        }
      },
      {
        "t": {
          "zh": "THICK BORDER",
          "en": "THICK BORDER"
        },
        "s": {
          "zh": "3px 起步的黑边",
          "en": "Black borders from 3px"
        }
      },
      {
        "t": {
          "zh": "HARD SHADOW",
          "en": "HARD SHADOW"
        },
        "s": {
          "zh": "位移阴影不模糊",
          "en": "Offset shadows with no blur"
        }
      }
    ],
    "panel": "shapes",
    "tokens": {
      "bg": "#FDF3E3",
      "fg": "#111111",
      "sub": "#6B6B6B",
      "accent": "#FF6B00",
      "accentFg": "#111",
      "card": "#FFFFFF",
      "cardBorder": "#111111",
      "radius": "0px",
      "shadow": "5px 5px 0 #111",
      "font": "'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif",
      "upper": true,
      "heroSize": "26px"
    }
  }
}