neo-brutalism-ui

新粗獷主義 UI (Neo-Brutalism UI)

一個介面透過敞開的結構來贏得信任，並大聲宣告它的存在，因為每一個邊框和陰影都是一個陳述的事實。

採用平面、大膽的色塊，搭配粗黑邊框和無模糊的偏移實色陰影。此風格源自 Gumroad 等產品網站和 Figma 社群工具包，是對企業柔美風格的刻意回應。

時期： 2020–至今 · 年代： 當代與空間 · 領域： 圖形與 UI 設計 · 別稱： Neubrutalism, Neobrutalism, Brutalist Web UI

何時載入此技能

當用戶要求下列關鍵字時載入：「neo-brutalism」、「neubrutalism」、「neobrutalist」、「brutalist ui」、「thick black borders」、「hard shadow」、「offset shadow」、「gumroad style」、「loud flat colours」、「sticker style」。

適用於：創作者經濟產品、獨立 SaaS 登陸頁面、開發者工具網站、作品集、活動與節慶網站。

不應使用的情況：

• 品牌需要傳達低調奢華、醫療照護或銀行安全。
• 介面是密集的企業工具，因為 3px 邊框和 4px 陰影會佔據每一行空間。
• 用戶期望原生的平台外觀，例如作業系統的設定畫面。

系統指令

產生 UI 或圖形版面時，你必須：

1. 在每個卡片、按鈕、輸入框和圖片周圍繪製 2px 到 4px 的純黑色 #000000 邊框。
2. 每個凸起的元素都投射一個無模糊的實色陰影，偏移量為 4px 4px，例如 4px 4px 0 0 #000000。
3. 使用 100% 不透明度的平面飽和色填充表面，並在單一頁面上使用兩到四種搶眼的色調。
4. 滑鼠懸停時，將元素移動與陰影偏移相同的距離，並將陰影設為 0，使其看起來像按壓進頁面中。
5. 僅使用 0px 到 8px 的圓角半徑，且同一頁面上的所有元素使用相同值。
6. 將標題設定為粗體無襯線或等寬字體，字重 700 或更高，尺寸從 48px 到 96px。
7. 保持文字在色塊上為黑色，並確保每個填充的對比度至少達到 7:1。

防護欄

以下每一行都破壞了此風格。在回傳輸出前，請對照清單檢查。

• 絕不： 使用模糊半徑大於 0px 的模糊投影。
• 絕不： 使用微妙的灰色漸層或表面上的光滑高光。
• 絕不： 使用低飽和度的粉彩填充搭配灰色文字。
• 絕不： 使用 1px 的細邊框，或使用黑色以外的邊框顏色。
• 絕不： 在同一頁面上混合不同圓角半徑，例如卡片 4px 而按鈕 24px。
• 絕不： 使用半透明或背景模糊的面板。
• 絕不： 標題使用低於 500 的細字重。

向量輪廓

軸線	分數	1 分代表	5 分代表
裝飾性	■■■□□ 3/5	純粹極簡	極繁主義
立體感	■■□□□ 2/5	嚴格 2D	全 3D / 空間
網格剛性	■■■□□ 3/5	混沌 / 有機	嚴格的數學網格
擬物寫實	■□□□□ 1/5	抽象數位	擬真材質
字體表現力	■■■■□ 4/5	中性 / 隱形	實驗性 / 插畫式

維持這些分數。如果一個請求將某軸線移動了 2 分或更多，表示已偏離此風格：請轉至「譜系回退」。

空間與網格邏輯

• 網格機制： 12 欄網格，欄距 24px 至 32px，卡片佔據 2、3 或 4 欄區塊；偏移陰影增加 4px 至 8px 的視覺寬度。
• 留白比例： 表面 25–40% 為開放空間；間距尺度為 8, 16, 24, 32, 48, 64px，卡片內距為 24px。
• 對齊規則： 文字靠左對齊；區塊放置在網格邊緣，僅允許貼紙和徽章有 1 到 2 度的輕微傾斜；區塊之間以全寬的 3px 黑色分隔線切割。
• 容器幾何： 矩形，圓角半徑 0px 至 8px，3px 黑色邊框，4px 4px 0 0 #000000 陰影；藥丸形狀僅用於標籤，使用 999px 半徑。

字體排印

• 分類： 粗獷無襯線體 · 等寬字體 · 粗襯線體
• 字距： 展示尺寸使用 -0.03em；內文保持 0；全大寫標籤使用 +0.05em。
• 行高： 展示文字 1.0 至 1.1；內文 1.5；標籤 1.2。
• 層級規則：
  • 標題使用字重 700 或 800，內文使用 400 或 500；跳過輕字重。
  • 標題設為 48px 至 96px，內文設為 16px 至 18px，比例約為 3:1 或更高。
  • 按鈕和標籤設定為粗體大寫，尺寸 14px，字距 +0.05em。
  • 將標題的關鍵字放在帶有 3px 黑色邊框的色彩強調區塊中。

字體配對

