设计令牌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 是一套组件和交互系统，会使用分层表面、有目的的动效、灵活布局和共用设计令牌。
打开指南渐变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 的表面样式，会混合并模糊后方内容，也会根据窗口状态和浅色或深色外观调整。
打开指南