Products
Every Nuton product is designed here first, front end and UI only, before it goes live. Each page is a real screen built from the tokens and components, reviewed on every viewport, role and state.
Product areas
Open a product to see its pages. Counts update with every build.
Website
WebThe public site: landing page, pricing, sign up and sign in.
0 of 3 pages designed
OpenLearner
WebCourses, spaces, the AI Tutor and study tools for university and adult learners.
0 of 16 pages designed
OpenNuton for secondary-school students. Not started; its pages come next.
0 of 1 page designed
OpenTeacher
WebTools for teachers: classes, course creation and progress.
0 of 1 page designed
OpenAdmin
WebThe admin console for people, content and operations.
0 of 1 page designed
OpenMobile app
Native appThe native app for iOS and Android, on phone and tablet.
0 of 13 pages designed
Open
Design status
Pages that aren't designed yet exist as placeholders showing only their title, so navigation is always complete. Their status shows in the review bar and here, never in the screen.
| Product | Designed | Not designed | Progress |
|---|---|---|---|
| Website | 0 | 3 | |
| Learner | 0 | 16 | |
| Learner (Secondary) | 0 | 1 | |
| Teacher | 0 | 1 | |
| Admin | 0 | 1 | |
| Mobile app | 0 | 13 | |
| All products | 0 | 35 |
Reviewing a page
The dark bar at the top of every product page is the only place review controls live. It isn't part of the product.
| Control | What it does |
|---|---|
| Pages ⌘K | Searchable index of every product page. |
| Where you are | Product, page title and status: Designed, In review or Not designed yet. |
| Web ↔ App | Jumps to the matching screen in the other platform, when one exists. |
| Viewport | Web: Desktop, Tablet (834 × 1112) and Mobile web (390 × 844). App: Phone (390 × 844) and Tablet (1180 × 820). Screens respond to the frame, not the window. |
| Role | A fictional person per role. Pages a role can't open show a “no access” view. |
| State | Ready, Loading, Empty, Error, Offline, only the states the page declares. Undeclared states use shared default views. |
| Scenario | Page-specific variants, such as “Free plan limit reached”. |
| LTR · RTL | Text direction of the screen. The bar stays left-to-right. |
| Copy link | Copies a link that opens exactly this view. |
| Reset | Forgets the saved review settings and reloads. |
Viewport, role and direction are remembered in this browser; state and scenario always start at the first option. Every setting can go in the address, for example ?device=mobile&role=learner-pro&state=empty&dir=rtl. The product screens follow the toggle in this bar (Light, System or Dark); the dark colours are code-only until Figma has them (D8, C69). The website is light only.
Adding a page
A page is a screen component plus one entry in the product register.
- Find the page in
apps/docs/products/registry.ts, or add it: id, title, section, status, the states it designs, the roles that can open it, any scenarios and its web or app counterpart. - Create
apps/docs/products/screens/<product>/<Page>.tsx. It renders the whole screen, including the product's shell, using only@nuton/uicomponents and--nu-*tokens. Read the role, state and scenario withuseReview(). - Register it in
products/screens/index.tsand set its status todesigned. - Review it on every viewport, role, state and direction before marking it designed.
Rules for screens
- Product UI only: no design notes, “sample” badges or explanations in a screen. Those live on these docs pages.
- Fictional content and people only. No real learners, teachers, schools or records.
- Tokens and components only, so a future dark theme needs no page fixes. Text meets WCAG 2.2 AA.
- Layouts respond to their container (container queries), never to the window.
- Everything clickable does something; nothing scrolls sideways at 390px.