展示字體	內文字體	備註
Space Grotesk	DM Sans	怪誕的無襯線標題搭配樸素內文。
Archivo Black	Work Sans	重量的海報級展示字體，適合大字標題。
Bricolage Grotesque	Inter	壓縮、高對比的展示字體搭配中性內文。
Space Mono	Space Grotesk	等寬標籤，營造原始、技術性的語調。

色彩與燈光

• 調色板結構： 黑色輪廓，暖白色或黃色頁面背景，以及兩到四種搶眼的平面色調，例如粉紅、藍色和綠色，各為 100% 不透明度，並以大區塊使用。
• 對比規則： 每個搶眼色塊上的黑色文字至少達到 7:1 對比度，例如在檸檬黃上 15:1，在電光藍上 7:1；白色文字僅允許在黑色填充上使用；3px 黑色邊框為每個控制項提供 21:1 的邊緣對比。
• 表面處理： 100% 不透明度的平面不透明色塊，無漸層、無紋理、無透明度；可選的點狀或網格圖案，以 8% 黑色疊加在頁面背景上。
• 光線與陰影： 不模擬任何光源；4px 4px 0 0 #000000 的硬偏移陰影落在右下角，無模糊，作用如同輪廓的延伸。

調色板

名稱	十六進位色碼	角色
墨色 Ink	#000000	邊框、陰影和文字
奶油 Cream	#FFF8E7	頁面背景
檸檬 Lemon	#FFE14D	強調和主要填充
螢光粉紅 Hot Pink	#FF5DA2	強調填充
電光藍 Electric Blue	#4D7CFF	次要強調
薄荷 Mint	#6EE7B7	成功和標籤填充
白色 White	#FFFFFF	卡片表面

材質與紋理

• 表面模擬： 無；表面如同平整裁切的紙張或貼紙素材，帶有黑色輪廓和硬陰影，不模仿任何真實材質。
• 邊框規則： 純色 #000000 邊框，小型控制項 2px，卡片 3px，主視覺區塊 4px；邊框顏色在狀態間永不改變。
• 模糊與高度： 到處都是 0px 模糊；高度等於陰影偏移量：標籤 2px 2px，卡片和按鈕 4px 4px，模態框 8px 8px，全部為 #000000。

裝飾與圖標

• 圖標： 粗線條圖標，筆畫 2.5px 至 3px，採用方形或圓形端點，尺寸 24px，顏色為黑色，通常置於帶有 2px 邊框的彩色圓圈內。
• 插圖： 使用大膽調色板的平面插圖，帶有粗黑色輪廓，並包含貼紙、星星和箭頭；手繪風格標記也受歡迎。
• 裝飾元素： 貼紙與徽章 · 跑馬燈文字帶 · 星爆圖案 · 點狀網格背景 · 箭頭與底線塗鴉

動態與互動

• 原生於螢幕： 是
• 轉場物理： 懸停和按下時，元素正好平移陰影偏移量的距離，使陰影看起來像是塌陷；移動簡短、線性且無超調。
• 緩動函數： cubic-bezier(0.2, 0, 0, 1)
• 持續時間 (毫秒)： 120
• 懸停與啟用： 懸停時元素向右和向下移動 4px，並將陰影設為 0 0 0 0；啟用時保持該位置；聚焦時添加 3px 實線 #4D7CFF 的輪廓，偏移 2px。

程式碼與權杖入門

在根元素上設定 data-style="neo-brutalism-ui" 並貼上權杖。檔案 tokens.css 包含相同的權杖和一組參考規則。

[data-style="neo-brutalism-ui"] {
  --color-bg: #FFF8E7;
  --color-surface: #FFFFFF;
  --color-text: #000000;
  --color-muted: #3A3A3A;
  --color-primary: #FFE14D;
  --color-accent: #FF5DA2;
  --color-border: #000000;
  --font-sans: "DM Sans", "Work Sans", system-ui, sans-serif;
  --font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --border-radius: 4px;
  --border-width: 3px;
  --shadow-elevation: 4px 4px 0 0 #000000;
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 120ms;
  --shadow-large: 8px 8px 0 0 #000000;
  --accent-blue: #4D7CFF;
  --color-on-bg: #000000;
  --color-on-surface: #000000;
  --color-on-primary: #000000;
  --color-on-accent: #000000;
  --color-muted-on-bg: #3A3A3A;
  --color-muted-on-surface: #3A3A3A;
  --color-link: #000000;
  --color-link-on-surface: #000000;
  --display-weight: 700;
  --subhead-weight: 700;
  --body-weight: 500;
  --strong-weight: 700;
  --label-weight: 700;
  --display-tracking: -0.03em;
  --display-leading: 0.95;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 17px;
  --icon-stroke: 2.5;
}

Tailwind 模式：

