落地页
Landing Page单页滚动，目标是转化，视觉优先于信息密度
关键 token
--radius-lg: 大（12–24px）— 大圆角传递亲和感，让陌生用户降低防御--font-display: 展示型字体 — 标题字体是落地页最强的品牌信号--leading-base: 1.65+ — 宽行距让单页滚动节奏舒适，不显拥挤--shadow-md: 明显投影 — 卡片层次感增强视觉深度，辅助引导视线
展示型
内容型
内容 / 文档站
Docs多页层级，阅读为核心，导航结构支撑信息发现
关键 token
--text-base: 15–16px — 正文字号偏大，长时间阅读不疲劳--leading-base: 1.65+ — 宽行距是长文可读性的基础条件--font-body: 可读性强 — 文档站里正文字体比标题字体更重要--color-text-1/2/3: 层级清晰 — 三层文字色支撑标题 / 正文 / 注释结构
产品型
SaaS 工具
SaaS Tool任务导向，功能页多，需要清晰的导航层级
关键 token
--color-bg-secondary: 激活 — 侧边栏与主内容区的空间区分靠它建立--color-border: 清晰可见 — IA 复杂后 border 从装饰变功能，对比度要达标--radius-lg: 中等（6–10px）— 在功能感和亲和感之间取平衡--shadow-sm/md: 两档阴影 — 小阴影做卡片，中阴影做 modal，语义需分工
数据面板
Dashboard数据消费为核心，高信息密度，图表和数字主导视觉
关键 token
--text-base: 13–14px — 紧凑字号是高密度数据展示的基础--leading-base: 1.4–1.5 — 行距压缩与字号配合，数据列表不浪费空间--color-border: 高频使用 — 分割线承担数据网格和区块边界的结构职责--radius-sm: 优先于 lg — 小圆角让数据组件紧凑，不抢数字的视觉焦点
开发者工具
Dev Tool以输出反馈 / 代码展示为核心，降噪比易用性更重要
关键 token
--color-bg: 接近纯黑 — 深色背景减少长时间盯屏的眼部疲劳--color-border: 低对比度 — rgba 透明边框减少视觉噪音，专注内容--weight-bold: 强调关键输出 — 命令结果 / 错误通过粗字重突出，不依赖颜色--font-display: 系统字体 — 无装饰感是工具可信度的基础
消费类应用
Consumer App情感化，品牌感强，以年轻向应用为代表
关键 token
--color-accent: 高饱和度 — 鲜艳 accent 是传递活力的主要手段--radius-lg: 大（16–24px）— 超大圆角创造柔和、年轻的视觉气质--weight-bold: 800 — 超粗字重配合大圆角制造张力，是这类产品的视觉语言--font-display: 个性化字体 — 字体选择是品牌差异化最直接的 token
范围说明：本形态以品牌感强的年轻向应用为代表，不覆盖电商、游戏、社交等子类型——这些场景的 token 需求差异显著，需单独评估。
企业平台
Enterprise合规导向，机构感，可预期性比创意感更重要
关键 token
--color-accent: 低饱和蓝 — 低饱和暗示可靠，避免视觉刺激--radius-lg: 极小（2–4px）— 极小圆角传递规范感，而非亲和感--color-border: 清晰可见 — 明确边框划定信息区域，满足用户对结构的期待--weight-bold: 600 — 适中粗度，不需要超粗的张力，专业即可