AI-native design system that remembers why.
Explore real nanaOS components and patterns below. Open any card to configure its rendered Viewport, Prompt for AI, and React code using the same public contract a product installs.
Playground
Single source of truth for humans and agents.
Design system principles
- Consistency
- Scalable
- Maintainable
- DRY (Don't Repeat Yourself)
- Agent-friendly
- Catalogfor people
- Contractsfor agents
- CSS + Web Componentsworks anywhere
- Reacttyped props
- Agent gatewaymachine-readable
Consistency
One intent keeps one semantic name across themes, design, components, and product UI.
Scalable
Measured primitives and stable semantic aliases grow without re-ranking the system.
Maintainable
Every decision has one owned source, with generated surfaces derived from it.
DRY
Tokens, recipes, contracts, previews, and adapters are reused or generated instead of copied.
Agent-friendly
Public contracts and semantic APIs make intent legible to people and agents without reverse-engineering pixels.
Start clean or migrate with evidence.
The package now carries the runtime, full prop contracts, framework adapters, migration report, and strict consumer audit needed to keep unsupported UI out of a product.
Install one package
Runtime CSS, adapters, contracts, patterns, fonts, icons, and the CLI share one version.
Choose one runtime
React apps use generated client adapters. Other stacks register the same n-* Web Components.
Theme through semantics
Product identity enters through the nanaos.product layer without forking component CSS.
Gate every migration
Strict audits turn unsupported UI into file-and-line remediation instead of visual guesswork.
Beautiful enough to explore. Explicit enough to migrate.
nanaOS turns design intent into an installable, testable operating system for product UI.