跳到正文
GitHub

基础

主题

同一批组件、同一套 token,五种面貌。下面每一种都没有改动任何组件——各自只是根元素上的几个属性。

白色重置

系统出厂的样子。纸白底、细描边、衬线标题,强调色就是墨色。

Deploys

passing
Recent deploys
BranchBuild
main2m 14s
codex/themes1m 02s
底色
纸白
圆角
微圆
描边
细线
字体
书刊
动效
从容
密度
宽松

大报

暖色纸、直角、明确的描边。报纸读起来是一张网格,不是一叠卡片。

Deploys

passing
Recent deploys
BranchBuild
main2m 14s
codex/themes1m 02s
底色
暖白
圆角
直角
描边
明确
字体
书刊
动效
从容
密度
宽松

控制台

冷色底、紧凑行距、干脆的动效、单一界面字体。密集操作界面要的全在这。

Deploys

passing
Recent deploys
BranchBuild
main2m 14s
codex/themes1m 02s
底色
冷白
圆角
直角
描边
明确
字体
无衬线
动效
利落
密度
紧凑

沙龙

大圆角、克制的描边,衬线一路用到正文。这是读的界面,不是干活的界面。

Deploys

passing
Recent deploys
BranchBuild
main2m 14s
codex/themes1m 02s
底色
暖白
圆角
大圆
描边
克制
字体
通篇衬线
动效
从容
密度
宽松

诊室

纸白底配单一无衬线,一点暖意都没有。圆角把它从“表单”里拉回来。

Deploys

passing
Recent deploys
BranchBuild
main2m 14s
codex/themes1m 02s
底色
纸白
圆角
大圆
描边
细线
字体
无衬线
动效
利落
密度
宽松

各项轴

预设只是这些轴的一种组合,而不是自成一块,所以没人做过的搭配你照样调得出来。

底色 — data-surface
纸白 · 暖白 · 冷白
圆角 — data-radius
直角 · 微圆 · 大圆
描边 — data-rules
克制 · 细线 · 明确
字体 — data-type
书刊 · 无衬线 · 通篇衬线
动效 — data-motion
静止 · 从容 · 利落
密度 — data-density
宽松 · 紧凑