color · type · space · motion
A quiet palette
built to move.
xdanger.com 的编辑型 token 系统——低饱和、像纸上的墨；扩展出分类色、sequential 阶梯与图表基础设施色，让交互可视化在明暗两套主题里都保持克制。切换右上角主题，下面每个值都是实时的
CSS 变量。
6 categorical hues 3 sequential ramps 4 type families 2 themes
Color
每个色块都是实时的 var()。点色块复制 token
名，点下方数值复制当前主题解析出的颜色。
surfaces & ink
暖中性的主轴：纸、面板、四级墨色。色度压在 0.013 以下，任何一处都不显得被染色。
brand accent
主角色——并且 跨主题换色：浅色胭红（carmine）、深色玉绿（jade），即 Ember · Jade
方案。
--color-accent 承载所有主操作、链接、单序列标记与焦点。浅色下它即分类色第 1 槽；分类色本身保持稳定（见下），多序列图在两套主题里都不丢身份。
categorical palette
同一寄存器里的六个色相——等明度、等色度，沿色轮均匀分布——多序列图因此清晰，没有哪一根在喊。
sequential ramps
单色相强度阶梯，用于条形、分级填色与热力图。1 = 最低值，6 = 最强——方向随主题翻转，峰值永远读起来最重。accent 阶梯跟随品牌色：浅色绯红、深色翠绿。
seq · neutral
semantic · gain & loss
财经视图用（收益 / 亏损）。下方是西式默认——涨绿跌红；按 A 股习惯把两个 token 对调即可。
chart infrastructure
配角：网格线、坐标轴、滑块底槽、虚线占位，以及半透明的 hover 罩色。
Typography
四个角色：mono 给标签与数据、serif 给标题、sans 给阅读、writer（Inter）给小标题。token
名沿用设计系统，实际字体仍是站点现用的 iA Writer / LXGW Bright / Inter，连同 fallback 链。
--font-mono May 04, 2025 · v2.0
mono · labels & data
--font-serif 重力加速度 决定文明
serif · 标题 display
--font-sans Notes on tech, products, and life.
sans · 正文 reading
--font-writer A quiet palette, built to move.
writer · headings (Inter)
--text-3xl 48px Display heading
--text-2xl 36px Page heading
--text-xl 28px Section title
--text-lg 22px Subhead
--text-md 18px Lead paragraph body text
--text-base 16px Body — the default reading size
--text-sm 14px Labels, metadata and captions
--text-xs 12px Mono ticks and fine print
Space, radius & elevation
4px 间距基数、一套柔和圆角，三级暖色低对比阴影。
spacing
--space-1 4px
--space-2 8px
--space-3 12px
--space-4 16px
--space-5 24px
--space-6 32px
--space-7 48px
--space-8 64px
--space-9 96px
--space-10 128px
radius
elevation
Motion
时长与缓动。把鼠标移到任意卡片上触发；在 reduced-motion 下全部塌缩为 0ms。
--dur-fast 140ms hover — duration --dur-base 240ms hover — duration --dur-slow 420ms hover — duration --dur-slower 720ms hover — duration --ease-standard entrances & UI hover — easing --ease-out decel · reveals hover — easing --ease-in-out moves A→B hover — easing In context
配色在干真活——这些正是 note / post 里会用的组件层（SVG · Canvas ·
React），全部随主题实时重画。 下方三件是站点真实组件，直接吃这套 token。
Multi-series lines — categorical palette · 零 JS SVG carmine terracotta ochre jade steel
Sequential bars — accent ramp Gain / loss & tooltip — semantic BRK.A+2.4%
AAPL+0.8%
TTWO−1.6%
Mar 15 · 2025+ 629 (63%)
Tags, links & placeholder carmine terracotta ochre jade steel plum
延伸阅读 压缩即智慧? —— 链接承载 accent 色。
product shot · drop image
Orbit — animated SVG（OrbitDiagram，零 JS 自动变色）
Waveform — Canvas（WaveField，切主题重新取色重画）
Compound interest — React island（CompoundInterest，状态联动） 10 年后：1,629
收益 +629（63%）