01-设计哲学与设计令牌体系

第一篇：设计哲学与设计令牌体系Copy Anchor Link

技术领域与英文指代：Design Philosophy & Design Tokens

1.1 设计哲学与视觉调性Copy Anchor Link

Claude 的界面设计在当下 AI 产品中独树一帜，其核心调性可以总结为三点：

1. 温润的人文质感（Editorial Warmth）：
   • 彻底摒弃冰冷的高饱和赛博朋克蓝/紫色，主品牌色选用温润的**陶土色（Clay: #d97757）**与柔和米白/暗灰底色（#fcfcfb / #151515）。
2. 多层微对比表面（Low-contrast Surface Layering）：
   • 界面几乎不使用生硬的 1px 黑色边框，而是通过 Surface 0 - 3 的层级微小明度差以及 color-mix() 半透明外环投影来建立空间感。
3. 高帧率轻负担动效（Lightweight Organic Motion）：
   • 文字流式输出使用 GPU 硬件加速的模糊消解，复杂展开使用 CSS Grid 0fr 解决高度抖动，手势交互使用真实的阻尼弹簧。

1.2 表面体系与色彩阶梯Copy Anchor Link

技术领域与英文指代：Surfaces & Colors

依据 REA (Reverse Engineer Anything) v6.5.0 对生产构建包 c6a992d55-sXiDGMFQ.css 的全量 AST 审计，Claude 并非使用孤立的零散色值，而是建立在**完整的 35 阶灰度标尺（--cds-gray-0 至 --cds-gray-900）与35 阶橙色标尺（--cds-orange-0 至 --cds-orange-900）**之上的高精密光学投影体系。

graph TD
    S0["Surface 0: 侧边栏/底基层 (Canvas)"]
    S1["Surface 1: 页面主背景画布 (Chat Page)"]
    S2["Surface 2: 独立面板/卡片表面 (Cards)"]
    S3["Surface 3: 输入框/悬浮弹窗/最高层 (Overlays)"]
    
    S0 --> S1 --> S2 --> S3

