设计系统 · Design system — Glean

01 · Brand

三个词概括 Glean

编辑选过 · 手工挑出来的 · 反 tech-bro。Glean 想感觉像一份周日早晨的报刊副刊：奶油色印刷纸 + 真正的衬线字 + 可以收藏的周刊。

Glean's brand mark

圆 + 曲

A head bent over to pick up. 拾 (glean) — to gather what's been left behind.

02 · Color

OKLCH 双层 token

原始 token（OKLCH 色阶，主题无关）+ 语义 token（组件消费的公开 API）。Dark mode 只重映射语义层。

Brand · 60-30-10

--c-primary

coral-500 · oklch(63% 0.105 32)

--c-canvas

warm-50 · oklch(98% 0.005 75)

--c-surface-card

warm-200 · 0.013 chroma 75°

--c-ink

ink-950 · oklch(17% 0.003 60)

Surfaces — warm neutrals

warm-50

L 98%

warm-100

L 95%

warm-200

L 92%

warm-300

L 91%

warm-400

L 89%

Surfaces — ink (dark)

ink-700

body text · L 31%

ink-800

body-strong · L 22%

ink-850

dark elev · L 24%

ink-900

surface-dark · L 20%

ink-950

ink · L 17%

Accents — 10% by weight

--c-accent-teal

infra family

--c-accent-amber

data family · issue eyebrow

--c-success

published

--c-warning

warning

--c-error

rejected

Tag category families

Three buckets so the eye scans card metadata by category, not just text.

Edge Cloudflare Infra Database DB React JS Performance Distributed Systems

03 · Type

单 Serif 系统

Serif 承担层级 + 正文。Sans 只为 code 和 label 服务。正文 400 / 标题 500 / label 600。

Display + body — Source Serif 4

Hand-curated · 拾遗

Frank Grießhammer / Adobe's free, variable-width, optical-size serif designed for screen reading at body sizes.

Display + body — LXGW WenKai (CJK)

一份手挑的双语技术刊

霞鹜文楷 · Vince Chen 主导的免费屏幕优化楷体。

Mono — JetBrains Mono

const editor = team.glean("oklch");

The only "sans-style geometry" on the site — code + label tier.

04 · Space

4pt scale + rhythm

8pt 太粗——4pt 才有 12 这一档"两个标准值之间"的过渡空间。

Spacing ruler

--s-xxs

4 px

--s-xs

8 px

--s-sm

12 px

--s-md

16 px

--s-lg

24 px

--s-xl

32 px

--s-xxl

48 px

--s-section

96 px

05 · Components

Live components

实活渲染。颜色 / 字体 / 间距全部从 token 解出。

Buttons

Tags / Badges

Default 头条 Edge Database React

Status pills (admin)

Pending Processing Ready Published Rejected

06 · Patterns

Do / Don't

✓ Glean does

用 serif 通吃 — 长读 = 出版物气质
头条卡比次条卡更大 + 更密 — 报刊版式
每段 section 节奏不同 — open 96 / tight 48 交替
所有触摸目标 ≥ 44 × 44
Tag 用 3 个家族色编码 — 不彩虹
Dark mode 通过 prefers-color-scheme

✗ Glean does not

用 sans-serif 跑正文（Inter / Roboto / Cormorant 都 ban）
3 张完全相同大小的卡片排排坐
每段 section 同样 48/48 padding
触摸目标 < 44px 不打报告
tag 上 5+ 种颜色（rainbow vomit）

07 · Banned

AI slop black list

这些是 AI 生成站点最易识别的指纹。遇到就重写，不要"调整一下"。

border-left: 3px solid red 当作 accent stripe

最被滥用的"设计触感"。改用完整边框 / 背景色 / leading 数字 / 不加视觉标记。

background-clip: text + gradient = 渐变文字

装饰而非意义。文字用纯色，强调用 weight / size。

Glassmorphism 装饰性毛玻璃

过气趋势。除非真有需要（sticky nav 透出后面内容）。

装饰性 sparkline

看似精致，实则没信息。要数据就用真数据，没数据就不画。

圆角 + 阴影 + 浅灰背景的"安全容器"

每个 AI 都会输出的"默认 card"。用 hairline border / 实色背景 / 不加容器。

Modal 弹层

懒交互。改用 inline edit / drawer / <details>。

Hero metric 模板：big number + label + 4 stat

SaaS landing page 套路。

完全相同的卡片网格 × N

Pinterest 美学。用报纸"头条+次条"变化尺寸。

Bounce / elastic easing

用 ease-out-quart / quint / expo（自然减速）。

Inter / Roboto / Cormorant / Fraunces 等 reflex fonts

AI 训练数据默认值，全网撞脸。

08 · Accessibility

A11y checklist

Criterion	Standard	Status
Body text contrast	WCAG AA 4.5:1	✓ Pass
Touch target size	WCAG 2.5.5 AAA 44×44	✓ Pass
Heading hierarchy (no skip)	WCAG 1.3.1	✓ Pass
Form labels (for/id or wrap)	WCAG 1.3.1 / 3.3.2	✓ Pass
Skip link to main	WCAG 2.4.1	✓ Pass
Visible focus indicator	WCAG 2.4.7	✓ Pass
html lang declaration	WCAG 3.1.1	✓ Pass
Reduced motion respected	WCAG 2.3.3	✓ Pass

设计系统The design system