通天路TONGTOP · WAYMARKS
Theme · 主题 token
纸墨立秩序，
路金指方向。
主题不是一套好看的色卡，而是一份变量之间的契约：大面积交给纸与墨，界线负责分区，金色只在「路径、当前状态、主行动」三处开口。以下所有 token 与线上站点 static/headless/headless.css 的 :root 一一对应。
Palette
七色品牌色板
三个结构色承担 90% 的面积，路金是唯一的强调色，其余三色只在语义需要时出现。
路纸 Paper
#F5F0E6页面底色内容 Canvas
#FFFCF5卡片画布墨 Ink
#19150F正文与主按钮路金 Waymark
#B8792C路径 / 当前 / 主行动苔 Moss
#50634D完成 / 生长远山 Blue
#3C5B73远景 / 元信息锈红 Risk
#A14932风险 / 破坏性
为什么
路纸偏暖、墨近黑褐，两者对比成立「纸墨阅读」的底座；画布比纸更亮半度，卡片便自然浮起。金取矿金而非柠檬黄——够醒目但不刺眼，小面积使用也不廉价。苔/蓝/锈是低饱和的环境色，语义到了才出场，平时不参与竞争注意力。
Semantic tokens
语义 token 映射
组件只消费语义变量，不直接写死色值；换主题即换一套变量，组件不用改。
| 语义 token | 取值（浅色） | 来源色 | 用在哪里 |
|---|---|---|---|
--background | #f5f0e6 | 路纸 | 页面 / 外壳底色，也是 theme-color |
--foreground | #19150f | 墨 | 正文与标题文字 |
--card | #fffcf5 | 内容画布 | 卡片 / 弹层表面 |
--primary | #19150f | 墨（不是金！） | 主按钮填充；暗色下为米白 |
--primary-foreground | #fff8e8 | 奶油 | 墨色按钮上的文字 |
--muted | #eee7da | 亚麻 | 次级表面 / 悬停底 |
--muted-foreground | #5f5548 | 灰墨 | 次级文字、说明 |
--border / --input | #d8cdba | 界线 | 分隔线、输入框描边——秩序的主要来源 |
--accent | #eee7da | 亚麻（非金） | 悬停底色；故意不映射金，避免全站 hover 镀金 |
--ring | #b8792c | 路金 | 焦点环 = 当前状态，保持金色 |
--brand-gold / -strong / -soft | #b8792c / #845414 / #ead9b9 | 路金三阶 | 路标线 / kicker 文字 / 徽章与当前项底 |
--brand-moss / -blue / -rust | 苔 / 远山 / 锈红 | 状态与语义色，组件选择接入 | |
--destructive | #a14932 | 锈红 | 破坏性操作；全站只有这一种红 |
--radius | 0.75rem | — | 介于参考板 r-md 与 r-lg 之间的克制圆角 |
为什么 --primary 是墨而不是金
若主按钮是金色，每个页面到处都是大块金，路金就退成了普通配色。让按钮保持墨色，金色才能继续指路。同理
--accent 刻意保持亚麻色：导航悬停不该「镀金」，金只留给真正的当前项。
为什么界线如此重要
纸墨是低刺激的组合，靠
--border 的暖色界线与 --muted 的次级表面分区，页面秩序来自这些细界线，而不是重底色——这也是「品牌感来自重复的秩序」在变量层的落地。
Shape & depth
圆角与阴影
圆角统一 12px，阴影只求把卡片从纸上轻轻托起，不做浮夸投影。
waymark 9pxr-sm 6pxr-md 10pxr-lg 14px--radius 0.75rem--shadow 纸上托起
为什么
12px 圆角卡在 r-md 与 r-lg 之间，既有手工纸感又不卡通；阴影统一走暖墨色（
rgb(46 31 12 / 42%)）而不是纯黑，投影才像落在纸上。不重绘全站每一个 rounded-*，改动成本与视觉收益成比例。
Dark theme
暗色不是黑金霓虹，
而是夜路上的灯。
暗色主题保留完整的高对比纸墨关系——只是纸换成了夜，墨换成了米白。金色变亮为 #D9AA4E，只照亮当前路标，不给所有卡片描金。
主按钮在夜里是米白（--primary: #f2e8d9），墨字压在上面；若主按钮镀金，夜路就变成霓虹街——那不是通天路。
为什么
苔 / 远山 / 锈红三色在夜色里保持原值（theme-stable），只有结构色与金三阶换挡——变化越少，记忆越稳。焦点环在夜里依然是金：黑暗中更需要看清「你现在在哪里」。