# Relay-2026 Design Language System (DLS) > 来源：Figma 文件 `bFcXSa1oQU4SWqvrPCgjv7` → 页面 **DLS** (`2805:8149`) > 整理日期：2026-05-18 > 权威节点：`DLS / Foundation v1` (`3890:9149`)、`DLS / Color Tokens v2` (`3903:9187`)、`DLS / Button System v3` (`3904:9149`) --- ## 1. Foundation Tokens > **权威节点**：[`3890:9149` "DLS / Foundation v1"](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3890-9149) ### 1.1 Color Tokens 来源节点 [`3890:9154` "Foundation/01 Color Tokens"](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3890-9154) + [`3903:9187` "DLS / Color Tokens v2"](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3903-9187) #### 1.1.1 Brand · Primary (Sky) | Token | Hex | 用途 | | ------------------ | --------- | ------------------------------- | | `brand-primary` | `#B0E4FE` | Primary brand surface ("you" CTA) | | `brand-primary-hover` | `#89D2F8` | Interactive hover | | `brand-primary-pressed` | `#5FC6F6` | Interactive pressed | | `brand-primary-text` | `#014261` | Text on brand-primary | #### 1.1.2 Brand · Accent (Peach) 成对出现的"teammate" CTA 色，与 `brand-primary` 等权重 — 不是 secondary。 | Token | Hex | 用途 | | ----------------- | --------- | ------------------------------ | | `brand-accent` | `#F8C9AE` | Paired brand surface ("teammate" CTA) | | `brand-accent-hover` | `#F3B991` | Interactive hover | | `brand-accent-pressed` | `#EDA877` | Interactive pressed | | `brand-accent-text` | `#7C3A1E` | Text on brand-accent | #### 1.1.3 Neutral / Ink | Token | Value | 用途 | | ----------- | ----------------- | ----------------------------- | | `ink/900` | `#07191E` | Primary text / primary button | | `ink/80` | `#07191E @ 80%` | Secondary strong text | | `ink/8` | `#07191E @ 8%` | Pressed surface（衍生） | | `ink/5` | `#07191E @ 5%` | Hover surface（衍生） | #### 1.1.4 Surface | Token | Hex | 用途 | | ----------------- | --------- | ----------- | | `surface/default` | `#FFFFFF` | Page / card | | `surface/subtle` | `#F3F3F4` | Hover 派生 | | `surface/pressed` | `#EBEDED` | Pressed 派生 | | `bg/page` | `#F7F8FB` | App canvas | #### 1.1.5 Functional | Token | Hex | 用途 | | ---------------- | --------- | -------------------------- | | `color-danger` | `#E5484D` | Destructive button / error | | `color-danger-hover` | `#DC3E42` | hover | | `color-danger-pressed` | `#CD2B31` | pressed | | `color-success` | `#0EC46C` | Success state / toast | | `color-warning` | `#FFBB20` | Warning banner | --- ### 1.2 Typography Tokens 来源节点 [`3890:9230` "Foundation/02 Typography Tokens"](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3890-9230) 字体族：**Poppins**（产品 UI）；文档/spec 标注用 Inter。 | Token | Family · Style · Size · Line-height | 用途 | | -------------------- | ------------------------------------------ | ---------------- | | `display/h1` | Abhaya Libre Bold · 160 · 0.95 | Hero headline | | `heading/h2` | Source Serif 4 Medium · 56 · 1.05 | Chapter title | | `heading/h3` | Source Serif 4 Medium · 32 · 1.1 | Section title | | `body/lede` | Inter Regular · 22 · 1.5 | Hero subhead | | `body/copy` | Inter Regular · 17 · 1.55 | Chapter copy | | `body/small` | Inter Medium · 14 · 1.45 | UI label | | `body/small-strong` | Poppins Medium · 14 · 1.43 | Button label | | `mono/eyebrow` | JetBrains Mono · 12 · 1.5 | Section eyebrow | | `mono/code` | JetBrains Mono Regular · 13 · 1.65 | Inline code | --- ### 1.3 Spacing Tokens 来源节点 [`3890:9282` "Foundation/03 Spacing Tokens"](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3890-9282) | Token | Value | 用途 | | ------- | ----- | --------------------- | | `s/2` | 2 | hairline gap | | `s/4` | 4 | tight inline gap | | `s/6` | 6 | icon ↔ label gap | | `s/8` | 8 | row gap | | `s/10` | 10 | button gap | | `s/12` | 12 | card padding (sm) | | `s/14` | 14 | input padding | | `s/16` | 16 | button h-padding | | `s/24` | 24 | section gap (sm) | | `s/32` | 32 | card padding (md) | | `s/48` | 48 | section gap (md) | | `s/88` | 88 | chapter top padding | --- ### 1.4 Layout Tokens（Onboarding baseline） 来源节点 [`3890:9282` "Foundation/03 Spacing Tokens"](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3890-9282) | Token | Value | 用途 | | ------------- | ------------- | ----------------- | | `canvas/web` | `1440 × 820` | Desktop frame | | `topnav` | `80h` | Top navigation bar| | `authCard` | `392 × 496` | Sign-in card | | `button` | `44h × 12r` | Default button | | `choiceCard` | `416 × 134` | Onboarding choice | | `container` | `1080 max` | Page content max | --- ### 1.5 Radius Tokens 来源节点 [`3890:9358` "Foundation/04 Radius Tokens"](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3890-9358) | Token | Value | 用途 | | ----------- | ------ | ----------------------- | | `radius/2` | 2 | hairline divider | | `radius/4` | 4 | small badge | | `radius/8` | 8 | inline tag | | `radius/10` | 10 | segmented inner tile | | `radius/12` | 12 | button (md), card sm | | `radius/14` | 14 | button (lg) | | `radius/16` | 16 | modal, card md | | `radius/full` | 999 | pill, avatar | --- ### 1.6 Stroke + Elevation | Token | Value | 用途 | | -------------- | -------------------------------- | ----------------- | | `stroke/subtle`| `ink @ 8%` | hairline border | | `stroke/control` | `ink @ 12-20%` | input / button border | | `shadow/segmented` | `0 1px 1px rgba(0,0,0,0.10)` | active segment tile | | `shadow/modal` | `0 8px 28px rgba(7,25,30,0.06)` | dialog | --- ## 2. Component Library ### 2.1 Button v3（权威组件） > **权威节点**：[`3904:9210` "DLS / Button System v3"](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3904-9210) #### 2.1.1 通用规格 | Size | Height | Padding | Radius | Font | | ----- | ------ | --------- | ------ | ----------------------------- | | `lg` | 58px | `0 24px` | 14px | Poppins Medium 16 / 20 | | `md` | 44px | `0 16px` | 12px | Poppins Medium 14 / 20 | | `sm` | 32px | `0 12px` | 10px | Poppins Medium 13 / 18 | #### 2.1.2 Variants × States | Variant · State | Background | Border | Text Color | | ------------------------- | ----------------------- | ------------------- | -------------------- | | **primary** / default | `#B0E4FE` | — | `#014261` | | primary / hover | `#89D2F8` | — | `#014261` | | primary / pressed | `#5FC6F6` | — | `#014261` | | **accent** / default | `#F8C9AE` | — | `#7C3A1E` | | accent / hover | `#F3B991` | — | `#7C3A1E` | | accent / pressed | `#EDA877` | — | `#7C3A1E` | | **secondary** / default | `#FFFFFF` | `1px #E2E8EB` | `#07191E` | | secondary / hover | `#F8FAFA` | `1px #E2E8EB` | `#07191E` | | secondary / pressed | `#EEF3F4` | `1px #E2E8EB` | `#07191E` | | **danger** / default | `#E5484D` | — | `#FFFFFF` | | danger / hover | `#DC3E42` | — | `#FFFFFF` | | danger / pressed | `#CD2B31` | — | `#FFFFFF` | | **disabled**（所有 variant 通用） | `rgba(7,25,30,0.06)` | `1px rgba(7,25,30,0.08)` | `#A7B0B5` | #### 2.1.3 使用规则 - **`primary`（蓝）** 用于 "你" 的主 CTA（Build Your AI Self、Continue、Save） - **`accent`（橙）** 用于成对出现的 "队友" CTA（Build Your Teammate AI），与 primary 等权重 - **永远成对出现**，单独使用 accent 会语义错位 - **`secondary`** 用于次级操作（Cancel / Learn more）— 真正的 secondary，视觉权重降一档 - **`danger`** 用于破坏性操作（Delete、Remove），必须配 confirm 流程 - **`disabled`** 状态统一为 `rgba(7,25,30,0.06)`，不要用品牌色淡化版作 disabled --- ### 2.2 Tab（TabSwitcher） > 实现节点：`components/TabSwitcher.vue` Pill 样式分段控件，用于顶层导航（AI Twin / Handover 这类）。Active 项给一个中性灰底色 `#F3F4F6`，inactive 项空底色 + 灰字。容器自身无背景。 | Item | Height | Padding | Radius | 字色 default → active | | ------- | ------ | --------- | ------ | ------------------------- | | Tab item | 40px | `0 18px` | 999px | `#8C9498` → `#07191E` | - 图标通过具名插槽 `#icon-{key}` 注入，组件不绑死图标库 - Hover：背景 `rgba(7,25,30,0.04)`，字色变深 - 不带 box-shadow（active 仅靠灰底区分） --- ### 2.3 SegmentedControl > 实现节点：`components/SegmentedControl.vue` > Figma 参考：`3967:10031` 带背景容器的分段选择器，用于表单 / 设置面板里的二/三选一（Invite via Link / Add Existing User 这类）。区别于 Tab：容器自身带 `#F3F4F6` 灰底，active 项是滑动白色 pill。 | 部位 | Value | | ------------ | -------------------------------------------- | | 容器 | `bg #F3F4F6`、`radius 12px`、`padding 4px` | | Active tile | `bg #FFFFFF`、`radius 10px`、`h 36px` | | Tile shadow | `0 1px 1px rgba(0,0,0,0.10)` | | Tile padding | `7px 20px` | | 图标 | 16px 默认（slot 可自定义） | | 字体 | Poppins Medium 14 / 20 | - 滑动动画：`transform + width` 240ms `cubic-bezier(0.4, 0, 0.2, 1)` - Hover 仅改字色，不改背景（白 pill 是唯一 active 信号） --- ## 3. Motion & Interaction Tokens 来源节点 [`3890:9404` "Foundation/05 Motion Tokens"](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3890-9404) | Token | Value | 用途 | | ------------------ | ------------------------------------------- | ------------------------ | | `duration/fast` | 120ms | 按钮 hover / pressed | | `duration/medium` | 180ms | 颜色过渡 | | `duration/slow` | 240ms | 滑动 indicator / drawer | | `easing/standard` | `cubic-bezier(0.4, 0, 0.2, 1)` | 默认 ease | | `easing/bounce` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | 弹性 hover | | `press/scale` | `0.98` | 按下时缩放反馈 | --- ## 4. 重要 Figma 节点速查表 | 章节 | 节点 ID | 直链 | | --------------------- | ------------- | ---- | | DLS Canvas（总） | `2805:8149` | [open](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=2805-8149) | | Foundation v1 | `3890:9149` | [open](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3890-9149) | | Color Tokens v2 | `3903:9187` | [open](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3903-9187) | | Brand Blue | `3903:9197` | [open](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3903-9197) | | Foundation/01 Color | `3890:9154` | [open](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3890-9154) | | Foundation/02 Typography | `3890:9230` | [open](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3890-9230) | | Foundation/03 Spacing | `3890:9282` | [open](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3890-9282) | | Foundation/04 Radius | `3890:9358` | [open](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3890-9358) | | Foundation/05 Motion | `3890:9404` | [open](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3890-9404) | | **Button System v3** | **`3904:9210`** | **[open](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3904-9210)** | | **SegmentedControl** | **`3967:10031`** | **[open](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3967-10031)** | | Component Preview v1 | `3904:9225` | [open](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3904-9225) | | P0 Component Sets | `3897:9149` | [open](https://www.figma.com/design/bFcXSa1oQU4SWqvrPCgjv7/Relay-2026?node-id=3897-9149) | --- ## 5. 落地建议 1. **Token 命名** —— Foundation token 已剥离产品前缀，所有 token 以 `color-`、`radius-`、`s-` 这类纯语义前缀命名，方便在多产品 / 多主题里复用。 2. **Variable 同步** —— Figma 里色板节点目前没绑定 Figma Variables，建议把所有 hex 建成 Variables，让 `get_variable_defs` 可直接取值，避免 hex 漂移。 3. **Functional 色补齐** —— `success / warning` 仍在 Figma 标为 placeholder，建议从实际状态稿（success toast、warning banner）反推后回填 Foundation/01。 4. **Pair rule 显式化** —— `brand-accent`（peach）必须与 `brand-primary` 成对出现，在组件 lint / Code Connect 层加约束更稳。 --- *文档由 Figma MCP 提取 + 整理生成。如规范有更新，请优先以 Figma `3890:9149` Foundation v1 节点为准。*