一套系统，也留有变化的空间。

设计立场。

保留 V1 作为历史对照。正式首页首屏后的内容与 Portfolio 审阅页已按业主要求接入共享 token；项目卡片使用下方的实际组件。新增首页组合保留来源与待审状态，不冒充已批准的 Figma 资产。其他页面未作全站样式迁移。

色彩各有职责。

Primary #FFFFFF 是基底，Secondary #101010 是对比，Accent #73D1F8 是品牌点睛。60–30–10 作为构图参考，不是逐屏像素配额，也不等于 primary button 必须白色。Surface / Ink 描述用途，可以指向相同原色。

灰色说明保留 text/muted 职责，不再叫 Secondary。系统状态色不在这组色卡展示；控件暂沿用 V1 的功能色，后续核对 Figma，未擅自覆盖。

Hero light field / source palette

上方完整色带使用主页 CSS fallback 的 165° / 48% / 62% 配方；下方五个色卡来自 smoke-renderer.ts 的真实光场 palette。两者不是同一个算法；Figma 先用静态关键帧或渐变近似，不能只抄五个色值就还原流动光场。

JetBrains Mono · 12px / 500 / 1.6 / .04em。深底使用 #73D1F8；白底按本轮决定使用 #0087FB。#0087FB 与白底对比为 3.58:1，低于普通小字 4.5:1；当前仅作为 Proposed data label，若承担必要信息需要加深或提升字号/字重。说明段落保持 sans 与中性灰。

排版组织节奏。

Inter / system sans 负责内容；JetBrains Mono 负责代码和测量。复用网站已有字体，不新增字体请求。语义层级与视觉尺寸分开。

紧字距只用于英文标题。中文标题恢复 normal tracking / 1.25 行高；中文正文 1.8。禁止用超小标签装载重要信息。

明确空间规则。

每项都附局部示意。缩略图展示关系，不把1440px页面强行塞入小卡；控件框模型保留实际尺寸，完整响应式网格见下方。

克制的视觉语言。

Iconography

Lucide，24px 画布、1.5px 描边；按钮内 18px。单独图标的点击区 ≥44×44px，必须有 action label。

Identity

使用现有 Diqing Wu 文字身份，不从 Fabrica 复制 logo。不新增注册标识。标识四周至少留出一个字高。

Project imagery

只使用仓库批准素材。封面 object-fit: cover；证据图 contain、不裁内容；语言配对只显示对应 EN/CN。

Illustration

本轮不造装饰插画。不把 HMI、AI 视觉当作通用背景；需要插画时先定义具体叙事目的。

状态也是系统。

下面是可对照的视觉状态样本；hover / focus / pressed 被固定展示，真实交互请用下方演示。不可用与加载状态不能重复触发。

Focus 不是可删除的装饰：键盘 Tab、触屏外接键盘都需要知道当前位置。输入框可与 hover 共用深色边界，但 focus-visible 额外保留细 2px 环；普通鼠标/触屏按钮不常驻粗环。浏览器也可能为正在输入的文本框显示焦点，这是有意保留的定位信息。

文本输入 / 6 种状态

label→input 8px；input padding 12×16px、min-height 48px；helper gap 8px；font-size 16px 防止 iOS 聚焦缩放。disabled 与 read-only 不等价。

选择 / 原生控件

从组件到作品集。

封面增至 4:3，正文精简为项目类型、年份与标题。白底 tags 与箭头在封面底部同排，hover / focus 出现；触屏常驻。长标题可换行，200% 文字时辅助信息移至正常文流，避免压住图像。

有明确作用的动效。

首页复杂开场保留在生产页面；这里用独立舞台检验相同的编辑节奏，不重复播放整段 WebGL 开场。

控件反馈

150ms · ease-out

hover 改底色；pointer pressed scale .98；键盘 focus 无延迟。离开/松开平滑回到 resting。

叙事揭示

800ms · (.22,1,.36,1)

仅点击重播的舞台：opacity 0→1、translateY 24→0、stagger 70ms；内容默认可见，不设滚动门槛。

