原來設計風格有名字：從 Swiss Style 到 Bento Grid。
以前只會說日系、北歐、簡約。這次從設計流派、介面版型到 CSS 框架，整理真正能拿來溝通的設計語言。
研究筆記01
先分清楚：風格不是框架
風格、流派與 UI Pattern 不完全相同。
我以前常用「日系、北歐、極簡」描述設計，但這些詞可以指色彩、氛圍，也可能是排版方法。後來才發現，真正有用的是把設計拆成理念、視覺風格、版型和設計系統四個層次。
Design movement、Visual style、UI pattern、Design system 是不同的問題。
設計沒有唯一的正確分類。Swiss 是有歷史脈絡的平面設計流派，Bento Grid 是一種排版策略，Glassmorphism 是視覺效果，Tailwind 則是實作工具。把這些名詞分清楚，才不會把風格和框架混為一談。
- 重點
- Design movement、Visual style、UI pattern、Design system 是不同的問題。
02
Swiss Style：資訊先於裝飾
清楚比花俏更重要。
瑞士國際主義平面設計讓我最有感的是 Grid、非對稱排版、無襯線字體，以及文字層級。它不是單純「黑白留白」，而是讓每個元素都有理由出現在那裡。
有明確的排列秩序，不代表每個區塊都必須對稱。
International Typographic Style 在二十世紀中葉的瑞士發展成熟。Joseph Müller-Brockmann 等設計師運用數學網格、無襯線字體及非對稱構圖，讓資訊而非裝飾成為主角。用在網站上時，字級層次、網格和閱讀欄寬比模仿某張海報的配色更重要。
- 重點
- 有明確的排列秩序，不代表每個區塊都必須對稱。
03
從 Bauhaus 到日系、北歐
歷史流派與生活美學是兩種切入角度。
Bauhaus 講究功能與幾何；日系極簡重視留白、節制與情緒；北歐設計常把明亮、溫暖、實用放在一起；Editorial 則像一本雜誌，靠字體大小、攝影和節奏帶著讀者看。這些風格不是互斥的選項。
Neo-Brutalism 用粗框、高對比和硬陰影表態；Contemporary Luxury 用克制、細節和影像建立精緻感。
Bauhaus 是跨藝術、工藝與工業設計的現代主義教育運動，不只是紅黃藍與幾何圖形。日系極簡與北歐簡約則有不同文化背景；Editorial 設計特別講究圖片與文字的節奏，像是在編一本可以互動的雜誌。
- 重點
- Neo-Brutalism 用粗框、高對比和硬陰影表態；Contemporary Luxury 用克制、細節和影像建立精緻感。
04
Bento Grid 不是一個設計學派
好看的卡片，不一定等於好操作。
最近很多 SaaS 網站用不同大小的卡片放功能、數據和產品預覽，這叫 Bento Grid。它是一種 Layout Pattern，不是像 Swiss 一樣的歷史設計流派。宣傳首頁很適合用，真正高頻操作的 Dashboard 卻未必適合把所有資訊都拆成巨大卡片。
Linear-style 的細邊框、密集資訊、低彩度視覺也是現代產品介面的常見語彙，不必照單全收。
Bento 很適合展示功能摘要；但當讀者需要比較十個案件的日期、金額與狀態，統一欄位的表格通常更有效。Glassmorphism、Neumorphism、Neo-Brutalism 等視覺效果，也需要同時考慮對比、鍵盤操作與資訊可讀性。
- 重點
- Linear-style 的細邊框、密集資訊、低彩度視覺也是現代產品介面的常見語彙，不必照單全收。
05
CSS 工具不是美學風格
先決定設計語言，再挑實作工具。
CSS Grid / Flexbox 負責版面；Tailwind CSS 提供 utility class；Bootstrap 偏向快速取得成熟元件；CSS Modules 讓樣式作用域更清楚；Sass 增加樣式組織能力。它們都不會自動把畫面變成「瑞士風格」。
shadcn/ui 提供可修改的元件原始碼，Radix Primitives 和 React Aria 著重互動與無障礙，Motion 可補上轉場。框架提供零件，設計判斷還是要自己做。
Tailwind 提供 Utility CSS；Bootstrap 提供一套既有元件；shadcn/ui 給你可以自由修改的元件程式碼；Radix Primitives、React Aria 則主要處理可存取的互動基礎。建議先定義 Design Tokens，再選框架，不然換套件很容易連風格都一起重做。
- 重點
- shadcn/ui 提供可修改的元件原始碼，Radix Primitives 和 React Aria 著重互動與無障礙，Motion 可補上轉場。框架提供零件，設計判斷還是要自己做。
06
我會怎麼選擇
先回答內容、資訊密度與使用情境。
做閱讀型頁面，我會優先看字級、欄寬、留白；功能展示則可以用 Bento；高資訊密度工具偏向清楚的表格與導航。比起追求某種熱門風格，我更想知道為什麼它適合這個場合。
同一個畫面同時混入太多圓角、玻璃、陰影、顏色和字體，最後只會失去層級。
我會先問三件事：誰在使用、最重要的訊息是什麼、下一步要做什麼？有了答案，再決定頁面需要長篇閱讀、Bento 摘要、資料表格或逐步表單。所謂簡約，不是刪掉資訊，而是讓必要的資訊更容易被找到。
- 重點
- 同一個畫面同時混入太多圓角、玻璃、陰影、顏色和字體，最後只會失去層級。
GRID.Clarity · hierarchy
余白Space · calm