跳到正文
GitHub

开始

设计原则

八条规则,每一条都写成“可以拿一件具体的作品去指认它违反了哪条”。只说该往哪儿努力的原则,什么争论都解决不了。

01

底是纸。

白色,不是米白,而且每一个表面都是同一个白。没有卡片色,没有抬升面板的色调,也没有那种悄悄变成第二种底色的“淡背景”。

它排除了
一张靠“比页面白一点点”来把自己和页面分开的卡片。

On the page

And beside it

02

阴影永远不带模糊。

这套系统没有光源,所以它没有高度阶梯。深度是一条细线、一次换底,或者一道没有模糊半径的硬墨偏移。

它排除了
box-shadow: 0 2px 8px rgba(0,0,0,.08)——以及它所属的整条刻度。

Hairline

Reversal

03

线承担了色彩本该承担的工作。

三种粗细,各自由它分隔的东西决定:细线分行,边线分块,实线压在报头下面。一个单色页面没有别的东西可以用来分隔。

它排除了
五种逐个手调、谁也分不出差别的灰。

hairline
edge

04

文字只有两级,再往下就没有了。

下限在白底上以 6.7:1 通过 AA。比它高的每一级都更深。第三种更浅的灰不是这里可以做的设计决定。

它排除了
白底上的 #999,用来做一半读者看不见的“次要文字”。

The mark, and anything it names.

Body copy that is not the mark.

The floor, and there is nothing under it.

05

彩色绑定在状态上。

绿、琥珀、红分别意味着成功、需要注意、失败。它们从不是装饰,而且含义永远被重复表达一次——用图标、用文字,或者两者都用。

它排除了
因为这一行需要一点颜色,所以放了个蓝色徽章。

passedneeds attentionfailedavailablea topic, which is not a state

06

一条阶梯,顶端属于页面自己。

五级标题,在手机与整页之间流体变化,页面标题之上什么都没有。嵌套的两个标题必须跳一级,否则这套层级读起来不成立。

它排除了
某个页面的卡片标题,比另一个页面自己的 h1 还大。

A band heading

A card sub-head

A title inside a card

07

主色就是墨色。

在单色系统里,唯一的编辑性指针收拢到记号本身。过去由色相承担的,改由字重、下划线、填充胶囊或反色承担。

它排除了
通过链接色或悬停态把品牌色重新引进来。

08

暗色模式是换值,不是第二套配色。

同一批 token 名字,不同的值。这正是组件读语义别名而从不读原始 token 的原因:模式一翻,别名自己就重新解析了。两个例外——照片上的文字,以及第三方品牌标——都在它们被定义的地方写明了,因为它们的底不是主题。

它排除了
在某个组件自己的样式表里写一个 .dark 块,把这次换值的一侧冻住。

Light

passed

Dark

passed