全站直角
8 个圆角档位全部归零。没有一处 4px 的柔和过渡，边界永远是硬边。
--radius-*: 0px为终端美学而生的界面语言
一套建立在 Tailwind v4 之上的 CSS 变量设计系统。12 个语义 token 决定所有颜色，两套主题（深色 / 亮色）挂在data-theme 上，因此任何子树都能局部换主题。所有组件默认直角、等宽字体、1px 描边。
三条主张
整套系统只围绕三个决定展开，其余都是它们的推论。
正文即等宽
正文、按钮、导航、表单控件都走等宽字体；无衬线只留给标题、表头和统计数字。
font-family: var(--zz-font-mono)描边代替投影
深色下"浮起"是零模糊的 1px 外描边，悬停只改描边透明度，所以不会跳动。
box-shadow: var(--zz-elevation)快速开始
样式入口是一个 CSS 文件，任何框架都能直接用；文档站本身是 Astro。
# 1. 装包（字体已随包分发，无需另装）
pnpm add @hsinyau/design-system tailwindcss @tailwindcss/vite
# 2. 入口 CSS 里按顺序引入：先 Tailwind，再库
@import 'tailwindcss';
@import '@hsinyau/design-system/styles.css'; /* 字体 + token + 基础层 + 组件层 */
/* 也可按需只引一块：tokens.css / base.css / components/button.css */
# 3. 在 vite 配置里挂上 Tailwind
plugins: [tailwindcss()]
# 不用 Tailwind？用编译好的独立产物，无需任何构建步骤
@import '@hsinyau/design-system/standalone.css';组件的样式是原生 CSS 类（.zz-btn、.zz-card…），与框架无关；Tailwind 只负责按需生成 bg-zz-surface 这类工具类，以及 preflight。
token 速览
下面每个色块都直接读取当前主题的变量，切换顶栏的开关即可看到两套值。
--zz-bg-deep
凹槽
--zz-bg
页面
--zz-surface
面板
--zz-surface-2
悬停面
--zz-border-subtle
发丝线
--zz-border-strong
控件描边
--zz-text
主文本
--zz-text-muted
弱文本
--zz-brand
强调
--zz-danger
危险
--zz-warning
警告
--zz-success
成功
目录
| 页面 | 内容 |
|---|---|
| 颜色 | 12 个语义 token，两套主题的值逐条列清 |
| 排版 | 等宽与无衬线的分工，字号阶梯与角色配方 |
| 间距与层级 | 间距刻度、容器宽度、边框与 z-index 规范 |
| 动效与可访问性 | 时长、按下反馈、主题擦除、reduced-motion |
| 按钮 | 6 变体 × 8 尺寸，交互反馈的唯一实现 |
| 卡片与展示 | 卡片、徽章、头像、统计数字、代码块 |
| 表单 | 输入、选择、勾选、开关与字段容器 |
| 主题 | 局部换主题与新增主题的完整步骤 |