# Nana Chon

- **Event:** [Built with Opus 4.7: a Claude Code hackathon](https://cerebralvalley.ai/e/built-with-4-7-hackathon)
- **When:** Apr 21 at 12:00 PM – Apr 27 at 2:00 AM (EDT)
- **Where:** Online
- **Team:** [nana chon](https://cerebralvalley.ai/u/nana)
- **GitHub:** https://github.com/nanacodesign/nanaOS-design-system
- **Demo video:** https://youtu.be/22gV_Fnh5Os
- **Gallery:** https://cerebralvalley.ai/e/built-with-4-7-hackathon/hackathon/gallery
- **Page:** https://cerebralvalley.ai/e/built-with-4-7-hackathon/hackathon/gallery/282

nanaOS is an AI-native design system where code and contracts are the single source of truth.

Instead of splitting design intent across Figma, code, documentation, and Storybook, nanaOS turns tokens, semantics, accessibility rules, component states, and system architecture into explicit contracts that both humans and AI agents can read and evolve.

The project uses a 5-layer architecture: primitives, semantics, rules, components, and patterns. Each component ships with SCSS, tokens, a JSON contract, and a canonical example. This means an AI agent can generate a new component, validate it against design-system rules, and update the catalog without guessing from screenshots or vague style prompts.

The larger vision is a design tool for what comes after canvas-first workflows: a system where designers control intent visually, while AI agents consume structured W3C Design Tokens, JSON contracts, and enforceable rules to build consistently.

---

Markdown version of https://cerebralvalley.ai/e/built-with-4-7-hackathon/hackathon/gallery/282. Site index for agents: https://cerebralvalley.ai/llms.txt · full text: https://cerebralvalley.ai/llms-full.txt