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: 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
Brand primitives — color definitions, gradient tokens, motion language. Source data; not imported at runtime by apps.
Exploredesign-sync
Provider-agnostic design-tool sync — Figma, Penpot, or git-only. Pulls design-tool tokens to repo and pushes repo to design tool, safely dry-run by default.
Explore{
"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 files + Style Dictionary 4 pipeline. Output CSS variables, JS modules, Figma sync feeds.
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.
ExplorePrimitives + framer-motion, themed by tokens.
ui
Primary component library — Lobe UI re-exports + custom primitives + layout + framer-motion. The one place to import from.
Explore