僅在使用者明確選擇此風格，或已確認的專案配置指定此風格時才使用。對於未說明的新 UI 請求，請使用風格選擇器，而非替使用者決定其品味。現有的品牌、無障礙和使用者覆寫規則優先於以下所有範例。以下風格指南並非在選擇風格之前就開始 UI 編碼的許可證。
風格套件：粗獷主義 (Brutalism)
ID： brutalism
標誌： 原始的結構誠實、裸露的佈局鷹架、不妥協的單色對比，及零裝飾偽裝。
這是風格套件，非強制預設值。僅在明確選擇或確認的適用專案風格後才載入。專案指示可覆寫個別選擇。保留無障礙性、實用性與品牌限制。字型為建議，非必要依賴。混亂、佈局破損且字型大小任意的頁面不符合建築粗獷主義。
適合情境 / 取捨
- 適合： 前衛作品集、行動主義平台、建築檔案庫、獨立出版、藝術/文化機構，以及追求不妥協結構真實性的開發者工具。
- 謹慎使用： 傳統大眾市場消費者應用，其中裝飾性的熟悉感與溫和美感可減少使用者初始猶豫。
- 參考方向：
- 建築 Béton Brut： 未加工混凝土灰 (
#E8E8E8至#DCDCDC)、純粹的極黑線條 (#000000)、裸露的結構性網格分割，以及等寬的建築元數據。 - 極簡單色鷹架： 純白背景 (
#FFFFFF) 搭配厚重黑色邊框 (2.5px solid #000000)、極黑區塊操作，及零修飾裝飾。
- 建築 Béton Brut： 未加工混凝土灰 (
粗獷主義材料忠實度閘門 — 強制
在呼叫粗獷主義頁面完成之前，初始視口必須明顯讀取為原始、誠實的結構組成。 若使用者選擇此風格，一個僅套用無樣式預設值或混亂重疊文字的一般網站即為失敗。
一個成功的粗獷主義實作需展示所有下列項目：
- 裸露的結構鷹架： 網格線、章節分隔線與內容容器由可見的實心黑色邊框 (
2px–3px solid #000000) 構成，凸顯網頁的結構骨架。 - 零裝飾偽裝： 絕對沒有柔和的模糊陰影、沒有光澤反射、沒有圓形氣泡角落、也沒有半透明玻璃模糊效果。表面平坦、不透明、且毫不掩飾地直接。
- 高度紀律的對齊： 儘管材料樸實，對齊仍須精準。欄位、邊框與列必須無縫鎖定，無任意偏移。
- 極簡高對比色盤： 不妥協的黑底白字或黑底混凝土單色對比，符合 WCAG AAA（7:1+）。顏色僅用於操作警示信號（純紅
#FF0000或原始警示黃#FFD700）。 - 即時互動狀態轉換： 按鈕與互動元素在
:hover和:active時立即翻轉（例如從黑底白字立即反轉為白底黑字），無延遲 easing 或人造彈簧物理效果。
首次視口測試： 在桌面截圖中，不需閱讀頁面標題即可辨識出裸露的結構邊框網格、扁平無裝飾的平面，以及極簡單色權威感。若包含圓角卡片或柔軟陰影，請立即移除裝飾偽裝。
明確的粗獷主義結構例外 — 暴露網格邊框為必要
粗獷主義特定覆寫： 禁止「過多邊框或尖銳對比」的通用反馬虎警告，不得解釋為在此禁止使用厚重黑色分隔線（2px–3px solid）或裸露的結構鷹架。在建築粗獷主義中，結構接縫與誠實材料應被頌揚，而非隱藏在修飾油漆之後。
- 允許的結構處理： 可見的 2px–3px 結構邊框、原始的矩形容器、高對比等寬元數據，以及立即的顏色反轉狀態。
- 反馬虎邊界： 不要故意透過重疊內文段落、使用難以閱讀的霓虹衝突色，或讓按鈕無法定位來破壞無障礙性。真實的粗獷主義是高度功能性的，而非隨機破損。
- 反馬虎解讀： 根據結構完整性、功能實用性與可讀性評估粗獷主義佈局，而非試圖柔化硬邊。為滿足通用柔和啟發式規則而移除結構邊框即為設計退化。
字體與排版
堅定不移、粗重的無襯線或技術等寬字型：Arial, Helvetica, IBM Plex Sans, IBM Plex Mono 或系統無襯線字型。標題：44–72 px（桌面）/ 30–44 px（行動裝置）（字重 800–900，緊密行高 1.05–1.15）。內文：16–18 px（字重 400，行高 1.5）。元數據、時間戳記與章節索引使用等寬字型。
色彩方向
- 亮色模式（極簡白紙）：
- 畫布底色： 極簡白紙白 (
#FFFFFF) 或建築混凝土 (#E5E5E5)。 - 結構墨色/邊框： 純黑 (
#000000)。 - 表面區塊： 高對比實心填色 (
#000000或#FFFFFF)。
- 畫布底色： 極簡白紙白 (
- 暗色模式（負片反轉）：
- 畫布底色： 極簡漆黑 (
#000000)。 - 結構墨色/邊框： 純極白 (
#FFFFFF)。 - 表面區塊： 高對比實心暗色填色 (
#000000或#121212)。
- 畫布底色： 極簡漆黑 (
- 操作信號強調（僅單一顏色）： 信號紅 (
#FF0000/#FF3333) 或警告琥珀 (#FFCC00)。 - 主題反轉規則： 在粗獷主義中，暗/亮色模式是一種權威性的極性翻轉。暗色模式中，畫布為
#000000，文字/邊框為#FFFFFF。按鈕在懸停時乾淨地反轉（亮色模式：白色按鈕翻轉為黑色填色 + 白色文字；暗色模式：黑色按鈕翻轉為白色填色 + 黑色文字）。嚴格禁止黑色文字在黑色背景上，或白色文字在白色背景上。
佈局與幾何
角落嚴格為方形 (border-radius: 0px)。結構邊框：2px–3px solid #000000。內容區塊彼此緊密貼合，或保持固定的 16px/24px 模組化間距。
表面、深度、紋理
表面 100% 扁平、不透明且具結構性。零陰影。零漸層。深度完全透過將黑色區塊疊加在白色框架上，以及前景與背景顏色的立即反轉來建立。
元件解剖學與互動
- 粗獷主義按鈕： 厚重黑色邊框 (
2px solid #000000)、白色背景、粗體大寫文字；懸停/啟用時立即反轉為實心黑色背景與白色文字。 - 結構面板： 帶有厚重頂部/底部邊框的矩形容器；內部章節之間的分隔線。
- 元數據標籤： 包含在方括號內的等寬標籤：
[DOC_REF: 4092]。 - 表單控制項： 無裝飾的輸入欄位，帶有厚重黑色邊框與高對比實心黑色焦點環 (
outline: 3px solid #000000; outline-offset: 2px;)。
動態效果
預設為立即狀態翻轉（0 ms）或非常簡短的線性過渡（60–100 ms）。無彈跳、無 easing 曲線、無視差、無裝飾性過渡。
可選 Anime.js v4 配方
- 動態決策： 預設為立即狀態翻轉；Anime.js 通常對真實的粗獷主義來說非必要。
- 起始持續時間： 0ms（立即）；僅在需要特定功能性機械滑動快門時才調整。
- 避免： 彈簧、滑動揭示、劇院式捲動動畫。
- 依賴： 預設使用 CSS/原生。當 Taste Engine
references/motion-engine.md可用時遵循；獨立技能遵循上述減少動態與無裝飾循環原則。
UI 寫作與微文案
直接、不道歉且基於事實。範例：“INDEX”, “DOWNLOAD SPECIFICATION”, “TERMINAL ERROR: CONNECTION LOST”, “CONFIRM”。避免閒聊式對話文案或說服性行銷用語。
起始記號（建議，非完整主題）
| 記號 | 亮色模式預設 | 暗色模式預設 |
|---|---|---|
--taste-brutal-bg | #ffffff | #000000 |
--taste-brutal-ink | #000000 | #ffffff |
--taste-brutal-surface | #ffffff | #121212 |
--taste-brutal-border | 2.5px solid #000000 | 2.5px solid #ffffff |
--taste-brutal-radius | 0px | 0px |
--taste-brutal-signal | #ff0000 | #ff3333 |
--taste-brutal-font-heading | 'Arial Black', Arial, Helvetica, sans-serif | 'Arial Black', Arial, Helvetica, sans-serif |
--taste-brutal-font-body | Arial, Helvetica, sans-serif | Arial, Helvetica, sans-serif |
--taste-brutal-font-mono | 'IBM Plex Mono', monospace | 'IBM Plex Mono', monospace |
--taste-brutal-motion-duration | 0ms | 0ms |
記號代表方向，不保證可複製貼上到每個色盤/平台。在專案層級定義 --taste-brutal-*，確保色彩對比，並透過主題記號調整，而非散佈字面值。
英雄區塊構成（完整首個視口）
當面向公眾的作品集/登陸頁/首頁有英雄區塊時： 使用一個可見螢幕的頁首+英雄區塊構成。高度基準為 min-height: 100svh 並以 100vh 作為備援，僅在頁首處於正常流向時減去實際頁首長度；讓英雄區塊為無障礙性與短行動裝置螢幕擴展。請勿將此應用於私人儀表板或其他任務螢幕；直接的使用者覆寫優先。風格特定方向： 將首個視口構造成一個不道歉的建築巨石：巨大的顯示標題鎖定在結構鷹架內、極簡黑色行動呼籲區塊、以及零修飾填充。當存在路由器 references/hero-layout.md 時遵循。獨立使用遵循相同的響應式與反馬虎原則。
風格特定品質閘門
- 必須做： 驗證極簡單色對比；確保 2–3px 結構邊框為實心；驗證尖銳的 0px 方形角落；驗證暗/亮色模式極性反轉，使文字與背景永不衝突（無黑底黑字或白底白字）；確保信號強調保持嚴格單一。
- 禁止做： 不要添加圓角、柔軟的投影或平滑的色彩漸層；避免裝飾性填充徽章或閒聊式行銷文案；切換到暗色畫布時不要留下黑色墨色或邊框。
- 確認桌面與行動裝置一致性；可見的鍵盤焦點 (
:focus-visible)；載入、空、停用、錯誤與成功狀態；減少動態行為 (prefers-reduced-motion)。 - 不要將風格特定假設注入無關的專案。當組合風格時，明確命名主要風格與借用的功能。
通用反馬虎閘門（自包含）
每個元素必須證明其存在價值。內容優先於裝飾。不要裝飾不確定性。 不要發明餘額、指標、推薦、使用者、Logo、核准、已驗證/上線/線上狀態、假活動或成功確認；改用誠實的空/載入/錯誤狀態。僅在要求且明確標示時才能接受示範資料。
不要添加裝飾性的卡片內層卡片：巢狀表面必須代表不同的互動或資訊邊界。避免自動生成的 3 功能網格、4 統計儀表板、假的英雄區塊主張、無目的的圖表、徽章/晶片/圖示濫發、不相關的裝飾藝術，以及僅僅為了填滿視口的隨機迴圈。偏好使用字體、間距、對齊與分隔線進行分組。同等的同級元素需要刻意的視覺平衡。
反馬虎文案： 無通用“解鎖你的潛力”、“體驗未來”、“提升你的工作流程”、“無縫”等主張，或翻譯的等效用語。標題必須傳達實際內容，CTA 必須命名動作，空/錯誤/成功文字必須描述真實狀態與下一步。避免假緊迫、虛構計數、模糊的 AI 炒作、不必要的表情符號，以及難以閱讀的全大寫文字牆。根據此風格與使用者的語言調整措辭，但不改變真實性。
主題與模式對比完整性： 當使用者要求暗色模式或亮色模式（或建立主題切換器）時，背景與前景顏色必須在所有表面、文字、邊框、輸入欄位與語意徽章上同步成對翻轉。永遠不要讓黑色文字留在深色背景上、白色文字留在白色背景上，或難以閱讀的低對比狀態藥丸。所有狀態必須符合 WCAG AA 對比度（內文/一般文字至少 4.5:1，大型標題與互動邊界至少 3:1）。
響應式與動態： 有意識地撰寫行動裝置佈局，檢查長標籤、焦點狀態與可訪問對比度；無文字截斷以適應時髦佈局。預設為靜態；將動態用於有意義的互動，尊重減少動態偏好，避免沒有真實狀態的彈跳/浮動/脈衝裝飾。
關鍵/高優先級發現區塊完成： 必須修復偽造的狀態/資料、損壞的操作、無法訪問/裁剪的控制項、誤導性的文案、主題對比衝突或重大的行動裝置失敗。報告實際已驗證的內容；不要聲稱未執行的測試。
非美學否決權： 表達性的顏色、陰影、漸層、卡片佈局或裝飾性處理，當它們是所選美學的有意部分並通過可用性檢查時，是合理的。不要默默強制極簡主義。
反馬虎：風格特定
結構誠實，而非美學趣味。
- 拒絕： 圓形藥丸形狀、柔和強調色、裝飾性陰影模糊、有趣插圖、通用模板卡片，以及主題衝突（例如黑色文字留在暗色粗獷畫布上）。
- 改為： 使用厚重結構邊框暴露佈局網格、極簡字體層級、立即狀態翻轉，以及不含糊的對比。
- 文案檢查： UI 寫作必須簡潔、直接、功能性強，無行銷術語。
- 稽核： 除了此風格的品質閘門之外，並執行通用反馬虎的目的、真實性、巢狀表面、文案、響應式、無障礙性與動態檢查。不要處罰出自故意的、可訪問的、功能性的……
（原文於此處截斷，已完整翻譯所提供的內容。）