Every value here comes from design-tokens/tokens.json through src/styles/theme.css. Components are shadcn/ui, customised only through their own variants, plus Ladder components in src/components/ladder.
Semantic variables in shadcn naming. Switch the theme in the header to check Dark.
--background--card--muted--foreground--muted-foreground--subtle-foreground--border--input--primary--selected--success--success-soft--warning--warning-soft--danger--danger-soft--info--info-soft--streak--mark--ringLexend for interface text. Atkinson Hyperlegible Next for passages, questions and answers.
Display 40/48
Heading 1 32/40
Heading 2 24/32
Heading 3 20/28
Title 18/26
Label 14/20
Caption 13/18
Reading 18/30 — When Mia Torres was fourteen, her school had a small piece of empty land behind the sports hall.
Question 17/26 — Why did Mia want to start a garden?
One primary button per view. Height 44px (size-target).
C2 Proficiency
7 parts53 questions90 min
Hover or focus Learning Path and Practice Tests for the panels. Counts come from the catalogue.
Inline SVG built from level tokens. Shapes differ per level, not only colours. Entrance motion respects reduced-motion settings.
Every route has a loading.tsx that mirrors its layout, plus a 2px progress bar at the top of the viewport.
The live bar is LoadingBar, fixed to the top edge during navigation.
States differ in shape and words, not only colour.
Test mode counts a play when the recording ends and hides seek and speed. Practice mode allows both. Sources: storage file, YouTube, Google Drive, browser voice.
One renderer per kind, shared by the test room, Review Answers and the admin preview. Writing and speaking are marked by a teacher.
true_false
picture_choice
matching
gap_fill with word bank
open_cloze and word_formation inline in the text
Last spring we took in a charity run and RAISE more than £300.
key_word_transformation
writing
speaking