file://.
Run serve.cmd (Windows) or ./serve.sh (macOS / Linux)
from this folder to see them working.
Design system · v1
A measuring instrument,
in daylight.
This product spends almost all of its time in warm near-white and near-black, and introduces colour only where something is being measured — a score, a level, a live voice. That restraint is the whole argument: an assessment that shouts is an assessment you do not believe.
Foundation
Colour
One accent carries every action. A second hue exists purely inside visualisations and is never a button. Petrol against warm sand is also one of the few two-hue pairs that survives every common form of colour blindness — which matters when those two hues are carrying somebody's score.
Structural
Ground & ink
Visualisation & state
Typography
System-first, deliberately: this platform runs in test centres that may have no internet, and a render-blocking webfont on an exam page is a risk taken for no gain. Every stack ships a real Light cut, which is all the display tier needs. Tracking tightens as size grows — that ratio is the signature.
Know exactly where you stand
Twenty minutes. Forty answers.
Repeat the sentence
Answer a question about a conversation
Every answer is spoken aloud and scored automatically.
Prompts play once. There is no replay, no going back and no re-recording — each item ends when you stop speaking, not on a timer.
Supporting copy and metadata
Part C · Question 2 of 6
00:15 68 40/40
Space & shape
A 4px base. Whitespace is the primary grouping device — sections are separated by distance, not by rules.
Scale
Radius
Material
Depth
Many near-transparent layers, never one hard cast. Every shadow is tinted with the ink hue rather than pure black — a neutral shadow on a warm canvas reads as dirt.
Glass
Real glass is four things at once: a gradient fill, because light falls unevenly across a pane; a blur that also saturates, because glass concentrates the colour behind it rather than washing it out; a specular top edge; and a contact shadow so it sits in the scene. Drop any one and it reads as a filter.
Demonstrated over a coloured field on purpose — glass over flat white proves nothing.
Glass · elevated content
.glass — the default pane. Blur 18px, saturate 180%.
.glass--elevated · score surface
Controls
Buttons
Pill geometry throughout, 44px minimum everywhere. The press is a 2.5% squash rather than a colour jump — physical response is felt more than it is seen.
Fields
Tight radii, deliberately — a pill-shaped input reads as a search box.
Chips & notices
Signature
The voice field
A circle whose radius is perturbed by three summed harmonics, drawn three times at different phases. Amplitude scales the deformation, never the base radius — the form keeps its identity however loudly somebody speaks.
An equaliser would be a literal readout of an FFT, and it lies: bar heights have nothing to do with whether an answer will score. What a candidate needs to know is simpler — is it hearing me. One form answers exactly that.
Simulated amplitude. In the product this is fed from the analyser the assessment already owns — a second AudioContext for a decoration would be a real cost.
States
| Idle | Almost invisible. No animation loop at all. |
| Listening | Gentle drift. The prompt is playing. |
| Recording | Follows the voice. The innermost ring turns live-coloured. |
| Processing | A sweep on the same form — one object changing behaviour. |
| Complete | Settles to a clean circle and stops. |
The live state is never signalled by motion alone, and never by colour alone: the innermost ring changes colour, a badge appears, and the badge carries the word.
The score dial
A donut implies a whole being divided up. This score is not a proportion of anything — it is a position on a 20–80 scale. An open arc with its CEFR boundaries marked says that, and turns a chart into a measuring face.
Supporting measures
Progress, time, transport
Segments rather than a creeping bar — the unit that matters is questions left, and a bar that creeps encourages clock-watching.
Part B · Question 5 of 16
Tabular figures so digits do not shuffle. The low state changes colour and keeps its label.
The inverted ground
One dark band, not a dark theme. Any subtree gets it with data-invert; components read semantic tokens, so none of them need a dark variant — the ground changes underneath them.
Recording
Retell the story you just heard.
The focus surface during a live answer: everything that is not the candidate's own voice recedes.
Rules
Do
- Reserve the accent for actions, links and the focus ring. Nothing decorative.
- Keep the page on the warm canvas and put white only under content.
- Let space do the grouping. Reach for a card only when grouping genuinely aids comprehension.
- Give glass something to refract — it belongs over content, over a camera, over colour.
- Use tabular figures for anything that counts: scores, timers, item counts.
- Pair every state colour with a word or a shape. Colour is never the only signal.
- Let motion communicate arrival and departure, then stop.
Don't
- Don't paint a control in the sand hue — it exists for visualisation only.
- Don't put glass on a flat white ground; with nothing behind it, it is just a grey box.
- Don't set body copy at weight 300. Light belongs to display sizes only.
- Don't use a pill radius on a form field.
- Don't add a second structural accent.
- Don't animate anything during a live recording — motion in the corner of the eye costs a candidate their answer.
- Don't rely on a shadow to create depth that light, scale and transparency can create instead.