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