Claude Desktop 2.0 Design Tokens: Keyframes & Easing

Claude Desktop 2.0 foundation: 47 pure-CSS keyframes, 40 data-cds component contracts, a 5-level duration token matrix and 3 cubic-bezier easing curves.

⬅️ Previous: Chapter 3: Architecture Redesign & Comparison · 📚 Back to the 2.0 overview · Next: Chapter 5: Production Reference Code ➡️

This chapter looks at the foundation of the Claude Desktop 2.0 design system: the pure-CSS keyframes, the native data-cds component namespace, and the duration and easing tokens. It is a translation of the Chinese handbook chapter; every value is copied from it unchanged, and code blocks are reproduced as-is.

4. The foundation

4.1 Pure-CSS motion parameters

The 47 keyframes extracted by the analysis from the official production stylesheets cover motion across the whole system:

Pill micro-deformation family: cds-pill-in, cds-pill-pop-up, cds-pill-pop-down, cds-pill-dip-down, cds-pill-dip-up, cds-pill-roll-in-up, cds-pill-roll-in-down, cds-pill-roll-out, cds-pill-out
Skeleton breathing and sweep family: cds-skeleton-breathe, cds-skeleton-sweep, cds-placeholder-reveal
Agent thinking-state family: cds-dot-pulse, cds-working-dot-halo, cds-working-dot-lands, cds-working-dot-veil
Viewport and scroll-driven family: cds-scroll-fade-top, cds-scroll-fade-bottom, cds-scroll-fade-left, cds-scroll-fade-right, cds-sticky-edge-start, cds-sticky-edge-end
Element enter/exit family: cds-reveal-in, cds-reveal-out, cds-fade-in, cds-slide-in-start, cds-slide-in-end, cds-morph-in, cds-chip-in, cds-attachment-out

4.2 Native component namespace

In 2.0, Anthropic fully established 40 standard top-level data-cds component contracts:

[40 大标准化组件清单]
• Accordion              • AccordionHeader        • Aside                  • AskUserQuestion
• AssistantMessage       • Banner                 • Button                 • ButtonGroup
• Card                   • CardLink               • ChartContainer         • ChatComposerChin
• ChatComposerDock       • ChatComposerEditor     • ChatComposerNotices    • ChatComposerQueuedMessages
• CommentCard            • DataTable              • FileDiff               • Icon
• MessageActions         • MessageAttachments     • MessageAttachmentsFile • MessageAttachmentsImage
• MessageAttachmentsQuote• MessageAttachmentsVideo• ModelSelector         • ModelSelectorEffort
• Panel                  • PointChartContainer    • PreviewCard            • Prose
• Pulse                  • Skeleton               • SkeletonGroup          • SplitDropdownButton
• Surface                • Table                  • TurnStatusStep         • UserMessage

4.3 Durations and cubic-bezier curves

1. The 5-level duration token matrix

:root {
  --cds-dur-fast: 60ms;        /* 瞬态响应：按压塌陷、Focus 环显现、Checkbox 勾选 */
  --cds-dur-snap: .12s;        /* 利落转场 (120ms)：Pill 收缩、标签关闭、微图标翻转 */
  --cds-dur-base: .2s;         /* 标准交互 (200ms)：模态框展开、卡片悬停上浮、下拉菜单 */
  --cds-dur-sheet: .3s;        /* 抽屉大面板 (300ms)：NewSessionDrawer 滑出、文件侧栏 */
  --cds-dur-slow: .45s;        /* 页面级大转场 (450ms)：Popout 弹射窗口初始化、全屏遮罩 */
}

2. The 3 exact cubic-bezier control points

:root {
  /* 1. 平滑自然减速曲线 (Quint-like Out) */
  --cds-ease-out: cubic-bezier(.165, .84, .44, 1);

  /* 2. 瞬态刚性捕捉曲线 (Crisp Snap) */
  --cds-ease-snap: cubic-bezier(.32, .72, 0, 1);

  /* 3. 物理过冲回弹曲线 (Spring Overshoot) */
  --cds-ease-overshoot: cubic-bezier(.34, 1.3, .64, 1);
}

⬅️ Chapter 3: Architecture Redesign & Comparison · 📚 2.0 overview · Chapter 5: Production Reference Code ➡️

Claude Desktop 2.0 Foundation: Keyframes, Components & Easing