Ocean Series · Design Tokens v0.1
海洋系列设计系统
日光海浅色是产品壳默认；深海给地图与沉浸分析；红头周报是体裁变体，不污染看板。以下色板、字号、按钮均来自 tokens.css。
三套主题规则
1 · 日光海
产品壳默认
门户与四盘看板使用浅色体系。海军主色与四盘强调色（蓝 / 青 / 琥珀 / 红）只出现在壳层，不混入周报刊头。
2 · 红头周报
体裁变体
data-theme="gazette" 只给 marine-weekly。机关红是刊头，不是看板主色，避免把周报红渗进四盘。
3 · 深海
沉浸分析
data-theme="deep" 用于地图、节点图。表面改暗，语义色（成功 / 警告 / 危险 / 红涨绿跌）与浅色对齐。
兄弟仓库请链接源文件，不要复制 tokens：
<link href="http://wangdw.xyz/design-system/tokens.css">
四盘强调色 --pan-a … --pan-d
表面与墨色 --bg / --card / --fg
页面底 --bg
日光海默认浅底。随主题切换会变成深海或周报灰底。
弱底 --bg-subtle
分区、表格斑马纹、次级面板。
卡片 --card
主墨 --fg · 次墨 --fg-secondary · 说明 --muted · 更淡 --faint
海军主色 --primary
门户标题同源。按钮前景用 --primary-fg。
按钮
字号阶梯 --text-xs … --text-3xl
3xl / 30海洋经济数字镜像
2xl / 24三盘一底座
xl / 20家底盘 · 企业全景
lg / 17广州涉海企业，谁值得跟？
base / 15正文字号。行高 --leading 1.65。
md / 14卡片次级说明
sm / 13辅助信息 · 顶栏药丸
xs / 12JetBrains Mono · --font-mono
衬线示例 —— 「红头周报」刊头可用 --font-serif。
语义色
成功 · --success
警告 · --warning
危险 · --danger
信息 · --info
行情涨 --up +1.24%行情跌 --down −0.86%