Design System Supply Chain
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.
DTCG JSON
git
@nebutra/tokens
pull1.2s · 47 tokens re-read
12m agopushdry-run · 3 token diffs
1h agogit-only · CI workflow
In code
design-sync.ts
1import { getDesignSync } from "@nebutra/design-sync";
2
3// Auto-detects git-only / design-md from env.
4const sync = await getDesignSync();
5
6await sync.healthcheck();
7await sync.pull(); // re-read DTCG token files (git is the source)
8await sync.push({ dryRun: true }); // validate + reformat in place (dry-run safe)More in nebutra.com
- brandBrand primitives — color definitions, gradient tokens, motion language. Source data; not imported at runtime by apps.
- design-tokensW3C DTCG $value/$type token files + Style Dictionary 4 pipeline. Output CSS variables and JS modules, edited git-only — no design-tool sync round-trip.
- fontsSelf-hosted open-source fonts: the Chinese body face every app loads, plus a registry of 19 faces that themes and DESIGN.md files can name — no request leaves for a font CDN.
- icons541 Geist icons as tree-shakable TSX components. Single-weight, optical-sized, drop-in for Vercel / v0 visual parity.
- themeCSS-only multi-theme engine — six oklch presets toggled by data-theme attribute. No JavaScript on the critical path.
- tokensRuntime CSS variables + ThemeProvider — single source of truth for colors, spacing, radii in every app. @import in your globals.css.