项目媒体

800ms · (.22,1,.36,1)

细指针 hover 图像 scale 1→1.04；键盘 focus 立即显示辅助信息，不延迟定位；touch 不依赖 hover 才出现文字。

Disclosure / dialog

即时状态切换

本轮使用 native details 与 dialog；不伪造未实现的高度/退出动画。Escape 关闭 dialog、焦点回触发器。

Loading

900ms · linear

实际保存演示延迟 900ms；aria-busy、禁止重复触发，结束以 status 文本宣布；仅本地、不发送数据。

Reduced motion

0ms

系统偏好或本页开关任一开启即禁用动画、变换和过渡；仍显示保存状态，不让 spinner 承担唯一反馈。

内容超出预期时。

这是组件压力样本，不冒充整页浏览器缩放测试。也请在真实 320px viewport 检查导航与布局。

首页覆盖与待审扩展

首页、当前 Portfolio 审阅页与本目录使用同一个 portfolioTokens 对象。以下补充项来自现有首页：记录原值，不代表已写回 Figma 或获得新的批准。

工具横向条

用户指定

所有宽度下保持单行；空间不足时原生横向滚动；不显示标题。

项目卡片

现有 V2 组件

4:3 媒体、项目元信息和标题；悬停或聚焦时显示标签和箭头，触屏下直接显示。

研究

现有样式与用户指定布局

所有宽度下每张卡片占完整一行；缩略图、本地化标题和摘要保留共享的标题与表面职责。

能力

现有样式与用户指定交互

每项只有一个随展开移动的标题，配合图片、描述和标签；不重复标题或分类说明。按用户要求使用 650ms 缓入缓出的布局过渡；减少动态效果时即时切换。

证据与联系

现有首页

现有反相组合、卡片和表单使用共享语义 token。

通用页脚

用户指定的共享组件

每条路由只显示一个通用页脚；本地化导航返回相应语言的首页章节。

工具横向条 · 实际组件

• Codex (ChatGPT)

  编程助手

• Claude Code

  编程助手

• Relume

  网站结构与线框

• Refero

  设计参考

• DeepSeek

  Agent Harness

• WorkBuddy

  AI 工作台

能力展开 · 单一标题 / 001–004

(001)交互设计

根据每类内容承担的任务定义移动端文本输入规则。

交互设计内容设计校验汽车

(002)设计系统

(003)汽车 HMI

(004)AI 辅助构建

通用 Footer · 实际组件

查看补充的首页 token

--home-evidence-canvas

#0d0d0d

--home-evidence-card

var(--ds-surface-dark)

--home-evidence-text

var(--ds-surface)

--home-evidence-muted

#aaaaaa

--home-evidence-label

#8a8a86

--home-evidence-radius

var(--ds-radius-panel)

--home-evidence-card-radius

var(--ds-radius-card)

--home-evidence-card-padding

22px

--home-evidence-card-height

200px

--home-evidence-card-gap

var(--ds-space-2)

--home-evidence-title-size

var(--ds-type-h3)

--home-evidence-title-leading

1.15

--home-evidence-title-gap

50px

--home-contact-canvas

#111111

--home-contact-muted

#b2b2ae

--home-contact-radius

var(--ds-space-6)

--home-contact-padding

var(--ds-radius-panel)

--home-contact-title-leading

.9

--home-contact-title-tracking

-.07em

--home-contact-title-size

clamp(76px,10vw,140px)

--home-frame-inset

6px

--home-frame-inset-compact

var(--ds-space-1)

--home-gutter

30px

--home-gutter-tablet

22px

--home-gutter-compact

var(--ds-space-4)

--home-section-space

138px

--home-section-space-compact

94px

--home-display

clamp(84px,11.25vw,144px)

--home-display-compact

clamp(62px,19vw,112px)

--home-display-leading

.92

--home-display-tracking

-.06em

--home-study-heading

clamp(56px,7vw,92px)

--home-study-heading-compact

