得意

原则

五条原则决定这一页怎么排，不是贴在旁边的口号。

得意忘言

字是主角，界面退后。每一屏只留一个主角，通常是一行得意黑。没有装饰图形，没有渐变，没有多余的线。

横平竖斜

栅格、基线、分隔线保持水平垂直。6° 只用在高度够得着的地方：标签，以及字自己的斜。下划线和进度条保持平直。

切而不圆

圆角是 0。靠 1px 墨线或底色的明暗分开。硬影向右下等距错开，不模糊。可点击的悬停用群青，浮层用墨。

只笑一次

开篇那个方块是这一页主动放上的黄，而且不是文字。完成的进度和 Highlight 标签会带上组件自己的黄。链接要等悬停，下划线才黄一下。除此之外不再涂。

窄而留白

窄字把空间让出来。用大块空白组织版面，不用盒子把内容圈起来。节奏以 4px 为基，密度宁低勿高。

记号

下面的数值来自生成的 token。亮色和暗色是同一套变量，没有另写一页颜色。

色

palette.paper#F5F3EE
palette.paper-2#EAE7E0
palette.paper-3#DFDBD2
palette.line#D6D2C8
palette.ink#16161A
palette.ink-soft#57544E
palette.ink-faint#8A867E
palette.night#121215
palette.night-2#1C1C21
palette.night-3#27272D
palette.night-line#34343B
palette.moon#F2F0EA
palette.moon-soft#ADA9A0
palette.moon-faint#7D7A73
palette.anchor#1F3FB8
palette.anchor-deep#172F8C
palette.anchor-light#8FA3FF
palette.anchor-lighter#B3C1FF
palette.smile#FFD60A
palette.vermilion#B3261E
palette.vermilion-light#FF8A80

color.bg亮 #F5F3EE暗 #121215
color.surface亮 #EAE7E0暗 #1C1C21
color.surface-strong亮 #DFDBD2暗 #27272D
color.text亮 #16161A暗 #F2F0EA
color.text-muted亮 #57544E暗 #ADA9A0
color.text-disabled亮 #8A867E暗 #7D7A73
color.line亮 #D6D2C8暗 #34343B
color.line-strong亮 #16161A暗 #F2F0EA
color.accent亮 #1F3FB8暗 #8FA3FF
color.accent-hover亮 #172F8C暗 #B3C1FF
color.on-accent亮 #F5F3EE暗 #121215
color.inverse亮 #16161A暗 #F2F0EA
color.on-inverse亮 #F5F3EE暗 #121215
color.highlight亮 #FFD60A不随主题变
color.on-highlight亮 #16161A不随主题变
color.danger亮 #B3261E暗 #FF8A80
color.shadow亮 #1F3FB8暗 #8FA3FF
color.focus亮 #1F3FB8暗 #8FA3FF
color.shadow-float亮 #16161A暗 #34343B

字

展示用得意黑，只排短的、不小于 14px 的字。正文是霞鹜文楷 LXGW WenKai，汉字和西文同一款，字重 400 / 500。行高 tight 1.05，display 1.15，heading 1.3，ui 1.4，body 1.75。

14　下限。窄而留白，字仍要读得清。

16　正文。言者所以在意，得意而忘言。

20　导语。比正文大一号，仍是文楷，不是得意黑。

Medium 只给需要强调的几个字。

注font-size.xs12px
得意font-size.sm14px
得意font-size.md16px
得意font-size.lg20px
得意font-size.xl24px
得意font-size.2xl32px
得意font-size.3xl40px
得意font-size.4xl56px
得意font-size.5xl80px
得意font-size.6xl120px

代码不使用 font.mono 的完整栈。仓库里没有 JetBrains Mono。示例先找本机的 JetBrains Mono，否则用系统等宽。

font-family: var(--deyi-font-display);

间距

space.14px
space.28px
space.312px
space.416px
space.520px
space.624px
space.832px
space.1040px
space.1248px
space.1664px
space.2496px
space.32128px

形状

圆角 0px。圆角 token 里的 9999px 只留给单选那样的圆，这一页的标记不用它。倾角 6deg。硬影位移 4px 与 8px，模糊 0px。

动效与版式的数

instant 80ms · fast 120ms · base 200ms · slow 320ms · slower 480ms

standard cubic-bezier(0.2, 0, 0, 1) · enter cubic-bezier(0, 0, 0, 1) · exit cubic-bezier(0.4, 0, 1, 1) · smile cubic-bezier(0.3, 1.35, 0.5, 1)

位移 8px，错开 40ms。栏 12，栏距 24px，页边距 96px。容器 text 720px，content 1248px，wide 1440px。比例 0.8。

组件

十二类。每类一个用法。悬停、按下、用键盘走到焦点上，状态是组件自己的。

按钮

直角。按下时，带影子的按钮会走进影子里。这一页只有一个群青按钮。

链接

正文里的链接是群青。悬停时下划线才出现，那一下是黄。得意黑的仓库。

输入

空着提交会变成错误。多行也是这一套输入，这里不另摆一个空盒子。

选择

复选、单选和开关都不加硬影。它们太小，承不住。

先读原则先读组件下次还从这里开始多写一句

焦点环包住控件和文字。轨道仍是直角。

卡片

一张就够。悬停才出现群青硬影。

悬停才有影子

纸，加上一条墨线。按下之后，卡片走进影子里。

去看动效

标签页

方向键可以换页。下划线同样平直。

结构保持水平。6° 只给够高的强调，字自己已经是斜的，不再加一层。

进度

轨道是平的。完成时，填充换成组件自己的黄。

读到这一节60%

读完完成

提示

页内的说明贴着纸。浮起来的那一条可以关掉。

只是说明

信息用群青条。错误用朱红。成功的色条是组件自己的黄，这一页不再另涂一条。

可以关掉

浮层的影子向右下，不模糊。

对话框

打开之后，焦点留在对话框里。取消和确认都只是把它关上。

表格

表头用 500。数字靠右，而且是等宽数字。

记号	值
duration.instant	80ms
duration.fast	120ms
duration.base	200ms
duration.slow	320ms
duration.slower	480ms

动效

从左下沿 6° 走到原位。进入果断停下。确认才过冲一次。系统若要求减少动态，位移取消，只留下很短的淡入。

版式

栏数、栏距和页边距会随视口变。这一排格子用的就是当前视口的栏数。桌面 12 栏、页边距 96px；平板 8 栏、页边距 48px；手机 4 栏、栏距 16px、页边距 20px。

断点 sm 640px，md 960px，lg 1280px，xl 1600px。正文不超过 720px。

4:5 是 0.8。框是平的，不是一张卡片。

出处

得意黑 Smiley Sans，atelierAnchor，SIL Open Font License 1.1。保留字体名「Smiley」「得意黑」。文件是官方 v2.0.1 的 woff2，没有修改，没有子集化。atelier-anchor/smiley-sans，atelier-anchor.com。

霞鹜文楷 LXGW WenKai，LXGW，SIL OFL 1.1。网页用的是官方 v1.522 TTF 的 WOFF2 封装，字形没有改，没有子集化。Regular 400，Medium 500。lxgw/LxgwWenKai。

许可证全文见 SIL：openfontlicense.org。

这一页使用生成的记号和组件。管线的像素验收还没有在浏览器里完成，这里不把它写成已经通过。

得意

原则