請僅在使用者明確選擇或已確認的專案配置指定此風格後，才使用此技能。對於未說明的全新 UI 需求，請改用樣式選擇器，而非自行決定使用者的偏好。現有的品牌、無障礙規範與使用者覆寫設定，其優先級高於以下所有範例。以下風格指南並非在樣式選擇前就開始 UI 編碼的許可證。
風格包：新粗獷主義
ID： neo-brutalism
特色： 玩味大膽的色彩、高對比黑色邊框、硬邊無模糊偏移陰影，以及觸覺機械式的按壓回饋。
這是一個風格包，而非強制預設值。僅在明確選擇或確認適用的專案風格後才載入。專案說明可覆蓋個別選擇。請保留無障礙性、實用性與品牌限制。字體為建議，非必要依賴項。一個帶有圓角與柔和模糊投影的扁平卡片不符合新粗獷主義。
適用場景與取捨
- 適用於： 創作者工具、玩趣的 B2B SaaS、現代開發者入口網站、駭客松/活動平台、獨立產品網站，以及需要鮮明個性的行銷頁面。
- 需謹慎使用： 正式的財務報告或企業法律流程，除非品牌明確針對充滿活力、非傳統的受眾。
- 參考方向：
- 輕量流行畫布： 清爽奶油色或暖紙基底（
#FFFDF7/#F4F0EA），搭配高對比黑色筆觸（#121212）、電光藍色調填充（鮮黃#FFDE59、醒目藍綠#4DEEEA、珊瑚紅#FF5E5B），以及清晰無模糊的陰影（5px 5px 0 #121212）。 - 暗黑流行對比： 深色墨水畫布（
#18181B），搭配純白邊框（2.5px solid #FAFAFA）、鮮豔萊姆/紫色調點綴，以及白色/點綴色偏移陰影（4px 4px 0 #FAFAFA）。
- 輕量流行畫布： 清爽奶油色或暖紙基底（
新粗獷主義材質保真把關 — 必做
在宣告新粗獷主義頁面完成之前，首屏必須明顯閱讀起來像一幅真實的新粗獷主義構圖。 如果使用者選擇了此風格，一個帶有微妙圓角和標準模糊陰影的通用卡片即為失敗，即使 CSS 類別包含 neo。
一個成功的新粗獷主義實作需展現所有以下特徵：
- 高對比實心外框： 核心容器、可操作按鈕、輸入框與徽章，皆須具有清晰的實心邊框（
2px–3px solid #121212）。不得有微弱的灰色極細線條。 - 硬邊無模糊偏移陰影： 表面投射出銳利、0 模糊的方向性陰影（控制項用
4px 4px 0 #121212，卡片用6px 6px 0 #121212至8px 8px 0 #121212）。柔和模糊陰影即為直接失敗。 - 機械式按壓塌陷： 在
:active或點擊時，互動按鈕應沿陰影軸物理下沈（transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212;），提供無誤的觸覺機械回饋。 - 鮮豔有意的色塊： 一個平衡的高對比色板：1 個畫布基底色 + 1 個強烈墨色 + 1–2 個用於主要動作與語義分組的目標飽和點綴色。
- 大膽不對稱字體結構： 自信的怪誕或幾何字體，搭配緊湊行高，並在巨型顯示標題與可讀內文之間形成清晰對比。
首屏測試： 在桌面截圖中，無需閱讀頁面標題即可辨識出粗黑邊框、硬邊 0 模糊偏移陰影以及觸覺按鈕狀態。如果它看起來像標準的扁平 SaaS 版面，請在繼續之前修訂邊框和陰影 token。
明確的新粗獷主義硬陰影例外 — 陰影允許銳利
新粗獷主義特定覆寫： 針對「過度裝飾或分散注意力的陰影」的通用反草率警告，不得被解釋為禁止在此使用硬邊偏移陰影或黑色外框。這些是材質啟用屬性，對於新粗獷主義的物理感和視覺清晰度至關重要。
- 允許的材質處理： 實心 0 模糊偏移陰影（
4px 4px 0 #000）、2–3px 黑色邊框、徽章旋轉（僅限徽章，介於 -2° 和 +2° 之間），以及高對比色塊。 - 色彩對比紀律： 所有放置在鮮豔點綴色背景（黃、藍綠、萊姆、珊瑚）上的文字，必須對黑色墨色（
#121212）進行測試，以超過 WCAG AA（4.5:1）。純白文字嚴格保留給深色墨色填充。 - 反草率解讀： 應根據易用性、版面結構與可讀性來評估新粗獷主義元素，而非計算硬陰影數量。為滿足通用極簡啟發法而移除硬邊偏移陰影，屬於設計倒退。
字體與風格
表現力強、自信的怪誕無襯線字體：Space Grotesk、Archivo、Syne 或系統無襯線字體。標題桌面端 36–56 px / 行動端 28–40 px；字重 700–800。內文 15–17 px，字重 400–500；行高 1.45–1.55。章節索引與元資料可使用大寫追蹤（letter-spacing: 0.05em）。使用有力、人性化的微文案，避免空洞的口號。
色彩方向
- 明亮模式（俏皮流行亮色）：
- 畫布基底： 米白 / 淺奶油色（
#FFFDF7或#F7F5F0）。 - 卡片背景： 純白（
#FFFFFF）或淺色調色塊。 - 墨色 / 筆觸： 灰黑（
#121212）。 - 偏移陰影： 實心黑色（
4px 4px 0 #121212）。
- 畫布基底： 米白 / 淺奶油色（
- 暗黑模式（暗黑流行對比）：
- 畫布基底： 深色墨水畫布（
#18181B）。 - 卡片背景： 升高的暗木炭色（
#222227）或深灰板岩（#27272A）。 - 墨色 / 筆觸： 純白 / 奶油色（
#FAFAFA）。 - 偏移陰影： 純白或鮮豔點綴色（
4px 4px 0 #FAFAFA或4px 4px 0 var(--taste-neo-accent-primary)）。
- 畫布基底： 深色墨水畫布（
- 主要點綴色： 鮮豔的流行色（例如電光黃
#FFE600、熱情珊瑚#FF5757、皇家鈷藍#3B5BFF）。 - 次要點綴色： 互補對比色（例如清爽薄荷
#00F0A8或丁香紫#D8B4FE）。 - 主題耦合與衝突避免規則： 在暗黑模式中，邊框與偏移陰影必須切換為淺色/白色或明亮點綴色。在深色畫布上保留黑色邊框與黑色陰影會導致深度與對比度完全喪失（黑底黑字）。所有放置在鮮豔點綴色背景（黃、藍綠、萊姆、珊瑚）上的文字，必須對黑色墨色（
#121212）進行測試，以超過 WCAG AA（4.5:1）。純白文字嚴格保留給深色墨色填充。
版面與幾何
角落為直角或輕微圓角（0px–8px 最大）；留白充足（卡片上為 20px–32px）；2px–3px 實心邊框；4px–8px 硬邊偏移陰影。間距使用堅實的 8px 網格。版面應感覺紮實、有力且自信。
表面、深度、紋理
表面乾淨、不透明且實心：
- 按鈕（凸起）：
background: var(--taste-neo-accent); border: 2.5px solid #121212; box-shadow: 4px 4px 0 #121212; - 按鈕（啟用/按下）：
transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212; - 卡片與面板：
background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 6px 6px 0 #121212; - 輸入欄位：
background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 3px 3px 0 #121212;（聚焦時縮小）。
元件解剖學與互動
- 主要動作（CTA）： 大膽彩色藥丸/矩形，帶有硬邊偏移陰影、粗筆觸與觸覺點擊凹陷。
- 次要動作： 白色或透明填充搭配黑色邊框，反色懸停效果（
background: #121212; color: #FFFFFF;）。 - 表單控制項： 帶有清晰標籤的外框輸入框，獨特的聚焦狀態使用彩色偏移發光或加深筆觸。
- 狀態徽章 / 標籤： 高對比藥丸形狀，2px 筆觸，微妙的 2px 偏移陰影，以及簡短具體的標籤。
- 卡片： 清晰的隔線（
border-bottom: 2px solid #121212）分隔卡頭、內文與動作頁尾。
動態效果
100–160 ms 清晰的線性或 ease-out 過渡。按壓時直接 1–2px 位移。切勿使用漫長彈性彈簧、浮動循環或卡通振盪。
可選的 Anime.js v4 範例
- 動態決策： 短直接 1–2px 按鈕位移，搭配匹配的硬陰影回應；切勿對巨大陰影進行動畫。
- 起始持續時間： 130ms（0 = 立即）；根據任務與使用者偏好調整。
- 避免： 彈跳與無休止移動的貼紙。
- 依賴項： 預設使用 CSS/原生。僅在要求的互動合理時才使用 Anime.js v4。若存在
references/motion-engine.md，請遵循 Taste Engine；獨立技能則遵循上述減少動態與無裝飾性循環原則。
UI 文案與微文案
充滿活力、直言不諱且直接。範例：「開始建置」、「取得程式碼」、「已複製到剪貼簿」。在使用者工具中避免企業行話或可愛的備忘錄文字。
起始 Token（建議，非完整主題）
| Token | 明亮模式預設值 | 暗黑模式預設值 |
|---|---|---|
--taste-neo-bg | #fffdf7 | #18181b |
--taste-neo-card-bg | #ffffff | #222227 |
--taste-neo-ink | #121212 | #fafafa |
--taste-neo-border | 2.5px solid #121212 | 2.5px solid #fafafa |
--taste-neo-shadow-sm | 3px 3px 0 #121212 | 3px 3px 0 #fafafa |
--taste-neo-shadow-md | 5px 5px 0 #121212 | 5px 5px 0 #fafafa |
--taste-neo-shadow-lg | 8px 8px 0 #121212 | 8px 8px 0 #fafafa |
--taste-neo-accent-primary | #ffe600 | #ffe600 |
--taste-neo-accent-secondary | #ff5757 | #ff5757 |
--taste-neo-radius | 6px | 6px |
--taste-neo-font-body | Space Grotesk, Archivo, system-ui, sans-serif | Space Grotesk, Archivo, system-ui, sans-serif |
--taste-neo-motion-duration | 130ms | 130ms |
Token 代表一個方向，並非每個色板/平台的複製貼上保證。請在專案層級定義 --taste-neo-* token，確保色彩對比，並透過主題 token 進行調整，而非散佈字面值。
Hero 構圖（完整首屏）
當公開的 portfolio/著陸頁/首頁具有 hero 區域時： 使用一個可見螢幕的頁首+hero 構圖。基本高度為 min-height: 100svh，並以 100vh 作為備用，僅在頁首位於正常流程中時才真正減去頁首；讓 hero 為了無障礙性與短小行動螢幕而擴展。請勿將其應用於私人儀表板或其他任務畫面；使用者的直接覆寫優先。風格特定方向： 透過大膽的不對稱區塊、紮實的顯示字體以及一個高對比的主要動作，讓整個 viewport 充滿活力。粗邊框與偏移陰影保持目的性；請勿堆疊貼紙、額外外框盒子或旋轉裝飾來填滿畫面。若存在 references/hero-layout.md，請參考。獨立使用遵循相同的回應式與反草率原則。
風格特定品質把關
- 務必： 驗證硬邊無模糊偏移陰影；維持 2–3px 實心邊框；測試觸覺按壓位移；驗證文字對比（黑墨色在黃/藍綠/薄荷色上）；驗證明亮/暗黑模式切換，使邊框、偏移陰影與墨色正確反轉，且絕不消失在深色背景中。
- 切勿： 請勿為新粗獷主義陰影添加模糊或擴散；避免柔和低對比粉彩；請勿在黃色或薄荷色按鈕上放置純白文字；請勿在深色畫布上保留黑色邊框/陰影。
- 確認桌面與行動裝置一致性；可見的鍵盤焦點（
:focus-visible）；載入、空白、禁用、錯誤與成功狀態；減少動態行為（prefers-reduced-motion）。 - 請勿將風格特定假設注入不相關的專案。當結合風格時，明確命名主要風格與借用的功能。
通用反草率閘門（自包含）
每個元素都必須有其存在的理由。內容優先於裝飾。請勿裝飾不確定性。 請勿捏造餘額、指標、見證、使用者、標誌、批准、已驗證/線上/離線狀態、假活動或成功確認；請使用誠實的空白/載入/錯誤狀態。僅在要求並明確標記時，示範資料才是可接受的。
請勿添加裝飾性的卡片內嵌卡片層：一個巢狀表面必須代表一個不同的互動或資訊邊界。避免自動生成的 3 功能網格、4 統計儀表板、假的 hero 宣稱、無目的的圖表、徽章/標籤/圖示垃圾郵件、無關聯的裝飾藝術，以及僅為填滿 viewport 的隨機循環。偏好使用字體、間距、對齊與分隔線進行分組。對等的同級元素需要有意圖的視覺平衡。
反草率文案： 無通用的「解鎖你的潛力」、「體驗未來」、「超加速你的工作流程」、「無縫」等宣稱，或其翻譯對等物。標題必須傳達實際內容，CTA 必須命名動作，空白/錯誤/成功文字必須描述真實狀態與後續步驟。避免虛假緊迫感、捏造的計數、模糊的 AI 炒作、無意義的 emoji 以及不可訪問的全大寫牆。根據此風格與使用者的語言調整措辭，但不得改變事實。
主題與模式對比完整性： 當使用者要求暗黑模式或明亮模式（或建立主題切換器）時，背景與前景顏色必須在所有表面、文字、邊框、輸入框與語義徽章上以同步配對的方式翻轉。絕不允許黑色文字在深色背景上、白色文字在白色背景上，或不可讀的低對比狀態色塊。所有狀態必須符合 WCAG AA 對比（正文/一般文字至少 4.5:1，大標題與互動邊界至少 3:1）。
回應式與動態： 有目的地為行動裝置構圖，檢查長標籤、焦點狀態與可訪問對比度；不得裁剪文字以適應時髦版面。預設為靜態；將動態用於有意義的互動，尊重減少動態偏好，避免在無真實狀態的情況下進行彈跳/浮動/脈衝裝飾。
關鍵/高優先級問題阻止完成： 偽造的狀態/資料、損壞的動作、不可訪問/裁剪的控制項、誤導性文案、主題對比衝突或重大行動裝置失敗必須修復。報告實際驗證的內容；請勿聲稱未執行的測試。
非美學否決： 表現力豐富的色彩、陰影、漸層、卡片版面或…
… [為翻譯而截斷]