按钮
主按钮使用 cdx-700 背景，CTA 采用 13px / 600 / 0.16em 大写并配箭头。次级按钮默认白底描边，hover 时才切换为品牌色；同一区域最多出现一个主按钮。
<section id="buttons" class="section">
<div class="section-title">03 · BUTTONS · 按钮</div>
<div class="demo-box">
<div class="demo-sub">Primary · Secondary · Danger · Dashed · Link</div>
<div class="flex flex-wrap gap-3 mb-6">
<button class="group inline-flex items-center gap-4 px-8 py-4 bg-cdx-700 text-white text-[13px] font-semibold tracking-[0.16em] uppercase rounded transition-all duration-500 hover:bg-cdx-600 hover:gap-6">
<span>主按钮 CTA</span>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button class="px-4 py-2 bg-cdx-700 text-white text-[13px] font-medium rounded hover:bg-cdx-800 transition">品牌色</button>
<button class="px-4 py-2 bg-white border border-ink-200 text-ink-600 text-[13px] font-medium rounded hover:border-cdx-700 hover:text-cdx-700 transition">次级按钮</button>
<button class="px-4 py-2 bg-[#A8453B] text-white text-[13px] font-medium rounded">危险按钮</button>
<button class="px-4 py-2 bg-white border border-[#A8453B] text-[#A8453B] text-[13px] font-medium rounded">危险幽灵</button>
<button class="px-4 py-2 border border-dashed border-ink-300 text-ink-700 text-[13px] rounded">+ 虚线添加</button>
<button class="px-4 py-2 border border-ink-200 text-ink-300 text-[13px] rounded bg-ink-50" disabled>禁用按钮</button>
<a class="inline-flex items-center gap-1.5 text-cdx-700 hover:text-cdx-900 font-semibold text-[13px] cursor-pointer px-4 py-2">链接按钮 →</a>
</div>
<div class="demo-sub">Mini · Page · Button Group</div>
<div class="flex flex-wrap gap-3 items-center">
<button class="px-2 py-1 text-[13px] border border-ink-200 bg-white rounded hover:border-cdx-700 hover:text-cdx-700">查看</button>
<button class="px-2 py-1 text-[13px] border border-ink-200 bg-white rounded hover:border-cdx-700 hover:text-cdx-700">编辑</button>
<button class="px-2 py-1 text-[13px] bg-[#A8453B] text-white rounded">删除</button>
<span class="text-ink-300 mx-2">|</span>
<div class="demo-pager">
<button class="demo-page" type="button" data-page="prev" aria-label="上一页">‹</button>
<button class="demo-page is-current" type="button" data-page="1">1</button>
<button class="demo-page" type="button" data-page="2">2</button>
<button class="demo-page" type="button" data-page="next" aria-label="下一页">›</button>
</div>
<span class="text-ink-300 mx-2">|</span>
<div class="demo-seg">
<button class="demo-seg-item" type="button">日</button>
<button class="demo-seg-item" type="button">周</button>
<button class="demo-seg-item is-active" type="button">月</button>
<button class="demo-seg-item" type="button">年</button>
</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 检查清单逐项核对。