- 稳定性
- 稳定
- 作用域
- 全局
- 边界
- packages/design
Aa Heading
Body copy renders the rhythm.
Small body for secondary context.
Caption · the smallest step
Tokens 数
242
组件
27
覆盖率
93%
同步状态
OK
1@import "@nebutra/tokens/styles.css";
2
3.cta {
4 background: hsl(var(--primary));
5 color: var(--neutral-1);
6 border-radius: var(--radius-md);
7 padding: 0.75rem 1.25rem;
8}- blue
- cyan
- grad
- ok
- warn
- err
oklch · DTCG · Style Dictionary
brand
品牌原语 — 颜色定义、渐变 token、动效语言;为源数据,不被 app 运行时直接引用。
查看design-sync
纯 Git 的设计 token 同步 — token 以仓库为唯一数据源,无需再和设计工具做双向同步。
查看{
"color.brand.primary": {
"$value": "hsl(var(--primary))",
"$type": "color"
}
}- brand.primary
- brand.accent
- status.success
Style Dictionary 4multi-platform output
design-tokens
W3C DTCG $value/$type 规范的 token 文件 + Style Dictionary 4 流水线;输出 CSS 变量与 JS module，纯 Git 编辑，不经设计工具同步往返。
查看fonts
fonts 是 设计系统 能力域中的独立 package,边界保持在 packages/design/fonts,向上层暴露稳定的能力接口。
查看icons
541 个 Geist icon,以 tree-shakable TSX 组件分发;单字重 + 光学尺寸,与 Vercel / v0 视觉对齐。
查看theme
纯 CSS 多 theme 引擎 — 六套 oklch preset,通过 data-theme 切换;关键路径无 JS。
查看tokens
运行时 CSS 变量 + ThemeProvider — 所有 app 颜色 / 间距 / radius 的单一数据源;在 globals.css 中 @import。
查看typelens-catalog
typelens-catalog 是 设计系统 能力域中的独立 package,边界保持在 packages/design/typelens-catalog,向上层暴露稳定的能力接口。
查看Primitives + GSAP, themed by tokens.
ui
主组件库 — Nebutra 组件、自研原语、layout、主题桥接与共享 Motion 门面；产品 UI 的 import 边界。
查看