元素	類別
頁面	bg-[#FFF8E7] text-black font-sans antialiased p-6 md:p-12
卡片	rounded bg-white p-6 border-[3px] border-black shadow-[4px_4px_0_0_#000000]
按鈕	rounded border-[3px] border-black bg-[#FFE14D] px-6 py-3 text-sm font-bold uppercase tracking-[0.05em] text-black shadow-[4px_4px_0_0_#000000] transition-all duration-[120ms] hover:translate-x-1 hover:translate-y-1 hover:shadow-none
輸入框	rounded border-[3px] border-black bg-white px-4 py-3 text-black shadow-[4px_4px_0_0_#000000] outline-none focus:outline-[3px] focus:outline-offset-2 focus:outline-[#4D7CFF]
標題	font-extrabold text-5xl md:text-7xl leading-none tracking-[-0.03em] text-black
標籤	inline-block rounded-full border-2 border-black bg-[#6EE7B7] px-3 py-1 text-xs font-bold uppercase shadow-[2px_2px_0_0_#000000]

視覺套件

此風格的圖片和圖標為檔案。請照原樣使用它們，或將其視為規格說明，並以相同的視覺語言自行繪製。

檔案	內容
pack/hero.svg	主視覺面板，800 x 600。以該風格的視覺語言繪製的抽象圖片。
pack/pattern.svg	圖案瓷磚，80 x 80。可雙向重複拼貼。
pack/icons.svg	圖標精靈：首頁、搜尋、愛心、星星、鈴鐺、用戶、郵件、日曆、圖片、閃電、播放、勾選、關閉、滑桿。

• 圖標： 輪廓風格，筆畫 2.5，繪於 24px 的畫布上，方形端點，斜角接合，容器：方形。使用方式：<svg class="icon"><use href="pack/icons.svg#home"/></svg>。圖標接受 currentColor。
• 圖標家族： 精靈來源為 Phosphor (Bold) by Phosphor Icons，MIT 授權。理由：粗線條與笨重的字重，能搭配粗邊框。它是一個用於演示的開源替代品。對於正式產品，請使用品牌的圖標庫，並依照下方規則選擇家族。
• 展示字型： 字重 700，字距 -0.03em，行高 0.95，大小寫：無。
• 字重： 展示 700，副標題 700，內文 500，粗體文字 700，標籤和按鈕 700。此風格僅使用兩種字重 (500, 700)，無其他。展示字重比內文重 200。強調效果來自字重：較重的詞即為強調，因此字重之間的階梯清晰。
• 內文字型： 17px，行高 1.5。
• 頁面： 主視覺左右分割，靠左對齊，緊湊密度，強調傾斜 -1°。
• 文字顏色： --color-text 僅用於主要閱讀區域。在其他每個區域上，使用其對應的權杖：--color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent。

如何選擇圖標包

圖標包是圖片的字體。請如同選擇文字字體般謹慎選擇。這些規則同時適用於開源套件和授權庫。

1. 筆畫匹配主幹粗細。 將圖標與內文字體放在一起比較。圖標線條的粗細應與字母主幹的粗細一致。
2. 端點和轉角遵循半徑權杖。 平頭端點和斜角接合搭配零半徑。圓形端點和圓角接合搭配柔和的半徑。
3. 填充模式遵循時代技術。 印刷時代會裁切實心形狀。螢幕時代透過深度填充和塑造形體。當前的產品介面繪製輪廓。
4. 隱喻不應晚於風格年代。 每個圖片都應是該時代已知的物體。帶有較晚時代隱喻的圖標會破壞時代感。
5. 一個家族，一個網格。 所有圖標來自同一個家族和同一個變體，繪製在同一個畫布上。不要在同一個表面上混合不同家族。
6. 該家族需涵蓋產品需求。 在確認之前，列出產品所需的每個概念。如果某個家族缺少其中任何一個圖標，它就是錯誤的家族。
7. 顏色是權杖。 圖標接受 currentColor。第二種色調應來自權杖，而非來自檔案。
8. 授權許可使用。 閱讀該套件的授權條款。若授權要求，請給予標註。有品牌的產品應使用其授權庫，並套用相同規則來選擇家族。

譜系回退

當用戶要求變化時，請不要即興發揮。應趨向此處命名的相鄰風格，並載入其技能。

• 如果用戶要求更平靜：趨向 flat-design (扁平設計)。將邊框縮減至 1px，移除偏移陰影，並將填充飽和度降至 60%；保留平面色塊和網格。

• 如果用戶要求更有秩序：趨向 swiss-international (瑞士國際風格)。將調色板縮減為黑色、白色和一種紅色，設定 0px 半徑，文字靠左對齊，使用 12 欄網格；保留 2px 分隔線。

• 如果用戶要求更具應用程式感：趨向 bento-grid-ui (Bento 網格 UI)。將內容填充到由混合尺寸區塊組成的矩形網格中，間距 16px；保留 3px 邊框和硬陰影。

• 如果用戶要求更精緻：趨向 material-design (Material Design)。改用 8px 半徑、1px 邊框和 0 2px 4px rgba(0, 0, 0, 0.2) 的軟陰影；保留一種大膽的強調色。

• 源自於此（如需更正統版本可前往）： flat-design

• 排斥風格（相反極端，請勿混合）： corporate-memphis