Artefacts

The core problem is that the whole control's meaning lives in one channel: colour. Grey → green is the *only* thing that tells someone the lesson is done, and colour is the least reliable channel there is — it's the one thing that gets flattened by a washed-out classroom projector, a colour-vision difference, or a colour-safe theme. If someone can't distinguish that particular grey from that particular green, this control communicates nothing. That's not a nice-to-have fix, it's the control failing at the one job it has.

Walking through it properly:

**What's it for, and is the signal legible?** It's a completion status. The only person who reliably reads "complete" here is someone with full colour vision, in good lighting, looking at a screen with accurate colour rendering. Pair the colour change with something else — an icon that appears (a check mark), the label text itself changing ("Mark complete" → "Completed"), or a position/fill change — so the state is carried by shape or text and colour is reinforcement, not the message.

**Does it declare and confirm itself as touchable?** This is the question the spec doesn't answer, and it needs to before anything else here is right. If tapping the pill is what marks the lesson complete, it's an interactive control, and at 32px tall it's well under the ≥44px hit-area floor — a pill that looks small and precise but responds (or should respond) to a sloppy thumb-tap is a common defect, and this one invites it. It also isn't described as carrying any interactive signature — no border, shadow, or press behaviour — so as written it doesn't declare itself as a button at all; it reads as a passive status chip. If it's actually passive (something else marks the lesson complete and this just reflects that), 32px is a reasonable badge height, but then don't dress it up with anything hover- or press-like, because that would promise an action that isn't there. Which is it? That decision changes the sizing requirement, not just the styling.

**Is 11px an invented value?** Almost certainly. Take the type scale from the system rather than picking a pixel number that felt right for the space available — a label that has to shrink to 11px to fit inside a 32px pill is usually a sign the container is too small for the content, not that 11px is a legitimate scale step. If the system's smallest body step doesn't go that low (and it's unlikely to, given how the scale is meant to stay usable in a classroom), the fix is to widen the pill or shorten the label, not to mint a new size.

**Is 600ms an invented duration?** Yes — the system's motion vocabulary runs 120/200ms, and 600ms is three to five times that. A colour change on state transition is a legitimate use of motion (it explains a change that would otherwise look like it happened for no reason), so keep the animation, but pull the duration from the system rather than a number that seemed to "feel nice." As a secondary point: because the state is currently colour-only, this animation is also being asked to carry meaning that a 600ms colour fade can't reliably deliver on its own — once you add the icon or text, the motion becomes a supporting detail on a change that's already legible, rather than the only clue something happened.

**Does it survive the other palette themes?** As specified, no. "Grey means not-done, green means done" is a hue relationship, and that's exactly the pattern that dies in the colour-safe theme and gets flattened in high-contrast — those are peers, not fallbacks, so a design that only works in light/dark isn't finished. Once the state is carried by an icon or label change, colour becomes decorative reinforcement and the control holds across all five theme selections without further patching.

**Anything to remove?** No — if anything, this control is currently under-built, not over-built. The fix here is additive (an icon or text change to carry the state), not subtractive.

To summarise the fix list: add a non-colour signal for the state (icon or label text change, your call which reads better at this size), confirm whether it's tappable and size it to 44px if so (or strip any pressed/hover affordance if it's genuinely passive), pull the label size from the system's type scale rather than 11px, and pull the transition duration from the system's 120/200ms rather than 600ms.