设计

本站为自己排版所定的规则，以及这样定的理由。

以测量立身的研究室，也该测量自己的屏幕。本页的色值与对比度在构建时从实际样式表读取计算，下面的决定是制作过程中撞到的问题的记录。

两种底色

日间与暗色。跟随访客的系统设置，若亲自选择则以选择为准。强调色在两种底色下是同一种黄 — 随底色而变的颜色就不是同一种颜色。会变的只是这种黄要充当文字的时候。

日间

底色#f7f6f2
卡片#fff
浅面#eae8df
细线#b0b0a1
辅助文字#4a4a41
正文文字#14140f
强调色#ffc600
作为文字的强调色#7d5c00
强调色上的文字#0f0f0f
辅助色#1a5f58

正文 17.08:1 / 辅助 8.27:1 / 强调色之上 12.17:1

暗色

底色#0f0f0f
卡片#1a1918
浅面#161615
细线#333130
辅助文字#9a9691
正文文字#f1eeea
强调色#ffc600
作为文字的强调色#ffc600
强调色上的文字#0f0f0f
辅助色#6fb3a6

正文 16.57:1 / 辅助 6.52:1 / 强调色之上 12.17:1

字体

心

Cormorant Garamond + Gowun Batang / 300 / 标题与大字

正文用无衬线，长列表里也读得动。

Pretendard / 400 / 正文

SCIE Q1 / 2026-08 / DOI

IBM Plex Mono / 供机器读取的部分 — 索引、日期、数值

字号

只有五级。右侧数字为桌面端与手机端。在手机上每一级都会变大 — 因为放得更远的屏幕上，同样的字号读起来更小。

labels测量情感，并把它变成形状12 / 12index tags and role names — marks rather than prose

marginalia测量情感，并把它变成形状13.5 / 13.5dates, counts, short glosses

secondary测量情感，并把它变成形状14.5 / 15captions and footnotes

body测量情感，并把它变成形状16 / 16.5paragraphs, lists, buttons

lead测量情感，并把它变成形状17 / 17.5page ledes and definitions

留白与宽度

先定下阅读宽度，再用章节之间的呼吸构成结构。分隔靠留白，不靠线。

1080px正文最大宽度
24px左右留白
80px章节之间
1pxhairline, used 42 times

间距

只有十二级，中间的值不用。小的几级是元素内部的留白，大的几级是章节之间的呼吸。右侧数字为桌面端与手机端 — 手机上只有大的几级会缩小，因为窄屏需要更少的是章节之间的空气，而不是按钮内部的留白。

sp-12 / 2a hair beside a rule

sp-24 / 4inside a chip

sp-38 / 8between chips, between lines

sp-412 / 12inside a card

sp-516 / 16between paragraphs

sp-620 / 20

sp-724 / 24between columns

sp-832 / 24between groups

sp-940 / 32

sp-1048 / 40before a heading

sp-1164 / 48

sp-1280 / 56between sections

形状

胶囊形 — 可以按的东西 8px — 用于容纳 9px 圆点 — 章节的标记

标志

空心圆是测得的当下状态，实心圆是设计所瞄准的状态。研究室所做的一切，就是这两个圆之间的距离。

决定

韩文不沿用拉丁字母的字号

把拉丁文的 96px 标题原样搬过来，韩文显得沉重得多 — 两者填满字面的程度不同。标题因此从 124px 降到 82px。

混排两种文字的行不用等宽体

没有收录韩文的等宽字体，参与者名单在同一行里字体就裂开了 — 只有拉丁文名字落进等宽体。

强调色上的文字由令牌决定

强调色在日间偏暗、在暗色下偏亮，写死为白字的按钮在暗底上只有 1.9:1 的对比。

整面铺满强调色的区块，一屏只有一个

颜色要有意义就必须稀少。在本站，强调色只用于三处：此刻所在、目标情感，以及加入我们。

对比不靠主张，而靠测量

本页数值在构建时从 style.css 读取并计算，文档不可能与实物脱节。

在手机上所有字号都会变大

在一臂之遥观看的屏幕上，同样的字号读起来更小。小于 15px 的文字从 77% 降到 14%，剩下的只有标签与日期。