Design System Supply Chain

设计系统供应链

Brand assets, DTCG tokens, Tailwind v4 theme exports, Geist icons, UI primitives, registry builds, and git-only/design-md sync operate as a pipeline.

9 packages, 1475 source files and 87 test files in packages/design. · Source ↗ · Docs ↗

Token-to-app supply chain

One fact, one owner: colors, icons, components, and registries flow through governed package boundaries.

@nebutra/design-tokensW3C DTCG source of truth
@nebutra/tokensCSS variables and ThemeProvider entry
@nebutra/themeTailwind v4 @theme and data-theme selectors
@nebutra/iconsGeist icon React package
@nebutra/uiprimitives, layouts, registry, governance tests

What it owns

CSS variable tokens, oklch themes, brand primitives, and generated assets
Reusable primitives, layout shells, registry manifests, and Storybook surfaces
Design sync scripts and policy tests for UI governance

Where it stops

Landing pages compose design packages; they do not fork primitives.
Token changes flow through brand sync, not one-off hex overrides.

How we know it works

React Doctor, Storybook registry generation, and token sync checks
design-docs component pages and governance tests

In code

theme.css

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}

Packages

9 packages in packages/design.

brand · tokensdesign

blue
cyan
grad
ok
warn
err

AaAaAa

oklch · DTCG · Style Dictionary

brand

Brand primitives — color definitions, gradient tokens, motion language. Source data; not imported at runtime by apps.

DTCG JSON

git

@nebutra/tokens

pull1.2s · 47 tokens re-read

12m ago

pushdry-run · 3 token diffs

1h ago

git-only · CI workflow

design-sync

Git-only design-token sync — tokens live in the repo as the source of truth, no design-tool round-trip to keep in lock-step.

tokens.jsonDTCG v0.7

{
  "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 files + Style Dictionary 4 pipeline. Output CSS variables and JS modules, edited git-only — no design-tool sync round-trip.

541 icons · tree-shakable

@nebutra/icons · Geist source

icons

541 Geist icons as tree-shakable TSX components. Single-weight, optical-sized, drop-in for Vercel / v0 visual parity.

theme

CSS-only multi-theme engine — six oklch presets toggled by data-theme attribute. No JavaScript on the critical path.

runtime CSS vars · @import "@nebutra/tokens/styles.css"

tokens

Runtime CSS variables + ThemeProvider — single source of truth for colors, spacing, radii in every app. @import in your globals.css.

300+ primitives

NewBetaStable

Composable Card

Primitives + GSAP, themed by tokens.

@nebutra/ui · Storybook covered

Primary component library — Nebutra components, custom primitives, layout, theme bridge, and the shared Motion facade. The product UI import boundary.