clamp(52px,17vw,76px)

--home-heading

clamp(50px,6vw,78px)

--home-heading-compact

clamp(42px,13vw,68px)

--home-heading-leading

1.08

--home-heading-tracking

-.055em

--home-intro-size

20px

--home-intro-size-compact

17px

--home-copy-leading

1.45

--home-copy-measure

560px

--home-header-gap

100px

--home-header-gap-compact

60px

--home-heading-gap

90px

--home-heading-gap-compact

var(--ds-space-12)

--home-study-space-start

56px

--home-study-space-end

170px

--home-study-space-end-compact

110px

--home-study-card-height

220px

--home-study-card-height-compact

190px

--home-study-thumb

76px

--home-study-thumb-compact

68px

--home-study-card-radius

22px

--home-study-title

clamp(20px,2.1vw,30px)

--home-study-title-leading

1.05

--home-media-placeholder

#dededb

--home-services-canvas

#0f0f0f

--home-services-text

#f8f8f5

--home-inverse-line

rgb(255 255 255 / .18)

--home-inverse-muted

#aaaaaa

--home-service-index

#b1b1ad

--home-inverse-control-line

rgb(255 255 255 / .25)

--home-services-space-start

110px

--home-services-space-end

90px

--home-services-list-gap

86px

--home-services-list-gap-compact

54px

--home-service-height

92px

--home-service-height-compact

76px

--home-service-title

clamp(24px,3vw,40px)

--home-service-title-compact

21px

--home-service-expanded-title

var(--ds-type-h2)

--home-service-inset

24%

--home-service-inset-compact

72px

--home-service-index-width

62px

--home-service-toggle

46px

--home-service-toggle-compact

40px

--home-service-fan-height

160px

--home-service-image-width

112px

--home-service-image-height

84px

--home-service-image-step

44px

--home-service-image-turn

7deg

--home-service-image-top

20px

--home-tag-padding-block

9px

--home-tag-padding-inline

13px

--home-wordmark-weight

650

--home-section-extended-space

180px

--home-case-title

clamp(44px,5vw,68px)

--home-case-wordmark

clamp(66px,10vw,140px)

--home-case-wordmark-compact

18vw

--home-case-height

min(67vw,800px)

--home-case-height-compact

120vw

--home-case-height-max-compact

650px

--home-case-overlay

linear-gradient(180deg,rgb(0 0 0 / .05),rgb(0 0 0 / .62))

--home-case-media-inset

-7%

--home-case-media-height

114%

--home-case-media-scale

1.05

--home-case-media-travel

5%

--home-contact-height

760px

--home-contact-height-compact

690px

--home-contact-heading

clamp(38px,4vw,58px)

--home-contact-heading-gap

96px

--home-contact-form-gap

7px

--home-contact-textarea-height

110px

--home-contact-muted-note

#999999

--home-contact-border

rgb(255 255 255 / .2)

--home-footer-statement

clamp(32px,4vw,54px)

--home-footer-statement-tracking

-.045em

--home-footer-email

clamp(24px,3vw,42px)

--home-footer-wordmark

clamp(110px,20vw,270px)

--home-footer-wordmark-compact

26vw

--home-footer-wordmark-leading

.7

--home-footer-wordmark-tracking

-.085em

--home-footer-title

clamp(20px,3vw,42px)

--home-footer-label

#92928f

--home-footer-legal

#888888

--home-footer-columns-gap

120px

--home-footer-wordmark-gap

160px

--home-footer-columns-gap-compact

86px

--home-footer-wordmark-gap-compact

110px

--home-heading-reveal-duration

1050ms

--home-heading-reveal-ease

cubic-bezier(.16,1,.3,1)

--home-heading-reveal-travel

110%

--home-study-hover-scale

1.06

--home-hover-travel

3px

--home-hover-duration

320ms

--project-media-ratio

4 / 3

--project-arrow-size

52px

--project-arrow-size-compact

44px

--project-media-hover-scale

1.04

--project-arrow-rest-scale

.75

--project-arrow-rest-turn

