SaaS 设计系统
提取自软件和 SaaS 网站的设计系统：效率应用、项目管理工具、CRM 以及其他以服务形式销售的产品。它们大多用克制的配色加一个强调色，再配上清晰的字号层级，很适合作为仪表盘或产品营销页面的起点。
此分类中有 3 个 DESIGN.md 示例，来自 Figma、Linear 和 Notion。提取自各网站的公开页面，并非官方品牌规范。刚接触这个格式？请阅读什么是 DESIGN.md。
Figma
Figma的营销网站采用鲜明的黑白单色体系，核心是其自有的figmaSans可变字体。设计以排版为主导：大号展示标题采用88px/56px，字距紧凑且为负值，与字重330的轻盈正文形成对比。按钮使用全圆角胶囊形状（border-radius: 9999px），实心黑底配白色文字。布局基于网格，最大内容宽度为1440px，每个区块上下留白80px，画布干净为白色。层次感很弱，阴影是基于oklch的细微叠加效果。页脚横幅中出现淡紫色的强调色#cb9fd2。整体风格自信、排版讲究，并突出品牌形象。
Linear
Linear 的设计系统以深色为主，是为工程团队打造的高密度产品界面。表面色板以近黑色（#08090a、#0f1011）为基础，通过层层叠加的深灰色区分侧边栏、卡片和面板。字体全部使用 Inter Variable，展示尺寸下搭配精确的负字间距；行内代码则使用 Berkeley Mono。圆角设计刻意保持较小（以 2–6px 为主），仅在徽章和状态标签上使用胶囊形状。层级主要通过细微的 1px 内描边和低透明度的投影来体现，而非强烈的叠层效果。主要行动按钮采用 Linear 标志性的靛蓝色（#5e6ad2），用于注册按钮和关键链接。
Notion
Notion 营销首页以深海军蓝（#02093a）的首屏区块搭配浅色（#f6f5f4）的主体背景，所有文字层级统一使用定制字体 NotionInter。设计采用 12 栏网格，栏间距为 28px，圆角体系兼顾两种规格：卡片使用 8px，药丸形按钮使用 9999px。浮层元素则采用多层递进式阴影系统。品牌蓝（#2537b1）用于行动按钮与重点强调，从 gray-200 到 gray-900 的语义化灰阶则负责所有文字与背景面的层级划分。