Phase 1 · Components in Beta
The building blocks of Nuton
Tokens, components and guidance for Nuton's learner and teacher products. Designed in Figma, recorded in Git, generated into code, and accessible by default.
Biology 101
Photosynthesis
SWATEW+31
- 12 lessons
- 34 students
- 6 h content
- Lessons completed
- Quizzes taken
Invite a teacher
They’ll get a link to join this space.
How it works
Figma authors
Design decisions live in the Nuton Figma file. Code follows its measured geometry, and differences are recorded, never silent.
Tokens, not raw values
Every colour, size and shadow is a --nu-* token generated from a hashed Figma snapshot. A lint rule blocks raw values.
Accessible by default
WCAG 2.2 AA is built in: keyboard support, focus handling and labelling, checked with axe in tests and in a real browser.
One implementation
This site renders the real @nuton/ui package. There are no docs-only copies of components.