Design System Supply Chain
theme
CSS-only multi-theme engine — six oklch presets toggled by data-theme attribute. No JavaScript on the critical path.
In code
theme.tsx
1import { ThemeProvider } from "@nebutra/tokens";
2
3export function RootLayout({ children }: { children: React.ReactNode }) {
4 return (
5 <html suppressHydrationWarning>
6 <body>
7 <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
8 {children}
9 </ThemeProvider>
10 </body>
11 </html>
12 );
13}More in nebutra.com
- brandBrand primitives — color definitions, gradient tokens, motion language. Source data; not imported at runtime by apps.
- design-syncGit-only design-token sync — tokens live in the repo as the source of truth, no design-tool round-trip to keep in lock-step.
- 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.
- tokensRuntime CSS variables + ThemeProvider — single source of truth for colors, spacing, radii in every app. @import in your globals.css.