aesoptutorDesign system
Every colour here comes from a token checked against WCAG 2.2 AA in CI, and against AAA in higher-contrast mode.
Mastery scale
Each tier carries a shape, a filled position and a label as well as a colour, so it reads without colour vision. Luminance moves monotonically across the five, so the progression also survives greyscale.
- Untested
- Taught, not demonstrated
- Developing
- Proficient
- Exam-ready
A topic proven at either of the top two tiers is stamped. Stamps are level, one width, and sit at the right of their row; one pressed as it happens lands with a thump.
Course colours
One per course, in the order the courses were added, so a course can be picked out in any list. Each holds body-text contrast as text on the page, on a card and on its own tint, and the course's name always appears beside it.
- Course 1Tag and tint
- Course 2Tag and tint
- Course 3Tag and tint
- Course 4Tag and tint
- Course 5Tag and tint
- Course 6Tag and tint
- Course 7Tag and tint
- Course 8Tag and tint
Controls
Buttons that act together
Side by side or down a list, they share one width, the longest label's, so they read as a set and nothing shifts when a label changes.
Used to sign in. You can change it later.
Enter a year between 2026 and 2030.
Overlays
One implementation. Both trap focus, close on Escape, restore focus to the control that opened them, and lock the page behind.
Accessibility preferences
Everything defaults to your system setting. The override exists because a shared machine is one where the system setting is not yours to change.