模板

Console

一个后台：侧边栏、数字带、标签页、可筛选的表格，以及两张任务卡。

密度。十二个组件挤在一栏里，近到任何只在孤立状态下检查过的间距决定都会露出来。

Console

一整屏的一周：四个数字、两条按类别分开的曲线、一列按严重程度排序的待办、一张分组表格，以及两张柱状图。

把控制台做成「网格」而不是一栏。每块瓦片的高度由行给定，而不是自己挑——正是在这里，一张按 16:9 给自己定尺寸的图表，和一个不这么做的空状态，会在同一格里读出两个高度。

Marketing

一个营销页：主视觉、数字带、三个支点、一块反色定价板，以及一组常见问题。

留白。组件极少，空间极大，页面主要由排印阶梯撑着——和控制台恰好相反的失败模式。

Content

一个出版物索引：一条筛选栏、一篇头条，以及一列用细线分隔的记录。

长短不一的记录。卡片网格会把它们藏在等大的盒子里，细线列表不会——所以某一条摘要三行、下一条一行，立刻就看得出来。

Console

把整块屏幕交给一张图：浮动工具条、可平移的画布、检查面板、缩略图、图例，以及它下面的结论。

围绕一个界面排布的 chrome，而不是和它堆在一栏里。画布之上的浮动条、出现在读者视线已经在的地方的面板、远角上的缩略图——只在一栏里检查过的间距决定，撑不过这一关。

Content

一篇文章，由真正的 Markdown 文件经站点自己的管线渲染出来。

阅读面，面对的是这个仓库里没人手写过的标记：标题、表格、脚注、渲染成 MathML 的 LaTeX、任务列表、代码块和一张流程图，全部出自一个 .md 文件。

Settings

一个工作区设置页：一条分区轨道、四组真实的控件，以及一条只在有改动时才存在的保存栏。

长页面上的表单密度。一行复选框、一行开关、一行单选，各自单独看间距都对，一旦叠起来它们就不再对“一行有多高”达成一致——而保存栏还得钉在最后一行之上，又不能把它盖住。

Auth

一张居中的登录卡：邮箱和密码，一次被拒绝的尝试还留在屏幕上，一条分隔线下面是两个 SSO 按钮。

失败态——登录页真正被评判的就是这个态。只按顺利路径画出来的卡片，没有地方安放一次必须同时抵达表单、字段和读屏软件的拒绝。

Data

一张什么都不缺的表格：筛选栏、已排序的列、带批量操作条的行选择，以及分页。

一张压在自己控件底下的表格。排序、选择、筛选各自单独看都对；放到一起，它们要抢同一行表头，批量条必须在不推动下面各行的前提下出现，而筛到一条不剩时也得落在“空状态”上，而不是一个空白矩形。

Forms

创建一个部署环境的四个步骤：一侧是步骤条，旁边是当前步骤的字段，最后一步把填过的内容回读一遍。

它是一个序列，不是一个页面。Steps 只是一条展示用的轨道，它什么都不强制——它无从知道哪些字段属于当前标记的那一步——所以“轨道说到哪儿”和“表单显示什么”之间的接缝，要么在这里被收在一处，要么被悄悄抄成两份。

Data

一条事故：一个带状态的标题块、正文、一条元信息侧栏，以及它身上发生过的活动。

两栏，但它们并不对等。正文是排在度量宽度上的散文，侧栏是十几条短事实，所以一个定义列表和一个段落必须共用同一套竖向节奏，而又不能让其中一边去定另一边的——这正是控制台永远检验不到的失败，因为控制台里所有东西形状都一样。

Patterns

每个真实页面都有的三种状态，并排画出来：一个骨架屏、一个空集合，以及一个失败了的页面。

没人会截图的那三种状态。它们各自写一次、发出去，之后再也不会被放在一起看——骨架屏因此长得和它所代表的东西不是一个形状，出错页因此读起来像一个空文件夹。

Content

一个参考页：左边是章节侧栏，中间是带 props 表格和键盘说明的正文栏，右边还有一条目录。

三栏同时在场。一条侧栏加一条目录，把中间压得比任何其他模板都窄，而这个宽度正是表格、长标识符和标注框开始放不下、必须决定谁去横向滚动的那个宽度。

Marketing

月付／年付开关后面的三档套餐、一张功能对照表，以及人们付钱前会问的那些问题。

一张必须在没有颜色的情况下胜出的卡片。这套系统只有一个主色、没有渐变，所以“推荐”是由 plate 变体、一种线宽和徽章的位置共同承担的——如果那读起来像是画错了而不是强调，就说明深度这条阶梯是错的。