One design language. 2D and 3D.
Define colors, typography, spacing, and components once — then apply them consistently across every 2D screen and every 3D spatial interface you build.
Design tokens
Author color palettes, type scales, spacing steps, shadows, and radii in a visual editor. Every token syncs to CSS variables, JSON, and Figma automatically.
2D component library
A fully themed set of buttons, inputs, cards, modals, and data display components that consume your tokens and stay consistent across every screen.
3D UI elements
Panels, spatial menus, HUD labels, and XR buttons built natively for 3D scenes. They inherit the same token system as your 2D components.
Multi-theme support
Maintain multiple named themes — brand, marketing, dashboard — and switch between them at runtime with a single token set swap.
Consistent everywhere
Change a token once and every 2D screen and 3D spatial element that references it updates instantly — no hunting for hard-coded values.
Dark mode built in
Every component automatically supports light and dark mode through semantic tokens. No extra variants, no duplication.
One source of truth for every visual decision
Define your brand's colors, typography, and spacing in the token editor and they flow everywhere — 2D components, 3D UI elements, exported CSS, and TypeScript types — automatically.
Open token editor2D and 3D components, the same design language
Browse a production-ready library of 2D UI components (buttons, inputs, cards, dialogs) and 3D spatial elements (panels, XR menus, HUD labels). Every component consumes your design tokens so a single theme change ripples through the whole product.
Explore componentsOne theme change. Every element updates.
Select a named theme and watch every 2D button, card, and input — and every 3D panel, HUD label, and XR button — instantly reflect the new look. Because both dimensions draw from the same token set, your entire product stays visually consistent with zero manual work.
Try theme switcher