-20deg

--project-arrow-duration

500ms

--project-arrow-icon-size

22px

--project-tag-size

11px

--project-tag-padding

6px 10px

--project-tag-padding-compact

5px 8px

--home-tools-gap

var(--ds-space-8)

--home-tools-padding

var(--ds-space-6)

--home-tools-item-width

var(--ds-space-32)

--home-capability-open-padding

76px

--home-capability-index-top

36px

--home-capability-toggle-top

var(--ds-space-6)

--home-capability-index-top-compact

30px

--home-capability-toggle-top-compact

var(--ds-space-4)

--home-blur-layer

30

--home-blur-mask-small

linear-gradient(to bottom, transparent, rgb(0 0 0 / .12) 20%, black 62%)

--home-blur-mask-medium

linear-gradient(to bottom, transparent 25%, rgb(0 0 0 / .15) 48%, black 82%)

--home-blur-mask-large

linear-gradient(to bottom, transparent 48%, rgb(0 0 0 / .2) 72%, black)

--home-grid-projects-heading

minmax(0, 1fr) minmax(260px, .65fr)

--home-grid-studies-heading

minmax(0, 1fr) minmax(240px, .65fr)

--home-grid-service-legacy

minmax(120px, 24%) minmax(0, 1fr) 52px

--home-grid-service-panel-legacy

minmax(120px, 24%) minmax(0, 1fr) minmax(250px, .8fr)

--home-grid-service-compact

62px minmax(0, 1fr) 42px

--home-grid-study-card

var(--home-study-thumb) minmax(0, 1fr)

--home-grid-study-card-compact

var(--home-study-thumb-compact) minmax(0, 1fr)

--home-study-line

rgb(16 16 16 / .16)

--home-study-letter-spacing-heading-3

-.035em

--home-study-padding

0 6px

--home-study-outline

2px solid #0b6eff

--home-section-padding

138px 30px

--home-kicker-font-size

14px

--home-kicker-line-height

1

--home-kicker-width

15px

--home-kicker-padding

2px

--home-heading-suffix-padding-right

22%

--home-item-tag-font-weight

700

--home-item-tag-letter-spacing

.08em

--home-case-hero-inset

-7% 0

--home-case-hero-transition

transform 800ms cubic-bezier(.22,1,.36,1)

--home-studies-header-line-height

.95

--home-studies-header-max-width

38ch

--home-study-card-padding

24px 26px

--home-study-thumb-transition

transform 300ms cubic-bezier(.32,.72,0,1)

--home-study-card-body-letter-spacing

-.04em

--home-study-card-body-margin-top

10px

--home-study-card-body-line-height

1.35

--home-pill-action-gap

36px

--home-pill-action-margin-top

28px

--home-pill-action-padding

0 22px

--home-pill-action-border-radius

999px

--home-pill-action-width

18px

--home-services-section-padding

110px 30px 90px

--home-services-section-box-shadow

0 18px 32px rgb(0 0 0 / .18)

--home-services-section-color

#777

--home-service-list-border-bottom

1px solid rgb(255 255 255 / .18)

--home-service-toggle-border

1px solid rgb(255 255 255 / .25)

--home-service-fan-border

2px solid #111

--home-service-copy-max-width

14ch

--home-service-copy-font-weight

550

--home-service-copy-max-width-1

40ch

--home-service-copy-color

#aaa

--home-service-tags-color

#888

--home-service-tags-padding

9px 13px

--home-service-tags-color-2

#111

--home-case-section-padding

42px 30px 80px

--home-case-section-background

#0d0d0d

--home-case-meta-color

#a7a7a3

--home-case-hero-margin-top

38px

--home-case-hero-background

#1f1f1f

--home-case-wordmark-inset

auto 34px 28px

--home-case-wordmark-line-height

.9

--home-case-wordmark-letter-spacing

-.07em

--home-case-intro-padding-top

42px

--home-case-intro-border-bottom

1px solid currentColor

--home-case-intro-max-width

16ch

