設計變數Design Token
設計變數（Design Token）是替一項設計決策命名的值，例如顏色、間距、字型或動態速度。
開啟指南用例子看懂常見 UI 設計風格
看看每種風格長什麼樣、何時有幫助，以及何時會讓內容更難讀。
元件變體Variant
元件變體（Variant）是同一元件的正式版本。尺寸、重要程度或使用情境可以不同。
開啟指南視覺層級Visual Hierarchy
視覺層級（Visual Hierarchy）會用尺寸、對比、位置、間距與分組，引導使用者先看什麼、再看什麼。
開啟指南色彩對比Color Contrast
色彩對比（Color Contrast）會量測前景內容和旁邊背景的明暗差異，用來判斷重要文字與邊界是否看得清楚。
開啟指南字體排印Typography
文字排版（Typography）是選擇與安排文字樣式的方法，讓內容好讀、有層次，也符合品牌語氣。
開啟指南字級比例Type Scale
字級比例（Type Scale）是整個產品共用的一小組字級與行高。
開啟指南色彩盤Color Palette
色彩盤（Color Palette）是一組規劃好的顏色，每個顏色都分配給明確的用途、狀態或表面。
開啟指南間距比例Spacing Scale
間距比例（Spacing Scale）是一小組共用的間距值，用來表達分組並保持穩定的畫面節奏。
開啟指南圖示系統Iconography
圖示系統（Iconography）是一套外觀一致、意義清楚的符號，用來表示操作與概念。
開啟指南深色模式Dark Mode
深色模式（Dark Mode）是一套完整主題，會為深色環境調整表面、文字、邊框、媒體與狀態。
開啟指南響應式設計Responsive Design
響應式設計（Responsive Design）會依空間和裝置能力調整。版面、內容與控制項都會改變。
開啟指南遮罩層Scrim
遮罩層是覆蓋介面後方的半透明深色背景，用來分開兩個層次，並表示底下的頁面暫時不能操作。
開啟指南留白與間距Spacing
留白與間距是刻意留下的空間。它能把相關項目放在一起、分開不同概念，也讓版面有節奏。
開啟指南外距Margin
外距是元素邊框外的空間，用來拉開它和周圍版面項目的距離。
開啟指南內距Padding
內距是元素邊框內的空間，位在內容和邊緣之間。
開啟指南項目間距Gap
gap 是容器放在 Flexbox 或 Grid 子項目之間的空間，同一套規則會套用到每一組相鄰項目。
開啟指南置中單欄版面Centered Column
置中單欄版面是一個設有最大寬度的閱讀欄，左右兩側看起來留有相等空間。
開啟指南便當網格Bento Grid
便當網格把不同尺寸的方塊排進同一個版面，較大的跨欄區塊可顯示哪些內容更重要。
開啟指南文字截斷Text Truncation
文字截斷會切掉部分文字來節省空間，並用刪節號表示單行或多行內容還沒顯示完。
開啟指南長寬比Aspect Ratio
長寬比用來表示元素的寬度和高度如何相比。
開啟指南背景模糊Backdrop Blur
背景模糊會柔化半透明表面後方的內容，不會模糊表面本身的文字或控制項。
開啟指南玻璃擬態Glassmorphism
玻璃擬態是一種使用半透明分層表面的視覺風格，會搭配模糊、亮邊和適度的深度感。
開啟指南液態玻璃Liquid Glass
液態玻璃是一種會隨動態變化的半透明材質風格，會用透鏡般的折射、高光，以及看似融合或彎曲的形狀。
開啟指南擬物設計Skeuomorphism
擬物設計會借用熟悉的實體造型和材質，幫助使用者理解數位控制項怎麼操作。
開啟指南新擬物風Neumorphism
新擬物風是一種柔和、低對比的風格。它用明暗陰影，讓控制項看起來從同色表面浮起或凹下。
開啟指南新粗獷主義Neobrutalism
新粗獷主義是一種大膽、高對比的數位風格，常用簡單幾何、粗邊框、直接色彩和刻意帶機械感的構圖。
開啟指南極簡設計Minimalism
極簡設計會拿掉不需要的元素，但仍要讓產品清楚、好用，也保有自己的特色。
開啟指南扁平化設計Flat Design
扁平化設計會使用簡單形狀、純色和清楚的平面，減少假的立體效果。
開啟指南黏土擬態Claymorphism
黏土擬態是一種活潑風格，會用膨膨的形狀、圓角、柔和的內外陰影，以及像黏土的粉彩表面。
開啟指南千禧數位美學Y2K Digital Aesthetic
千禧數位美學來自 1990 年代末到 2000 年代初。它是數位文化中的復古未來風，常見鍍鉻、像素、鮮豔漸層和俏皮電腦元素。
開啟指南Frutiger Aero 清新未來風Frutiger Aero
Frutiger Aero 是 2000 年代中期的樂觀風格。它結合亮面介面、藍天、水、綠色植物、氣泡和親切的科技感。
開啟指南網頁粗獷主義Web Brutalism
網頁粗獷主義是一種看起來很原始的網頁風格。它會露出頁面結構、瀏覽器預設樣式和樸素字型，也會故意保留粗糙感。
開啟指南網路民間風格Vernacular Web
網路民間風格來自社群日常自製的網站，而不是大型機構打造的精緻設計系統。
開啟指南Aqua 水漾介面風Aqua
Aqua 是和早期 macOS 有關的亮面介面風格，常見發光控制項、凝膠般的立體感、細條紋和鮮明藍色。
開啟指南Windows Aero 透明介面風Windows Aero
Windows Aero 是 2000 年代後期的桌面風格，以半透明視窗框、模糊玻璃、柔光和分層邊框著稱。
開啟指南瑞士國際主義風格Swiss Style
瑞士國際主義風格是一種平面設計方法。它使用清楚網格和不對稱但平衡的版面，也常用無襯線字型、攝影和嚴謹層級。
開啟指南編輯設計Editorial Design
編輯設計用閱讀節奏、字型、圖片和圖說來安排故事。頁面結構也會重複出現。
開啟指南Material Design 材質設計Material Design
Material Design 是一套元件和互動系統，會使用分層表面、有目的的動態、彈性版面和共用設計 Token。
開啟指南漸層Gradient
漸層是色彩或透明度平順變化的效果，可以沿著直線、圓形、角度或網格變化。
開啟指南陰影與高度層級Shadow & Elevation
陰影是一種視覺效果；高度層級則是陰影可能用來說明的表面深度關係。
開啟指南Border Radius 與 Squircle 方圓角（教學組合）Border Radius & Squircle — Learning Bundle
這個教學組合分開說明三個相關但不同的概念：標準 CSS border-radius、CSS 草案值 corner-shape: squircle，以及更廣義的類 Squircle 輪廓或平台遮罩。這個組合不是單一標準設計術語。
開啟指南不透明度Opacity
不透明度表示元素和子元素有多不透明。它可從完全透明變成完全不透明。
開啟指南Apple 人機介面指南Apple Human Interface Guidelines
Apple 人機介面指南說明 Apple 平台設計。內容涵蓋操作、視覺、控制、輸入、無障礙和平台差異。
開啟指南Notion 式工作區風格Notion-style Workspace
Notion 式工作區採用安靜的文件外觀。它重視好讀文字、內容區塊、低調控制和留白。
開啟指南SaaS 行銷網站SaaS Marketing Site
SaaS 行銷網站向特定對象說明問題和軟體服務。它幫助訪客判斷是否適合，並選擇下一步。
開啟指南B2B 企業網站B2B Corporate Site
B2B 企業網站讓不同商業角色了解公司的能力、規則和可信度。也幫助他們判斷是否適合採購或合作。
開啟指南DTC 品牌電商DTC E-commerce
DTC 電商讓品牌直接賣給消費者。流程包含找商品、選擇規格、付款、配送和售後協助。
開啟指南趣味插畫風格Playful Illustration
趣味插畫使用活潑角色、形狀、色彩和視覺笑點。它可增加親切感、意義或品牌個性。
開啟指南有機形態設計Organic Design
有機設計從自然形態取材。它使用不規則曲線、有觸感的材質、自然色彩和較不機械的版面。
開啟指南孟菲斯風格Memphis Style
Memphis Style 是大膽的後現代風格。它使用強烈形狀、衝突色彩、圖案、不對稱版面和趣味。
開啟指南終端機美學Terminal Aesthetic
終端機美學借用命令列畫面。它使用等寬字、緊密層級、Prompt 符號、少量色彩和清楚狀態。
開啟指南侘寂美學Wabi-sabi
侘寂是日本的美學觀。它重視克制、變化、不規則、歲月痕跡和真實材料，而非完美拋光。
開啟指南CSS 邏輯屬性CSS Logical Properties
CSS 邏輯屬性會依文字流向描述方向，例如區塊和行內，而不只使用上、右、下、左。這能讓版面跟著語言的書寫方向調整。
開啟指南子網格Subgrid
子網格是放在另一個網格裡的網格，會沿用父網格的列或欄尺寸。它可以只沿用一個方向，也可以兩個方向都沿用。
開啟指南內容內在尺寸Intrinsic Sizing
內容內在尺寸是讓元素裡的內容一起決定大小，而不是只使用外部指定的固定尺寸。
開啟指南最小內容尺寸min-content
`min-content` 是內容在所有可換行處都換行後，能縮到的最小尺寸。
開啟指南最大內容尺寸max-content
`max-content` 是內容在一般換行點都不換行時，想要占用的尺寸。
開啟指南minmax() 網格函式minmax()
`minmax()` 是 CSS Grid 函式，可同時設定列或欄的最小與最大尺寸。
開啟指南clamp() 範圍函式clamp()
`clamp()` 會採用偏好的 CSS 數值，但不會小於最小值，也不會大於最大值。
開啟指南媒體填入方式object-fit
`object-fit` 會控制圖片、影片或類似媒體如何放進自己的容器。
開啟指南視口單位Viewport Units
視口單位是依瀏覽器可見範圍計算的 CSS 長度。小型、大型和動態版本能處理會顯示或隱藏的瀏覽器工具列。
開啟指南偽類Pseudo-class
偽類是 CSS 選擇器的一部分，會依元素的狀態、位置、語言或使用者操作等條件來選取元素。
開啟指南偽元素Pseudo-element
偽元素能讓 CSS 選取原始 HTML 中沒有的一小部分或容器，例如第一個字或產生的裝飾。
開啟指南CSS 圓角半徑CSS Border Radius
CSS 圓角半徑（border-radius）會用水平和垂直半徑，把盒子角落畫成四分之一橢圓。它會影響繪製和裁切，但不改變版面尺寸，也不會產生數學上的 Squircle。
開啟指南CSS Squircle 方圓角CSS Squircle Corner
在 CSS Borders Level 4 草案中，Squircle 是 corner-shape 的一個值，會畫出介於圓形和方形之間的凸形超橢圓曲線，等同 superellipse(2)。它需要非零的圓角半徑，也必須先檢查瀏覽器支援。
開啟指南強制色彩模式Forced Colors Mode
強制色彩模式會用使用者選擇的系統色盤，取代許多網站配色。這能讓控制項和文字更容易分辨。
開啟指南視覺效果材質Visual Effect Material
視覺效果材質（Visual Effect Material）是 macOS 的表面樣式，會混合並模糊後方內容，也會依視窗狀態與亮色或深色外觀調整。
開啟指南