表面
浅色瓷白，深色炭灰。细边缘与轻层次，不用金色描边。
让每一处，都更清晰。
安静的表面，有用的细节。明暗之间，同一种语言。
查看设计规则设计基础
色彩、字体、材质与间距。
柔和而精确
让内容成为主角。容器保持安静，细节承载用途。
形状与间距
卡片 24px 圆角 · 20px 内边距 · 16px 间隔。嵌套图片 12px，输入框保持 8px。
字体
卡片正文 14px · 辅助信息 12px · 关键数字 32px。界面用无衬线字，衬线仅用于笔记与字标。
布局
每张卡片一个用途。标题和底部对齐，列表、图片、数字与笔记采用各自内部结构。
行为
反馈 160ms，内容切换 240ms。尺寸保持稳定，每个操作都有可见结果。
响应式
空间充足时三列，中等屏幕两列，手机单列。切换主题保持相同尺寸。
色彩
中性背景，金色强调。状态使用独立配色。
画布
--canvas#F7F7F5 / #141517表面
--surface#FFFFFF / #202123正文
--ink#222525 / #F2F2EC强调
--accent#81602D / #DCB87A字体
标题、正文与控件使用无衬线字体，编辑式衬线字仅用于短笔记与字标。
让内容清晰易读。
应用界面用 Inter / 苹方，32–12px 见下表。指南章节标题用 28px。品牌展示用 Playfair / 宋体，字标用 Cormorant。
应用标题
让内容清晰易读。--type-title32px / 600 / 1.2章节标题
让内容清晰易读。--type-section24px / 600 / 1.3正文
让内容清晰易读。--type-reading16px / 400 / 1.7界面
让内容清晰易读。--type-ui14px / 500 / 1.5辅助信息
让内容清晰易读。--type-meta12px / 400 / 1.5上方依次为字号 / 字重 / 行高。中文不压缩字距，数据使用等宽数字。
对比度与焦点
正文 ≥ 4.5:1，大字与必要控件边界 ≥ 3:1。明暗主题分别检查。
Aa 字
--ink / --canvas—Aa 字
--muted / --surface—Aa 字
--accent / --canvas—Aa 字
--field-line / --surface—输入焦点：中性 2px 边缘；其他控件保留可见键盘轮廓。状态配文字，玻璃需结合实际背景另测。
材质
使用安静的实色表面。卡片用轻边缘分层，输入控件保留清晰边界。
内容表面
画布上的安静卡片。表单、列表与模块使用同一表面。
嵌套内容 · 轻微色阶区分
交互边界
间距与形状
4px 网格 · 输入框 8px · 卡片 24px · 间隔 16px。
48121624324864组件
直接试用下方控件。
内容模块
相同容器，各有内容。试用周期切换、收件箱、笔记、图片、计时器与清单。
博德加湾
加州 · 索诺玛县
资产概览
24,680 USD
收件箱
3 未读随手记
为意料之外，留一点空间。
灵感板
即将到来
19:30
海岸日落活动
3.1 km
专注片刻
25:00
项目清单
操作
每组保留一个主要操作。
输入状态
默认、已填、错误、禁用和只读使用同一基础组件。用 Tab 比较可用输入框的焦点。
下拉选择
切换视图查看下方模块，标签始终保持可见。
已选择摘要视图。
工作区概览
3模块2已就绪
至少 44px 高 · 输入文字 16px · 8px 圆角。方向键浏览，回车选择，Esc 关闭；可搜索选择器和操作菜单单独设计。
加载与恢复
保持卡片位置，说明发生了什么，并给出一个明确的下一步。
模块已就绪
每周概览已就绪，可以开始查看。
模块已就绪
本地模拟 · 重试后显示示例内容。
弹窗
最大宽度 480px · 内边距 20px · 圆角 24px。一次只处理一个决定。
焦点保持在弹窗内。Escape 或取消关闭后恢复焦点。进入 280ms，退出 160ms；减少动态效果时立即切换。
表单工作流
先编辑草稿，再应用。只有保存成功后表格才更新。
易读的数据
| 项目 | 状态 | 更新时间 |
|---|---|---|
| 色彩 | 就绪 | 2026年9月9日 |
| 字体 | 就绪 | 2026年9月9日 |
| 材质与层次 | 草稿 | 2026年9月9日 |
应用模式
按任务选择布局。
宽度与响应式布局
1440px 视口采用流式布局，大视口上限 1600px，包含 240px 侧栏和页边距。阅读、表单与模块保持较窄宽度。
阅读
68ch表单
400px页面框架
1600px侧栏模块
360px弹窗
480px| 视口 | 页边距 | 行为 |
|---|---|---|
| ≤ 680px | 20px | 单列；导航收进抽屉；模块置于内容下方或独立视图。 |
| 681–1199px | 24px | 空间足够时双列，辅助上下文可收起。 |
| ≥ 1200px | 32px | 常驻导航；侧模块 360px；主区域自适应。 |
卡片最小 240px，长表格仅在自身区域滚动。检查 320、390、768、1440px 及 200% 缩放。
手机
- 680px 及以下采用单列，页边距 20px，优先展示主要任务。
- 触摸目标至少 44px，输入文字 16px。再次点击下拉触发器、选择选项或点击外部均可关闭。
- 导航收进抽屉。输入聚焦时保持在键盘上方，考虑安全区域；必要操作不能依赖悬停。
项目状态
下一步
分享前检查字体与间距。
调整浏览器宽度或使用分屏，相同内容始终保留阅读顺序。
平板
- 681–1199px 使用 24px 页边距。模块空间足够时采用双列，窄分屏窗口自动堆叠。
- 同时支持触摸、触控板和键盘，与手机及桌面共用控件、焦点状态和动效。
- 根据可用宽度重排，不依赖设备识别或横竖屏。长表格仅在自身区域滚动。
项目状态
下一步
分享前检查字体与间距。
调整浏览器宽度或使用分屏，相同内容始终保留阅读顺序。
动效
点击体验各类过渡。
动效规则
| 用途 | 时长 | 属性 |
|---|---|---|
| 反馈 / 弹窗退出 | 160ms | --duration-feedback |
| 导航抽屉 | 200ms | --duration-navigation |
| 内容切换 | 240ms | --duration-replace |
| 字体预览 | 360ms | --duration-font |
| 面板进入 | 280ms | opacity + translateY(10px → 0) |
| 主题 | 700ms | 一次页面渐变 |
终点必须与静止状态一致。反馈不改变字号、字重或容器高度。减少动态效果时直接切换，连续操作以最后选择为准。
主题切换
700ms 渐变。默认跟随系统，记住手动选择。
相同尺寸，不同明暗。
反馈与进入
反馈 160ms · 进入 280ms。
面板预览
淡入，然后停留。
色彩
字体
材质
更改已保存
工作区已更新。
尊重系统的减少动态效果设置。
工程规范
新 Web 应用的默认配置。
Next.js App Router
语言路由、服务端读取、客户端交互。密钥留在服务端。
中英文
覆盖所有状态，切换语言保留当前页面。
明暗主题
默认跟随系统，保存选择，支持减少动态效果。使用共用令牌。
账号
当前用 Supabase，后续接入 Zillion Account。服务端验证权限。
交互状态
处理加载、空内容、成功与失败，保留未保存内容。
验证
检查双语双主题、键盘、对比度、手机与构建。
开始构建 Zillion 应用
先运行设置示例，再采用相同基础组件与配置。令牌不包含字体或应用行为。
配置规则
// app/layout.tsx imports in order
import './tokens.css';
import './primitives.css';
// app/[lang]/layout.tsx
// Validate en/zh; load local fonts; set html lang.
// Apply stored theme before paint; wrap ThemeProvider.
// Native controls use shared classes
<input className="field" aria-invalid={hasError} />
<button className="button primary">Save</button>
// Runnable source: src/app/[lang]/starter/page.tsx
// Interaction: src/components/SettingsExample.tsx文件清单、状态规则及版本固定方式参见 docs/adoption.md。示例不包含认证或持久保存。
令牌带版本，采用时锁定版本。
版本记录
变更与采用记录。
0.2.0
当前预览
柔和而精确的模块
瓷白与炭灰主题、内容型卡片与实际交互示例。卡片圆角改为 24px，采用时同步更新令牌与基础样式。
版本如何演进
0.x
新增与破坏性变更升次版本，修正升补丁；破坏性变更附迁移说明。
1.x 起
主版本：破坏性变更；次版本：新增；补丁：修正。
采用
锁定已审核版本，各产品明确迁移。
可追溯
包、记录与令牌版本一致，已发布标签不改写。