[!TIP] Anthropic 暗色模式 2-Level 等距步进律（OLED Anti-Banding）：
REA 逆向表明，Claude 深色表面严格遵守十六进制等距步进：
--cds-gray-800 (#20201f) $\to$ 810 (#1e1e1d) $\to$ 820 (#1c1c1b) $\to$ 830 (#1a1a19) $\to$ 840 (#181817) $\to$ 850 (#151515) $\to$ 860 (#131313) $\to$ 870 (#111111) $\to$ 880 (#0f0f0f) $\to$ 890 (#0d0d0d) $\to$ 900 (#0b0b0b)。
每一阶明度均精确下沉 2 个 HEX 单位，彻底消除了 OLED 屏幕上的灰阶断层色斑。

1.3 控件尺寸与精密圆角矩阵Copy Anchor Link

技术领域与英文指代：Border Radius, Heights & Sizing

1.3.1 圆角阶梯体系 (Border Radius Hierarchy)Copy Anchor Link

在生产构建样式中，完整圆角令牌与嵌套公式如下：

[!IMPORTANT] REA v6.5.0 取证：自适应嵌套同心圆角公式：

Copy Text

--radius-card: calc(var(--cds-radius) + calc(.25rem * var(--cds-rem-scale, 1)));

在 Claude 中，卡片外圈曲率严格绑定内部 --cds-radius 加上 .25rem * --cds-rem-scale，从而在用户缩放页面或调整辅助功能大字号时，内外角曲率永远保持平滑同心。

1.3.2 控件高度与排版尺寸 (Heights & Sizing)Copy Anchor Link

1.4 发丝细边、微光阴影与边框防臃肿体系Copy Anchor Link

技术领域与英文指代：Borders, Hairlines & Shadows

1.4.1 边框粗细系统、发丝细边与微光阴影阶梯Copy Anchor Link

在很多仿 Claude 的产品中，“视觉廉价感”几乎 100% 来自边框过粗过硬与阴影单层死黑。Claude 桌面端对此构建了极端精密的物理光学规则：

1. 边框大小阶梯与视网膜高分屏发丝细边规范 (Border Width & Retina Hairline)Copy Anchor Link

在视网膜高分屏（MacBook Retina @2x/@3x）上，标准的 1px 边框在物理像素上实际占据了 2 到 3 个物理发光点，视觉感受极其厚重笨拙。Claude 借助媒体查询与内阴影轮廓技术实现了真正的动态发丝细边：

/* 提取自 c6a992d55-C0zTICcS.css 发丝细边与透明度层级 */
:root {
  --cds-alpha-0: hsla(0, 0%, 8%, 0);
  --cds-alpha-1: hsla(0, 0%, 8%, 0.05); /* 幽灵按钮悬浮、骨架屏、禁用态 */
  --cds-alpha-2: hsla(0, 0%, 8%, 0.10); /* 标准边框 (--cds-border)、次级填充 */
  --cds-alpha-3: hsla(0, 0%, 8%, 0.20); /* 强对比边框 (--cds-border-strong)、控件悬浮 */
  --cds-alpha-4: hsla(0, 0%, 8%, 0.35); /* 重分割线 */

  --cds-border: var(--cds-alpha-2);
  --cds-border-strong: var(--cds-alpha-3);
  --cds-ring-hairline: 1px;
}

/* 视网膜高分屏发丝细边微调 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (resolution >= 2x) {
  :root { --cds-ring-hairline: 0.5px; }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx), (resolution >= 3x) {
  :root { --cds-ring-hairline: calc(1px / 3); }
}

[!TIP] 为什么 Claude 极少使用 CSS border: 1px solid ...？
因为传统 CSS border 会计入元素的盒模型排版尺寸，在动态切换激活/未激活状态时易引发微观的“1px 尺寸抖动与重排”。Claude 大量采用 box-shadow: inset 0 0 0 1px ... 或 box-shadow: 0 0 0 1px ... 代替边框，完全脱离盒模型排版计算，实现 0 抖动的顺滑物理过渡。

2. 生产级四层环境光扩散阴影阶梯 (4-Tier Ambient & Elevation Shadow System)Copy Anchor Link

Claude 彻底摒弃单一维度的模糊阴影，全量采用**【近距微遮蔽 (Ambient Occlusion)】+【远距深层漫反射 (Elevation Diffusion)】**双层复合公式：

3. 双环浮动气泡架构（Dual-Ring Architecture）的光学奥秘Copy Anchor Link

请格外注意 --cds-shadow-popover 在浅色与深色模式下的质感差异：

• 浅色模式：外环为 0 0 0 1px var(--cds-border)，提供一层细致的外边缘包围线，结合向下落差 8px 的柔和漫反射。
• 深色模式（倒角高光逆转！）：外轮廓变为 0px（消除黑底上突兀的白框），同时在内侧增加 inset 0 0 0 1px rgba(255, 255, 255, 0.10)！这一行如同真实物理世界中边缘倒角捕捉到顶光所产生的一道微弱反光，既凸显了浮层的立体轮廓，又完全没有多余的边框感！

4. 聊天输入框双环投影公式（Composer Dual-Ring Shadow）Copy Anchor Link

输入框是 Claude 最具标志性的界面灵魂：

/* 常态（Resting 未聚焦） */
box-shadow: 
  0 4px 20px rgba(0, 0, 0, 0.035),
  inset 0 0 0 1px var(--cds-border);

/* 鼠标悬停态（Hover） */
box-shadow: 
  0 4px 24px rgba(0, 0, 0, 0.06),
  inset 0 0 0 1px var(--cds-border-strong);

/* 聚焦态（Focus-Within） */
box-shadow: 
  0 4px 24px rgba(0, 0, 0, 0.08),
  inset 0 0 0 1px var(--cds-border-strong),
  0 0 0 1px var(--cds-border-strong);

5. 全局交互焦点环（Triple-Layer Focus Ring）Copy Anchor Link

当用户通过键盘或点击激活交互控件时，Claude 绝不使用操作系统刺眼的默认蓝色外框，而是渲染专有的三层陶土高亮环：

--cds-focus-shadow: 
  inset 0 0 0 1px var(--cds-surface-1),    /* 第一层：1px 隔离垫片，隔开控件与光晕 */
  0 0 0 1.5px var(--cds-clay),             /* 第二层：1.5px 陶土品牌色主聚焦环 */
  0 0 6px 1px rgba(217, 119, 87, 0.25);    /* 第三层：柔和外扩的陶土环境漫射光晕 */

6. 全交互 Hover 态与微反馈物理规范 (Interactive Hover & Micro-Feedback)Copy Anchor Link

Claude 的交互反馈极度顺滑克制，遵循“有感知但不喧宾夺主”的微动效原则：

1. 幽灵按钮悬浮与按压（Ghost Button Feedback）：
   • 常态：背景完全透明，文字为次级弱灰 (var(--cds-text-secondary))。
   • 悬浮态 (Hover)：背景在 150ms 贝塞尔曲线 (cubic-bezier(0.16, 1, 0.3, 1)) 内渐变至 5% 灰度底衬 (var(--cds-fill-ghost-hover))，文字点亮为 Primary 主色。
   • 按压态 (Active Press)：触发 scale(0.98) 轻量回弹压感，底衬加深至 10% 灰度 (var(--cds-fill-ghost-selected))。
2. 卡片物理抬升 (Card Elevation Y-Lift)：
   • 常态：平铺于画布，呈现 --cds-panel-shadow。
   • 悬浮态 (Hover)：向上物理抬升 transform: translateY(-1.5px)，同时阴影平滑过渡至 --cds-panel-shadow-hover，边框变深至 --cds-border-strong。
   • 离开态：顺滑落回原始位置，无硬弹跳。
3. 浮动菜单行高亮 (Dropdown Row Highlight)：
   • 鼠标滑过菜单项时，背景瞬间点亮为带有 4px 圆角（var(--radius-sm)）的轻量高亮胶囊，行内图标与快捷键同步点亮。
4. 拖拽吸附光晕 (Drag & Drop Target Glow)：
   • 拖拽文件接近输入框时，输入框内侧触发 inset 0 0 24px -2px rgba(217, 119, 87, 0.20) 陶土呼吸辉光，并伴随 inset 0 0 0 2px var(--cds-clay) 吸附圈。

1.4.2 边界哲学与边框防臃肿体系 (Borders vs. Borderless Architecture)Copy Anchor Link

在现代 Web 前端与大模型 UI 生成中，“套娃边框（Russian-Doll Borders）”是导致界面臃肿、沉重、业余的最普遍元凶。很多模型在生成前端界面时，机械地将产品需求中的“视觉分组”直接等价为 CSS border border-neutral-200，造成卡片嵌套卡片、消息套线框、工具栏套线框、输入框内部的每一个按钮再套一层线框，视线被无数条灰色线条切割得支离破碎。

Claude Desktop 之所以呈现出极具高级感、通透呼吸感的杂志排版质感，核心在于一套严密的边界极简与表面微对比架构：

1. 核心黄金准则：单闭合边框原则 (The 1-Border Rule)Copy Anchor Link

• 视线深度控制：在从屏幕主画布向内穿透的任何一条视线路径上，至多只能穿过 1 层闭合的矩形边框。
• 容器内自动降级协议：一旦外层容器已经是一个带边框的物理实体（如 Chat Composer、Modal 弹窗、Code Block 代码块），其内部包含的所有子控件（按钮、输入区、标签、工具条）严禁再次使用闭合边框：
  • Secondary 按钮：严禁写成 border border-neutral-300，必须使用基于 Surface-2 的柔和填充（bg-neutral-100 hover:bg-neutral-200/80 dark:bg-neutral-800 border-0）。
  • 工具栏按钮与内联操作：必须降级为 Ghost 变体（常态完全透明 bg-transparent border-0，悬停时仅展现微弱背景 hover:bg-neutral-100/70）。
  • 内部输入框：Composer 内部的文字输入域完全去除原生边框与高亮环（border-0 outline-none ring-0 bg-transparent）。

2. 组件边界授权决策树 (The Boundary Decision Matrix)Copy Anchor Link

3. 常见“套娃边框”重构对比范例Copy Anchor Link

反模式（AI 模型常见臃肿生成）：Copy Anchor Link

<!-- ❌ 错误：4 层边框套娃，界面极其厚重压抑 -->
<div class="border border-gray-300 p-4"> <!-- 框 1: 外卡片 -->
  <div class="border border-gray-200 p-3"> <!-- 框 2: 助手气泡 -->
    <p>回复文本</p>
    <div class="border border-gray-300 p-1"> <!-- 框 3: 操作栏小卡片 -->
      <button class="border border-gray-400">复制</button> <!-- 框 4: 按钮带框 -->
    </div>
  </div>
</div>

正模式（Claude 生产级标准）：Copy Anchor Link

<!-- ✅ 正确：单边框极简，呼吸感十足 -->
<div class="p-4"> <!-- 主画布 Surface 0，无框 -->
  <div class="space-y-2"> <!-- 助手消息，无框无底色，直接浮于画布 -->
    <p class="text-neutral-800 dark:text-neutral-200 leading-relaxed">回复文本</p>
    <div class="flex items-center gap-1 text-neutral-400"> <!-- 操作栏，无框 -->
      <button class="p-1 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800 border-0"> <!-- 纯 Ghost 悬停 -->
        <CopyIcon className="size-3.5" />
      </button>
    </div>
  </div>
#### 4. 滚动驱动渐隐遮罩系统 (Scroll-Driven 28px Fade System)

在会话流与代码块滚动时，传统前端常常简单覆盖一个纯透明度渐变层，导致文字在顶底硬生生被“切断”。REA v6.5.0 在生产包中提取到了 Claude 的**滚动时间轴驱动遮罩（Scroll-Driven Fade）**完整规范：

* **核心物理宽度**：`--cds-scroll-fade-size: 28px;`（严格定义为 28px，非近似的 24px 或 32px）。
* **四阶非线性相对色彩羽化（4-Stop Relative Color Fade）**：
  遮罩并非纯色，而是使用现代 CSS `color-mix()` 与 `rgb(from ...)` 动态提取当前背景色进行 4 档非线性递减：
  ```css
  /* 提取自 c6a992d55-sXiDGMFQ.css 真实生产定义 */
  --cds-scroll-fade-mask: linear-gradient(
    to bottom,
    var(--cds-scroll-fade-strip-color, var(--cds-surface-1)) 0%,
    rgb(from var(--cds-scroll-fade-strip-color, var(--cds-surface-1)) r g b / .85) 13%,
    rgb(from var(--cds-scroll-fade-strip-color, var(--cds-surface-1)) r g b / .50) 40%,
    rgb(from var(--cds-scroll-fade-strip-color, var(--cds-surface-1)) r g b / .15) 70%,
    transparent 100%
  );

配合原生滚动时间轴（scroll-timeline），当列表触顶时遮罩自动归零（0px），滚离顶部时自适应渐开至 28px，完全由 GPU Compositor 驱动，零主线程开销。

1.5 字体排版与图标对齐系统约束Copy Anchor Link

技术领域与英文指代：Typography, Alignment & Icons

Claude 桌面端对于字重、排版折叠以及矢量图标的对齐有着近乎偏执的微观调校，涵盖六大核心工程约束：

1. 真实字体栈与可变字体轴配置 (Font Stacks & Variable Axes)Copy Anchor Link

依据 REA v6.5.0 对 c6a992d55-sXiDGMFQ.css 的逆向提取，Claude 具备完备的 CJK 与多语言回退保护链：

• CJK 专用无衬线回退链 (--font-cjk-sans-fallback)：

  Copy Text

  --font-cjk-sans-sc: "PingFang SC";
  --font-cjk-sans-tc: "PingFang TC";
  --font-cjk-sans-jp: "Hiragino Sans";
  --font-cjk-sans-kr: "Apple SD Gothic Neo";
  --font-cjk-sans-fallback: var(--font-cjk-sans-sc), var(--font-cjk-sans-tc), var(--font-cjk-sans-jp), var(--font-cjk-sans-kr);

• 主无衬线字体栈 (--font-anthropic-sans)：

  Copy Text

  --font-sans-fallbacks: system-ui, "Segoe UI", Roboto, Helvetica, Arial, var(--font-cjk-sans-fallback), sans-serif;
  --font-anthropic-sans: "anthropic-sans", var(--font-sans-fallbacks);

• 问候语与正文衬线栈 (--font-anthropic-serif)：

  Copy Text

  --font-anthropic-serif: "anthropic-serif", ui-serif, Georgia, "Times New Roman", var(--font-cjk-sans-fallback), serif;

• 等宽代码字体栈 (--font-anthropic-mono)：

  Copy Text

  --font-anthropic-mono: "anthropic-mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

• 可变字体光学尺寸 (opsz) 与微标字重 (wght)：

  Copy Text

  --font-opsz-axis-title: "opsz" 28,;
  --font-opsz-axis-heading: "opsz" 20,;
  --font-opsz-axis-display: "opsz" 48,;
  --cds-badge-x-wght: 577.8; /* 徽章亚像素光学字重 */

2. 全量 7-Tier 字号阶梯系统与行高规范 (7-Tier Font Size & Leading Scale)Copy Anchor Link

Claude 桌面端构建了一套专为高密度信息架构设计的 7 阶排版标尺系统，并通过桌面端光学缩放因子 --cds-rem-scale: calc(16 / 17)（≈ 0.941176）将 Web 默认 17px 基准平滑缩放至原生视网膜屏的 16px 精确渲染。

/* 提取自 c6a992d55-C0zTICcS.css 核心排版变量 */
:root {
  --cds-rem-scale: calc(16 / 17); /* 桌面端光学微调系数 ≈ 0.94117647 */

  --cds-font-size-caption: calc(0.6875rem * var(--cds-rem-scale, 1));
  --cds-leading-caption: 1rem;

  --cds-font-size-footnote: calc(0.75rem * var(--cds-rem-scale, 1));
  --cds-leading-footnote: calc(0.9375rem * var(--cds-rem-scale, 1));

  --cds-font-size-code: calc(0.75rem * var(--cds-rem-scale, 1));
  --cds-leading-code: 1rem;

  --cds-font-size-body: calc(0.8125rem * var(--cds-rem-scale, 1));
  --cds-leading-body: 1.125rem;

  --cds-font-size-prose: 0.875rem;
  --cds-leading-prose: 1.25rem;

  --cds-font-size-heading: calc(0.875rem * var(--cds-rem-scale, 1));
  --cds-leading-heading: calc(1.125rem * var(--cds-rem-scale, 1));

  --cds-font-size-title: calc(1.25rem * var(--cds-rem-scale, 1));
  --cds-leading-title: calc(1.5rem * var(--cds-rem-scale, 1));
}

3. 暗色模式视网膜光渗字重逆补偿 (Retinal Irradiation Compensation)Copy Anchor Link

在物理光学与人眼视网膜感知中，高对比度白字在黑底上会向外发散光晕（Irradiation Phenomenon），导致同等粗细的文字在深色模式下显得比浅色模式粗 10% - 15%，产生视觉膨胀与边缘模糊。

Claude 依托其专有 Variable Font 轴进行了精准的物理逆补偿：在深色模式下，主动将字重数值降低 30 - 40 个刻度，使文字在人眼感官中达到与浅色模式完全绝对一致的感知纤细度与锐度。

/* 逆向源码提取自 c6a992d55-C0zTICcS.css */
/* 浅色模式基准 */
.font-normal {
  --cds-font-axis-wght: "wght" 400;
  font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad, 0);
}
.font-medium {
  --cds-font-axis-wght: "wght" 500;
  font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad, 0);
}
.font-semibold {
  --cds-font-axis-wght: "wght" 580;
  font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad, 0);
}

/* 深色模式光学逆补偿 */
[data-theme=claude][data-mode=dark] .font-normal {
  --cds-font-axis-wght: "wght" 360;
}
[data-theme=claude][data-mode=dark] .font-medium {
  --cds-font-axis-wght: "wght" 460;
}
[data-theme=claude][data-mode=dark] .font-semibold {
  --cds-font-axis-wght: "wght" 550;
}
[data-theme=claude][data-mode=dark] .font-bold {
  --cds-font-axis-wght: "wght" 660;
}

4. 核心业务内容场景排版全景速查矩阵 (Content-to-Typography Matrix)Copy Anchor Link

为了在工程实现中彻底杜绝字号、字重的“随意臆造与层层嵌套”，下表严格归纳了 Claude 桌面端所有核心业务模块的标准字体参数：

5. 行内图标光学基线校准 (.align-[-0.125em])Copy Anchor Link

在 Web 排版中，默认行内 SVG 或图标会坐落于 vertical-align: baseline，导致图标的视觉几何重心明显高于小写字母的 x-Height 与大写字母的 Cap-Height，产生“图标浮在上空”的脱节感。

Claude 体系强制采用专门提取的负偏置实用类：

• .align-[-0.125em] (vertical-align: -0.125em;)：用于 14px - 16px 标准 Body 与 Heading 文本。将图标恰好下沉 1/8em（约 1.75px - 2px），使图标的上下对称中心与字母几何重心 100% 严丝合缝重合！
• .align-[-0.075em] (vertical-align: -0.075em;)：用于 11px - 12px Caption 与说明性小字。
• .align-[-1px] / .align-[-2px]：用于固定高度（32px/46px）工具栏与标题栏的行内徽章。

/* 提取自 c6a992d55-C0zTICcS.css */
.align-\[-0\.125em\] { vertical-align: -.125em; }
.align-\[-0\.075em\] { vertical-align: -.075em; }
.align-\[-1px\] { vertical-align: -1px; }

4. 文本换行与防折断约束 (Text-Wrap & Word-Break Constraints)Copy Anchor Link

• 标题行长均衡 (text-wrap: balance)： 针对所有 :is(h1, h2, h3, h4) 和卡片主标题应用 text-wrap: balance;，算法自动在多行之间分配字数，避免末行出现孤零零的单个词汇。
• 正文孤字消除 (text-wrap: pretty)： 针对正文段落 :is(p, li, dd, blockquote) 应用 text-wrap: pretty;，防止段落最后一行遗留单字（Typographic Runts）。
• 超长字符串与 Token 安全换行 (overflow-wrap: anywhere)： 针对包含超长模型 ID（如 claude-3-7-sonnet-20250219-thinking-exp）、Git commit hash、代码变量名的提示框，严格采用：

  Copy Text

  overflow-wrap: anywhere;
  word-break: normal;

  在保护常规英文与中文单词连贯性（不强制无理打断正常词）的同时，确保遇到超界长串时能安全折行，绝不撑破容器。
• 移动端输入防缩放底线：

  Copy Text

  input, textarea, select {
    font-size: max(16px, var(--cds-font-size-body));
  }

  在 iOS WebKit 下，任何 font-size < 16px 的输入框获得焦点时都会触发页面强制缩放。Claude 设置 16px 下限地板彻底规避此问题。

5. 等宽数字绝对锁定 (Tabular Numerics)Copy Anchor Link

所有涉及动态计数的区域（Thinking 思考耗时 00:03.2、Token 消耗 1,284 tokens、日期与表格）强制配置：

font-variant-numeric: tabular-nums;
/* 或 */
font-feature-settings: "tnum" 1;

使数字 0 到 9 占用完全相同的字形宽度，消除数字递增时引发的整行动量抖动。

6. 矢量图标架构与双层色协议 (Phosphor & Duotone Layering)Copy Anchor Link

• 原生坐标系：viewBox="0 0 256 256"（Phosphor Icons 架构）。
• 标准字重与代码字重：
  • 常规状态：Stroke 16px（对应字重 533.3，常规粗细）。
  • 激活/代码状态：Stroke 24px（对应字重 700，--df-app-switch-code-weight: 700）。
• 双层色（Duotone）协议：

  Copy Text

  <span data-cds="Icon">
    <!-- 主层：前景色 -->
    <path data-cds-icon-layer="primary" fill="currentColor" />
    <!-- 次层：45% 透明度底衬 -->
    <path data-cds-icon-layer="secondary" fill="color-mix(in srgb, currentColor 45%, transparent)" />
  </span>

• 尺寸阶梯：
  • XS (12px)：徽章、关闭小图标
  • SM (14px)：密集操作栏按钮
  • MD (16px)：标准交互件，应用公式 calc(1rem * var(--cds-rem-scale, 1)) ≈ 15.06px - 16px
  • LG (20px)：卡片主操作按钮
  • XL (24px)：模态窗与空状态主图

7. 完整字阶角色梯级全量映射 (Typography Role Scale Hierarchy)Copy Anchor Link

Claude 针对各 UI 语义角色定义了严格绑定的原子类，内置了基准字号、等比行高与可变字体光学校准：

8. 多行文本截断阶梯 (Multi-line Truncation & Clamp Scale)Copy Anchor Link

Claude 针对各种卡片和气泡采用特定的 -webkit-line-clamp 阶梯，配合 overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;：

/* 1. 侧边栏历史会话标题（单行防撑爆） */
.line-clamp-1 {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

/* 2. 思考折叠卡片摘要（双行预览） */
.line-clamp-2 {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

/* 3. 系统提示词卡片与模型描述（三行预览） */
.line-clamp-3 {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
}

1.6 基础动效令牌体系与物理贝塞尔曲线全集Copy Anchor Link

技术领域与英文指代：Motion Tokens & Physical Curves

graph LR
    T1["60ms: Micro"] --> T2["120ms: Snap"] --> T3["200ms: Base"] --> T4["300ms: Sheet"] --> T5["450ms: Slow"]

1. 响应时序阶梯 (Duration Tokens)Copy Anchor Link

• --cds-dur-fast: 60ms（微交互、聚焦环显隐）
• --cds-dur-snap: 120ms（磁吸切换、微标激活）
• --cds-dur-base: 200ms（标准控件悬停与背景平滑过渡）
• --cds-dur-sheet: 300ms（抽屉滑入、对话视口图钉追踪）
• --cds-dur-slow: 450ms（环境转场、模态框升降）

2. REA v6.5.0 真实物理贝塞尔缓动曲线全集 (The 7 Core Physical Curves)Copy Anchor Link

REA 对官方生产包的 CSS 全量扫描表明，Claude 绝非仅有 3 条通用曲线，而是为不同交互场景调校了专用的物理阻尼常数：