design surface
Brand, tokens, icons, theme, and UI system packages
- Stability
- Stable
- Scope
- Global
- Boundary
- packages/design
Aa Heading
Body copy renders the rhythm.
Small body for secondary context.
Caption · the smallest step
Tokens shipped
242
Components
27
Coverage
93%
Sync status
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
Brand primitives — color definitions, gradient tokens, motion language. Source data; not imported at runtime by apps.
Exploredesign-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.
Explore{
"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.
Explorefonts
fonts — focused capability inside the design system domain, boundary at packages/design/fonts.
Exploreicons
541 Geist icons as tree-shakable TSX components. Single-weight, optical-sized, drop-in for Vercel / v0 visual parity.
Exploretheme
CSS-only multi-theme engine — six oklch presets toggled by data-theme attribute. No JavaScript on the critical path.
Exploretokens
Runtime CSS variables + ThemeProvider — single source of truth for colors, spacing, radii in every app. @import in your globals.css.
Exploretypelens-catalog
typelens-catalog — focused capability inside the design system domain, boundary at packages/design/typelens-catalog.
ExplorePrimitives + GSAP, themed by tokens.
ui
Primary component library — Nebutra components, custom primitives, layout, theme bridge, and the shared Motion facade. The product UI import boundary.
Explore