路路边散步技术、阅读与生活观察
RSS

Design System

官网设计体系与设计元素说明

这是一份面向设计、前端和内容协作者的设计系统说明页。它把 token、基础规则、组件示例、响应式策略和交付约束放在同一个页面里，便于在真实页面开发时对照使用。

设计元素 设计首页 开发指南

00 / System Model

设计系统从原始值到页面结构逐层约束

原始 token 提供基础设计值，语义 token 提供稳定的业务接口，基础规则定义布局、排版和动效，组件再把这些规则沉淀为页面开发可以直接使用的能力。

Layer 01

Primitive Token

原始值：颜色、间距、字号、圆角、阴影、动效时长。

Layer 02

Semantic Token

语义接口：文本色、页面背景、区块间距、品牌色等。

Layer 03

Foundation

基础规则：布局、排版、动效和响应式策略。

Layer 04

Components

组件资产：Base Components、Blocks、Features。

Layer 05

Pages

页面实现：基于组件和规则组合具体业务页面。

阅读路径

  1. 先看整体架构，理解每一层负责什么。
  2. 再看设计元素，确认颜色、间距、圆角、阴影和动效怎么使用。
  3. 然后看排版、组件和响应式示例，把规则对应到真实页面。
  4. 最后按开发指南检查实现，确保页面符合系统约束。

01

Token 是事实来源

primitive 保存原始值，semantic 暴露业务语义，组件只消费稳定接口。

02

Foundation 定义规则

layout、typography 和 motion 控制空间、文本与时间节奏，不在页面里重复发明。

03

组件约束页面

Base Components 承接通用样式，Blocks 承接官网结构，Features 承接业务功能。

01 / Design Elements

设计元素从 token 开始，再进入可复用规则

Primitive token 只描述原始值，semantic token 才是组件和页面应该消费的接口。页面开发时优先使用语义 token、系统 class 和 Base Components。

Color

颜色按表面、文本、边框、品牌和状态分组。组件不要直接引用 primitive 色值。

Page--color-surface-page
Raised--color-surface-raised
Primary Text--color-text-primary
Secondary Text--color-text-secondary
Brand--color-brand-primary
Success--color-success
Warning--color-warning
Danger--color-danger

Spacing（间距）

间距控制元素之间和元素内部的距离。中文语境下可以按“堆叠间距、区块间距、容器边距、组件内边距”来理解：大结构用区块间距，小结构用堆叠间距，页面左右留白用容器边距。

Stack（堆叠间距）同一内容组内，标题、正文、按钮等相邻元素的垂直距离。
Section（区块间距）页面大区块上下的留白，用来建立页面节奏。
Container（容器边距）页面内容和视口边缘之间的左右安全距离。
Padding / Inset（组件内边距）按钮、卡片、面板内部内容和边框之间的距离。
堆叠 XS紧密标签、辅助文本--space-stack-xs
堆叠 SM表单项、短说明--space-stack-sm
堆叠 MD标题和正文--space-stack-md
堆叠 LG卡片内容组--space-stack-lg
区块 MD常规页面区块--space-section-md

Radius & Shadow

圆角和阴影按使用对象分层：交互控件、卡片、面板和浮层。

Interactive--radius-interactive-md
Card--radius-card
Panel--radius-panel

Motion

动效只表达状态变化和层级关系，默认支持 reduced-motion。

  • --motion-duration-fast hover / press feedback
  • --motion-duration-normal enter / reveal
  • --motion-duration-slow hero / emphasis

02 / Typography

文本层级服务阅读节奏，而不是只定义字号

标题使用 BaseHeading，正文使用 BaseText，长文使用 ProseArticle 或 prose 样式。标题层级应反映信息结构，不能仅为了视觉大小随意跳级。

Display--font-size-display

出版物级首屏标题

Title Large--font-size-title-lg

页面区块主标题

Title Small--font-size-title-sm

卡片标题和局部标题

Body Large--font-size-body-lg

用于首段说明、区块导语和需要更高可读性的正文。

Caption--font-size-caption

SECTION LABEL / EYEBROW

03 / Component Examples

基础组件把设计规则变成可复用接口

页面开发时先判断能否使用 Base 或 Blocks。只有业务逻辑明显跨页面复用时，才进入 features；单页面专用内容放在当前页面目录。

BaseButton

CTA、链接按钮和工具动作都从 BaseButton 开始，尺寸保持 fixed，避免中间视口抖动。

BaseCard

Plain

Bordered

Raised

卡片只用于独立重复项、工具面板和模态内容，不把整个页面区块都包成卡片。

组件层级使用说明
BaseContainerBase统一页面宽度，支持 narrow / default / wide 和 fluid inline padding。
BaseSectionBase统一区块上下留白，支持 fixed / step / fluid 三种响应式策略。
BaseHeadingBase统一标题层级、行高、字重和 fluid 标题能力。
BaseTextBase统一正文、说明文和 caption，并提供 readable 阅读宽度。
BaseButtonBase统一 CTA、链接按钮、尺寸、hover、disabled 和 focus-visible 体验。
BaseCardBase统一卡片圆角、边框、阴影、padding 和可交互反馈。
MotionRevealMotion统一入场揭示、stagger 和 prefers-reduced-motion 行为。
HeroBlock / FeatureGrid / LogoWallBlock官网常用区块，基于 Base Components 组合页面结构。

04 / Layout & Responsive

响应式不是重写页面，而是选择合适的 token 模式

当前系统同时支持 Fixed、Stepped 和 Fluid。固定 token 稳定组件，阶梯 token 控制结构，流式 token 增强大视觉。

组件尺寸

Fixed

用于按钮高度、圆角、边框、小字号等需要稳定的值。

<BaseButton size="md" />

结构适配

Stepped

用于 section 间距和关键布局，在断点上切换到更合适的结构值。

<BaseSection spacing="lg" mode="step" />

视觉增强

Fluid

用于 Hero、大标题、大留白等需要连续变化的视觉场景。

<BaseHeading level="display" fluid />
Container

12-column grid + content width

桌面端通过 col-span-* 分配结构，移动端统一收敛为单列。长文本区域使用 content-narrow 控制阅读宽度。

05 / Development Guide

开发指南：从设计稿到页面实现

最后落到执行层：代码是事实来源，文档负责解释规则。新增页面要能说明自己消费了哪些 token、哪些基础组件，以及在哪些断点发生结构变化。

  1. 设计稿需要标注 375 / 768 / 1440 三个关键断点，并说明中间尺寸如何过渡。
  2. 页面结构优先使用 BaseSection、BaseContainer、grid-12、content-narrow 和 stack 工具类。
  3. CTA 使用 BaseButton，卡片使用 BaseCard，标题使用 BaseHeading，正文使用 BaseText。
  4. 组件和页面样式优先消费 semantic token，不直接使用 primitive SCSS 变量或硬编码色值。
  5. 动效统一使用 motion token 和 MotionReveal，hover 只用于明确可交互元素。
  6. 走查时同时验证移动端、桌面端、键盘 focus、reduced-motion 和长文本换行。