# 赵子民设计系统 · zzm v4「纸 · 墨 · 朱」

> 赵子民全部产品共用的界面设计系统：纸 · 墨 · 朱三色、8pt 网格、五层光照的微拟物按键。每个页面都有 Markdown 版本，样张的 HTML 是构建时由 React 源码渲染出的真实标记，可原样粘贴。当前版本 v0.2.0（2026-09-23）；本站是设计系统的唯一源头，消费方锁版本引用 https://ui.zhaozimin.cn/v/0.2.0/。

使用要点：

- 引入 https://ui.zhaozimin.cn/v/0.2.0/zzm.css（锁版本，推荐）或 https://ui.zhaozimin.cn/zzm.css（永远最新），并在根节点加 class="zzm-v4"——所有样式只在这个作用域内生效（不想加类名就用 zzm.global.css）
- 颜色只用 var(--zzm-*)；间距、高度、行高、圆角只取 4 的倍数（优先 8 的倍数）
- 按钮用 .zzm-btn 家族：圆角矩形（sm/md 8px · lg 12px），高 28/36/44，禁止 999 胶囊
- 阴影只从 .zzm-btn / .zzm-card / .zzm-cardlink / .zzm-input 取，不要自己写 box-shadow、backdrop-filter
- 一屏只出现一次朱砂红 --zzm-accent，标「你在这里 / 下一步」
- 系统字体栈，不引入网络字体；只有浅色，没有暗色主题
- 禁用＝灰面灰字（不用 opacity 淡化）；等待中的按钮用 busy

## 先读

