色彩系统

90% 的界面交给 ink 灰阶，cdx 深青只用于关键数字、链接与激活态。所有颜色均提供从 50 到 950 的完整阶梯，可直接在 Tailwind 中通过 ink-*、cdx-*、warm-* 调用。

返回组件库
01 · COLORS · 色彩系统
ink 墨黑系列（主色）
50
#FAFAFA
100
#F4F4F5
200
#E4E4E7
300
#D4D4D8
400
#A1A1AA
500
#71717A
600
#52525B
700
#3F3F46
800
#27272A
900★
#18181B
950
#09090B
cdx 深青系列（品牌强调色）
50★
#F0F7F8
100
#D9EBED
200
#B0D6DB
300
#7FBAC2
400
#4D9CA7
500
#2A7F8B
600
#1D6571
700★★★
#185058
800
#143F47
900
#0F2F35
950
#081B1F
warm 暖金 + 状态色 + 命中高亮
warm-50
#FBF9F4
warm-700
#6E582C
success
#3F8F5C
warning
#C28A2C
danger
#A8453B
error
#DC2626
hl-bg
#FEF3C7
live
#15803D
<section id="colors" class="section">
    <div class="section-title">01 · COLORS · 色彩系统</div>

    <div class="demo-sub">ink 墨黑系列（主色）</div>
    <div class="grid grid-cols-11 gap-2 mb-8">
      <div class="swatch"><div class="color" style="background:#FAFAFA"></div><div class="info"><div class="name">50</div><div class="hex">#FAFAFA</div></div></div>
      <div class="swatch"><div class="color" style="background:#F4F4F5"></div><div class="info"><div class="name">100</div><div class="hex">#F4F4F5</div></div></div>
      <div class="swatch"><div class="color" style="background:#E4E4E7"></div><div class="info"><div class="name">200</div><div class="hex">#E4E4E7</div></div></div>
      <div class="swatch"><div class="color" style="background:#D4D4D8"></div><div class="info"><div class="name">300</div><div class="hex">#D4D4D8</div></div></div>
      <div class="swatch"><div class="color" style="background:#A1A1AA"></div><div class="info"><div class="name">400</div><div class="hex">#A1A1AA</div></div></div>
      <div class="swatch"><div class="color" style="background:#71717A"></div><div class="info"><div class="name">500</div><div class="hex">#71717A</div></div></div>
      <div class="swatch"><div class="color" style="background:#52525B"></div><div class="info"><div class="name">600</div><div class="hex">#52525B</div></div></div>
      <div class="swatch"><div class="color" style="background:#3F3F46"></div><div class="info"><div class="name">700</div><div class="hex">#3F3F46</div></div></div>
      <div class="swatch"><div class="color" style="background:#27272A"></div><div class="info"><div class="name">800</div><div class="hex">#27272A</div></div></div>
      <div class="swatch"><div class="color" style="background:#18181B"></div><div class="info"><div class="name">900★</div><div class="hex">#18181B</div></div></div>
      <div class="swatch"><div class="color" style="background:#09090B"></div><div class="info"><div class="name">950</div><div class="hex">#09090B</div></div></div>
    </div>

    <div class="demo-sub">cdx 深青系列（品牌强调色）</div>
    <div class="grid grid-cols-11 gap-2 mb-8">
      <div class="swatch"><div class="color" style="background:#F0F7F8"></div><div class="info"><div class="name">50★</div><div class="hex">#F0F7F8</div></div></div>
      <div class="swatch"><div class="color" style="background:#D9EBED"></div><div class="info"><div class="name">100</div><div class="hex">#D9EBED</div></div></div>
      <div class="swatch"><div class="color" style="background:#B0D6DB"></div><div class="info"><div class="name">200</div><div class="hex">#B0D6DB</div></div></div>
      <div class="swatch"><div class="color" style="background:#7FBAC2"></div><div class="info"><div class="name">300</div><div class="hex">#7FBAC2</div></div></div>
      <div class="swatch"><div class="color" style="background:#4D9CA7"></div><div class="info"><div class="name">400</div><div class="hex">#4D9CA7</div></div></div>
      <div class="swatch"><div class="color" style="background:#2A7F8B"></div><div class="info"><div class="name">500</div><div class="hex">#2A7F8B</div></div></div>
      <div class="swatch"><div class="color" style="background:#1D6571"></div><div class="info"><div class="name">600</div><div class="hex">#1D6571</div></div></div>
      <div class="swatch"><div class="color" style="background:#185058"></div><div class="info"><div class="name">700★★★</div><div class="hex">#185058</div></div></div>
      <div class="swatch"><div class="color" style="background:#143F47"></div><div class="info"><div class="name">800</div><div class="hex">#143F47</div></div></div>
      <div class="swatch"><div class="color" style="background:#0F2F35"></div><div class="info"><div class="name">900</div><div class="hex">#0F2F35</div></div></div>
      <div class="swatch"><div class="color" style="background:#081B1F"></div><div class="info"><div class="name">950</div><div class="hex">#081B1F</div></div></div>
    </div>

    <div class="demo-sub">warm 暖金 + 状态色 + 命中高亮</div>
    <div class="grid grid-cols-8 gap-2 mb-8">
      <div class="swatch"><div class="color" style="background:#FBF9F4"></div><div class="info"><div class="name">warm-50</div><div class="hex">#FBF9F4</div></div></div>
      <div class="swatch"><div class="color" style="background:#6E582C"></div><div class="info"><div class="name">warm-700</div><div class="hex">#6E582C</div></div></div>
      <div class="swatch"><div class="color" style="background:#3F8F5C"></div><div class="info"><div class="name">success</div><div class="hex">#3F8F5C</div></div></div>
      <div class="swatch"><div class="color" style="background:#C28A2C"></div><div class="info"><div class="name">warning</div><div class="hex">#C28A2C</div></div></div>
      <div class="swatch"><div class="color" style="background:#A8453B"></div><div class="info"><div class="name">danger</div><div class="hex">#A8453B</div></div></div>
      <div class="swatch"><div class="color" style="background:#DC2626"></div><div class="info"><div class="name">error</div><div class="hex">#DC2626</div></div></div>
      <div class="swatch"><div class="color" style="background:#FEF3C7"></div><div class="info"><div class="name">hl-bg</div><div class="hex">#FEF3C7</div></div></div>
      <div class="swatch"><div class="color" style="background:#15803D"></div><div class="info"><div class="name">live</div><div class="hex">#15803D</div></div></div>
    </div>
  </section>

安装

在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。

<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>

使用方式

在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。

组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。

设计规范

完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。