- 稳定性
- 稳定
- 作用域
- 全局
- 边界
- 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: var(--brand-gradient);
5 color: var(--neutral-1);
6 border-radius: var(--radius-md);
7 padding: var(--space-3) var(--space-5);
8}- blue
- cyan
- grad
- ok
- warn
- err
oklch · DTCG · Style Dictionary
brand
品牌原语 — 颜色定义、渐变 token、动效语言;为源数据,不被 app 运行时直接引用。
查看design-sync
Provider 无关的设计工具同步 — Figma / Penpot / 仅 Git;双向同步 token,默认 dry-run 安全。
查看{
"color.brand.primary": {
"$value": "#0033FE",
"$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、Figma 同步源。
查看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。
查看Primitives + framer-motion, themed by tokens.
ui
主组件库 — Nebutra 组件、自研原语、layout、主题桥接与共享 Motion 门面；产品 UI 的 import 边界。
查看