A system withroom to move.

A point of view.

Deethin 源码值 / 公开页面提取 / 新增提案分开记录。沿用现有值也不等于批准全站迁移。本页所有新增规则仅限第 6 个实验。

Color has a role.

色值来自本页实际使用的 token。对比度按下方指定的前景／背景计算，不把不同背景上的比值混为一谈。

正文 ≥4.5:1；大字与可见控件边界 ≥3:1。16% ink 分隔线只作装饰分组，不承担输入边界；状态始终带文字或图标。

Type sets the pace.

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

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

Space, made explicit.

页面边距

16–40px

clamp(16px, 3vw, 40px)，内容最多 1440px；不缩放整张页面。

章节间隔

64–128px

clamp(64px, 8vw, 128px)；区分展陈大留白和控件内部小间距。

编辑网格

12 → 6 → 1

≥1200px 为 12 列；700–1199px 为 6 列；<700px 为单列。演示格栅真实响应。

项目组合

2 → 1

≥700px 两列，gap 8px；<700px 单列。图像 16:9，说明常驻。

组件框模型

48 / 20 / 8

按钮 min-height 48px，padding 12px 20px，图文 gap 8px；长标签可换行增高。

阅读宽度

65ch

长文单列，中文行高 1.8；只给数值加 mono，不给整段说明加 mono。

小屏与缩放

320px / 200%

导航换行、表格转堆叠、弹窗可滚动；不隐藏溢出来伪装适配。

A quiet visual vocabulary.

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 视觉当作通用背景；需要插画时先定义具体叙事目的。

Surface

卡片白底、18px；大型深色章节 28px；输入 8px；按钮 pill。静态证据不加悬浮阴影。卡片 padding 桌面 24px / 小屏 20px。

Elevation

只给 modal 两层柔和阴影。层级 content 0 / sticky 20 / toast 40 / native dialog top-layer。深色章节不是完整 dark mode。

States are the system.

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

Text field / 6 states

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

Selection / native controls

From parts to portfolio.

Professional Project · 2024

Honda HMI Design System

A scalable HMI design system connecting brand language, interaction rules, reusable components, and adaptive delivery.

Design SystemsHMICross-platformDesign-to-code

Read case study

Professional Project · 2024

从复杂车载界面到跨端交付：一个很长的中英文项目标题 / A system that stays readable when the content grows

A scalable HMI design system connecting brand language, interaction rules, reusable components, and adaptive delivery.

Design SystemsHMICross-platformDesign-to-code

Read case study

卡片 padding 桌面 24px / 小屏 20px，内容 gap 16px，标签 gap 8px；封面 16:9。标题和摘要始终可读，不把必要内容藏到 hover。长标题换行，不静默截断。

Movement with meaning.

首页复杂开场保留在生产页面；这里用独立舞台检验相同的编辑节奏，不重复播放整段 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-within 同样强调；touch 不依赖 hover 才出现文字。

Disclosure / dialog

即时状态切换

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

Loading

900ms · linear

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

Reduced motion

0ms

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

When content pushes back.

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

Professional Project · 2024

从复杂车载界面到跨端交付：一个很长的中英文项目标题 / A system that stays readable when the content grows

A scalable HMI design system connecting brand language, interaction rules, reusable components, and adaptive delivery.

Design SystemsHMICross-platformDesign-to-code

Read case study

暂无匹配项目

清除筛选可查看现有作品。这里是空状态样本，不是实际项目列表。

重置样本

A traceable handoff.

Primitive → semantic → component → local mode。此页通过 tokens.ts 生成 CSS variables，并用同一来源展示参数与导出；公开网站的自动提取文件另外保存，不直接作为全站主题导入。

<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);
}

版本 0.1.0 · Proposed · Figma mapping 尚未绑定 · 未迁移正式组件。完整来源、限制、迁移与验收说明见 research/design-system-v6/DESIGN_SYSTEM.md。