随着 MyShell 扩展至 App、Web 与 H5，各端界面需要在不同平台、主题与产品场景中保持一致。我维护共享组件与 Token，将颜色、字体、栅格、间距、圆角与组件状态沉淀为可复用规则。
这里展示的是面向 MyShell Art 的 Design System 3.0。为满足营销活动所需的明亮色彩，我将系统扩展为可跨产品与平台切换的多套色板。因此，MyShell Art、MyShell 与 ShellAgent 使用不同色值，同时共享相同的黑白视觉语言、组件结构与交互规则。目标是保持设计原则一致，而非使用完全相同的颜色。
统一颜色、字体、间距与圆角等基础规则，为所有界面提供一致标准。
按钮、图标与输入框等最小功能元素，由设计变量定义，是构成复杂组件的基础。
由多个原子组合而成，形成搜索、表单或导航等具有明确用途的可复用组件。
由原子与分子构成完整的界面区域，如导航、卡片或表单模块，承载独立功能。
定义页面结构、内容层级与组件位置，展示区域如何组织，但不包含真实内容。
在模板中填入真实文字、图片与数据，形成用户最终看到并可操作的完整界面。
BASE TOKENS
SEMANTIC TOKENS
COMPONENT TOKENS
品牌标题使用 ABC Diatype Variable，界面正文使用 SF Pro；10-36 px 的基础比例统一 App、Web 与 H5 的信息层级。
创造任何想象
Display灵感，从这里开始
Heading让创作保持清晰层级
Title选择你的创作方式
Subtitle描述主要内容与操作
Body Large同一套比例适配 App、Web 与 H5
Body补充当前状态与说明
Supporting用于提示、标签与辅助信息
Caption状态、时间与紧凑标签
Micro
这是一段示例说明文本。
这是一段提示文本。
Default / Default
W Fill / H 40 px
Default
W 20 px / H 20 px
这是一段帮助用户填写的提示文字。
这是一段帮助用户选择的提示文字。
Default
W Auto / H 160 px
Image
W 286 px / H 64 px