--home-case-intro-letter-spacing

-.05em

--home-case-evidence-margin-top

80px

--home-case-evidence-min-height

200px

--home-case-evidence-background

#1d1d1d

--home-case-evidence-color

#8a8a86

--home-case-evidence-margin-top-3

50px

--home-case-evidence-line-height

1.15

--home-insights-header-gap

8%

--home-insights-header-max-width

12ch

--home-contact-section-padding

180px 30px 8px

--home-contact-panel-max-width

10ch

--home-contact-form-padding

12px 0

--home-contact-form-border-bottom

1px

--home-contact-form-width

19px

--home-contact-form-line-height

1.4

--home-contact-story-font-size

clamp(76px, 10vw, 140px)

--home-contact-story-max-width

34ch

--home-contact-story-color

#b2b2ae

--home-contact-notes-border-top

1px solid rgb(255 255 255 / .2)

--home-contact-notes-color

#999

--home-footer-padding

80px 30px 28px

--home-footer-border-radius

28px 28px 0 0

--home-footer-statement-max-width

22ch

--home-study-transform

translate3d(0, 40px, 0)

--home-study-filter

blur(7px)

--home-study-transition

800ms

--home-study-transition-4

950ms

--home-study-transform-5

translate3d(0, 0, 0)

--home-study-filter-6

blur(0)

--home-study-transform-7

translateY(110%)

--home-study-transform-8

translateY(0)

--home-study-card-transform

scale(1.06)

--home-pill-action-transform

translate(3px, -3px)

--home-pill-action-transition

transform 320ms cubic-bezier(.22,1,.36,1)

--home-section-padding-compact

94px 16px

--home-why-section-padding-compact

32px 16px 110px

--home-studies-header-margin-bottom-compact

34px

--home-study-card-padding-compact

20px 22px

--home-services-section-padding-compact

80px 16px 70px

--home-service-panel-margin-bottom-compact

26px

--home-service-fan-min-height-compact

116px

--home-case-section-padding-compact

28px 16px 60px

--home-contact-section-padding-compact

110px 4px 4px

--home-contact-story-font-size-compact

20vw

--home-footer-padding-compact

70px 20px 24px

--home-footer-border-radius-compact

22px 22px 0 0

--home-study-transition-duration

.01ms

--home-service-item-top

-236px

--home-service-item-top-9

-248px

--home-service-item-top-compact

-232px

--home-service-item-top-compact-10

-246px

系统背后的架构。

Primitive-colors / blue / 500 = #0087FB [Light]
Primitive-colors / sky / 300 = #73D1F8 [Inverse]
  ↑ Semantic-Colors / color / text / accent
    ↑ Component-colors / data-label / text
      ↑ DataLabel instance · text fill

Text Style / Data / Label = family + size + weight + line-height + tracking
Effect Style / Overlay = shadow layers + offsets + blur + alpha
Paint Style / Hero / Fallback = gradient stops + angle + positions

Modes 是上下文选择器，不是 alias 链的第四级。

Semantic-Colors / color/text/primary
  variable type: COLOR
  scopes: TEXT_FILL
  Light value: VARIABLE_ALIAS → Primitive-colors / neutral/ink
  Inverse value: VARIABLE_ALIAS → Primitive-colors / neutral/white

Component-colors / data-label/text
  variable type: COLOR
  Light + Inverse: VARIABLE_ALIAS → Semantic-Colors / color/text/accent

可追溯的交付。

来源：2026-10-04 绑定清单及 2026-09-27 foundation 审计。Light / Inverse 是使用环境，不是自动 mode。下方旧 Semantic-Colors / Component-colors variable manifest 是历史提案，不作为当前 Figma 资产。

<button className={styles.button} type="button">
  Review project
</button>

/* tokens.ts → tokenVariables → scoped CSS */
.button {
  min-height: var(--ds-control-height);
  padding: var(--ds-space-3) var(--ds-control-padding);
  gap: var(--ds-control-gap);
  border-radius: var(--ds-radius-pill);
}