- [DESIGN.md](https://ui.zhaozimin.cn/DESIGN.md): 单文件完整规范（YAML 头放令牌与组件参数，正文放原则与铁律）
- [zzm.css](https://ui.zhaozimin.cn/zzm.css): 全部样式一个文件（.zzm-v4 作用域）
- [tokens.json](https://ui.zhaozimin.cn/tokens.json): W3C 设计令牌格式，数值读自 tokens.css
- [llms-full.txt](https://ui.zhaozimin.cn/llms-full.txt): 全站所有页面的 Markdown 合集

## 开始

- [首页](https://ui.zhaozimin.cn/index.md): 赵子民全部产品共用的设计系统。三种颜色、一把 8pt 梯子、一个「光从正上方来」的光照模型——每个令牌和组件都同时有人读版和机读版。
- [快速接入 Quickstart](https://ui.zhaozimin.cn/start/quickstart.md): 三种接法：只要样式（任何技术栈）、直接用 React 组件、或者把地址交给 Agent。先读完这页的四条前提，能省掉九成的对不上。
- [给 Agent 用 For Agents](https://ui.zhaozimin.cn/start/for-agents.md): 这个站的每一页都有机读版本。本页说明入口在哪、按什么顺序读、Markdown 头里的字段是什么意思，以及复刻完怎么自检。

## 基础

- [设计原则 Principles](https://ui.zhaozimin.cn/foundations/principles.md): 高级、克制、好上手。三个字：墨 · 纸 · 朱。进来就安静下来，觉得「这很简单，我马上能开始」。
- [色彩 Color](https://ui.zhaozimin.cn/foundations/color.md): 黑、白、朱砂红。红只出现一次，永远标「你在这里 / 下一步」。白就是中性白，不偏暖。
- [字体与字阶 Typography](https://ui.zhaozimin.cn/foundations/typography.md): 系统字体，没有网络字体。字号沿用 0.5 步进的字阶，不再发明新字号；行高一律写 px，且是 4 的倍数。
- [间距与基线 Spacing](https://ui.zhaozimin.cn/foundations/spacing.md): 一把 8pt 梯子加 4pt 微调。padding、margin、gap、定位偏移、组件高度、行高全部从梯上取值——不发明数字。
- [圆角与细线 Radius & Hairline](https://ui.zhaozimin.cn/foundations/radius.md): 圆角五档，同一层级用同一档：外层卡片 16，卡内嵌套 12。细线三档，同一用途用同一档。
- [光照模型 Elevation](https://ui.zhaozimin.cn/foundations/elevation.md): 光从正上方来。每个可交互控件都是一枚真实的键：凸面、顶部反光、贴地投影、反光光晕、按压内陷，五层缺一不可。
- [动效 Motion](https://ui.zhaozimin.cn/foundations/motion.md): 产品内动效 150–250ms，只传递状态。标准缓动 cubic-bezier(.2,.7,.2,1)。戏剧化只留给首次进站的开屏，之后产品永远安静。
- [版式 Layout](https://ui.zhaozimin.cn/foundations/layout.md): 主内容区最宽 1080、左右内距 48；节标题共用一个骨架；卡片共用一套语法。板块之间的「联系感」来自这三件事。
- [图标 Icons](https://ui.zhaozimin.cn/foundations/icons.md): 产品界面用自绘的 16 网格线性图标：1.3–1.5 描边、圆头圆角、墨灰色；内容区（首页作品、笔记标注块）用 lucide-react。

## 组件

- [按钮 Btn](https://ui.zhaozimin.cn/components/button.md): 光从正上方来——每个按钮都是一枚真实的键：凸面渐变、顶部反光、贴地投影、反光光晕、按压内陷。文字按钮一律圆角矩形，禁胶囊。
- [视频播放键 VideoPlay](https://ui.zhaozimin.cn/components/video-play.md): 全站唯一允许为圆形的交互键。圆形不是装饰例外，而是「点按即开始播放」这个媒体语义的通用符号——导学封面与所有课时海报共用这一个原件。
- [输入槽 Input](https://ui.zhaozimin.cn/components/input.md): 键是凸的，槽是凹的。.zzm-input 给输入框一层内凹阴影和近白底色；几何（高 36、圆角 8、.14 描边、内距 12）由调用方写在 style 里。
- [开关 Switch](https://ui.zhaozimin.cn/components/switch.md): 墨色开关：关闭是浅灰轨道，开启是墨色轨道，白色滑块沿标准缓动滑过去。
- [复选框 Checkbox](https://ui.zhaozimin.cn/components/checkbox.md): 16px 方框、圆角 4。选中是墨底白勾，未选是 1.5px 描边；文字随状态从灰变深。
- [徽章与档位 Badge](https://ui.zhaozimin.cn/components/badge.md): 一切不可点的标识。圆＝徽章不可点，方角＝控件可点——这条信号让用户看形状就知道能不能点。
- [面包屑 Breadcrumb](https://ui.zhaozimin.cn/components/breadcrumb.md): 层级轨迹：灰字可点、悬停变墨，末项是墨色加粗的当前页，斜杠分隔。全站课程页把它钉在顶栏。
- [标签页 Tabs](https://ui.zhaozimin.cn/components/tabs.md): 下划线标签页。当前项墨色 600 加 2px 朱色下划线，其余灰字 450。那条朱线就是这一屏的「你在这里」。
- [分页 Pagination](https://ui.zhaozimin.cn/components/pagination.md): 26px 方格：当前页墨底白字，其余 .14 描边，省略号不加框。页数多时只留首页、末页和当前页前后各一页。
- [确认窗 Dialog](https://ui.zhaozimin.cn/components/dialog.md): 纸面卡片、宽 440、圆角 16，遮罩只降亮不模糊——背景仍能认出正在操作什么。朱键只用于破坏性确认。
- [轻提示 Toast](https://ui.zhaozimin.cn/components/toast.md): 深墨胶囊，从下方浮起，1.8 秒后消失。它不可点，所以可以是胶囊。文案说结果，不说过程：「已保存到你的笔记库」。
- [进度条 Progress](https://ui.zhaozimin.cn/components/progress.md): 4px 细轨，.09 灰底，朱色填充。高度 ≤ 8px 的微件允许 2px 端帽圆角。
- [骨架屏 Skeleton](https://ui.zhaozimin.cn/components/skeleton.md): 纸灰底块，一道微光 1.4 秒扫过。取代「LOADING…」文字。卡片不另写骨架——同一个组件传 loading，骨架与真实态共用同一段布局。
- [卡片与卡链 Card](https://ui.zhaozimin.cn/components/card.md): 两种容器：.zzm-card 是浮在纸上的白面板；.zzm-cardlink 是可点的内容卡——悬停时描边加深、上浮 3px、落下柔影。
- [课程卡 CourseCard](https://ui.zhaozimin.cn/components/course-card.md): 综合首页与落地页共用的课程卡：16:9 暗底头图（封面或星座线稿）+ 名称、简介、适合人群、元数据与脚注动作。
- [系列卡 SeriesCard](https://ui.zhaozimin.cn/components/series-card.md): 课程总览里的一个系列：头图、名称、两行简介、节数与总时长，再加一排每课一格的进度方块——完成的格子是朱色打勾。
- [课节卡 LessonCard](https://ui.zhaozimin.cn/components/lesson-card.md): 一节课：16:9 暗底缩略图，四角是编号、档位角标、时长；未解锁时整卡压暗并居中一把锁；看完后整卡朱染。
- [封面图 CoverImage](https://ui.zhaozimin.cn/components/cover-image.md): 封面三态：加载中只露父容器的暗底，就绪后 350ms 淡入，失败回退到线稿。杜绝「先画线稿、封面到了再跳变盖上」的闪跳。
- [神秘卡 MysteryCard](https://ui.zhaozimin.cn/components/mystery-card.md): 尚未揭晓的课：3D 绸缎遮罩、朱印封蜡、一道流光，悬停时微微掀起。不显示名称和价格，也不能购买。
- [星图 StarMap](https://ui.zhaozimin.cn/components/star-map.md): 学习地图：一条折线穿过五个站点。走过的站墨色实心、实线相连；当前站朱色，外圈一道脉冲光晕；还没到的站白底灰边、虚线相连。

## 模式

- [侧栏导航 Sidebar](https://ui.zhaozimin.cn/patterns/sidebar.md): 纸色侧栏，宽 266。导航行是扁平的，不是键——当前行只加一层 .07 灰底和 600 字重；真正的操作（收起、退出）才用微拟物键。
- [数据表格 DataTable](https://ui.zhaozimin.cn/patterns/data-table.md): 同名但用途不同的数据先用一排小键分区，再进表格。浅灰 mono 表头、可排序列、细线分行；窄屏只横向滚动，不折行。
- [安全验证外壳 VerifyShell](https://ui.zhaozimin.cn/patterns/verify-shell.md): 第三方人机验证（Cloudflare Turnstile、阿里云验证码）的外围壳：始终可见、占位固定，底下三种反馈态——通过、冷却、限流。
- [笔记标注块 Callouts](https://ui.zhaozimin.cn/patterns/callouts.md): 课程笔记用 Obsidian 的语法和官方色板：老用户零学习成本，一眼分清提示、警告和完成。这是刻意的边界——笔记区是内容，不是产品界面。

## 资源

- [勋章与下载 Assets](https://ui.zhaozimin.cn/resources/assets.md): 会员勋章、全部机读下载件，以及设计系统每一个源文件的角色、指纹与消费方落点。
- [更新记录 Changelog](https://ui.zhaozimin.cn/resources/changelog.md): 当前 v0.2.0（2026-09-23）。本仓库是设计系统的唯一源头；消费方锁版本使用，不执行升级命令就不会跟随变动。

## Optional

- [源码清单](https://ui.zhaozimin.cn/src/system/manifest.json): 版本、每个源文件的 sha256 与消费方落点
- [zzm.global.css](https://ui.zhaozimin.cn/zzm.global.css): 去掉 .zzm-v4 作用域的样式
- [sitemap.xml](https://ui.zhaozimin.cn/sitemap.xml): 全部 HTML 页面