app.css declares a lavender accent; signal-theme.css overrides it to the green→yellow→red ramp and wins by load order, not specificity. So var(--stl-accent) renders green today — check that before using it on a destructive surface (it lit up .stl-btn--danger green once). Anything hardcoding #8b86ff did not follow and is stale by definition.

There is no type scale. Sizes are raw across the codebase — 9, 9.5, 10.5, 11, 12.5, 13, 13.5, 14, 15, 15.5px and 1.25rem, plus eight competing clamp() overrides on .stl-h1 alone. Also: --stl-font-mono is declared and then spelled out inline 30+ times. Use the token.

The full shape, copied from the quiz: a <footer class="stl-quiz__signal"> wrapper, the help line above the buttons (it is the question; the buttons are the answer), and role="group" aria-label="Confidence" on the grid. Help copy is “How sure are you? Picking one locks in your answer.” — its .is-error state swaps in red, and the min-height reserves the room so the swap doesn’t reflow.

Structure is always chip + lbl + sub — three children. The mobile grid places them by name (grid-template-areas: "chip lbl sub"), so dropping __sub silently collapses the mobile row. One shipped exception, pinned by test: the home-page hero demo keeps all three children but suppresses the colour word with .stl-how__art .stl-signal__sub { display:none } — CSS-level, never markup-level. The hero also uses data-demo-signal where the quiz uses data-signal.

Copy the chip. It is a 12px circle filled with currentColor, glowing at 0 0 12px currentColor. All colour flows from the one --green/--yellow/--red modifier. That is the cleanest token usage in the stylesheet.

gap The per-colour hover halos hardcode their rgba() and do not flip in light mode. The click animation has no reduced-motion guard. The transition rule and the @media (hover:none) block are each declared twice.

It reuses the real primitives with scoped overrides: .stl-choice as plain <button>s (states .is-demo-correct / .is-demo-wrong), and the real .stl-signal with data-demo-signal and the colour word suppressed — .stl-how__art .stl-signal__sub { display:none }, pinned by signal-vocabulary.test.js. The card drifts on stlMockFloat, pauses on hover and :focus-within (a pattern worth copying), and has a reduced-motion escape. Three floating pills (.stl-float--g/--y/--r) retire when the verdict shows.

gap Two ID-coupled selectors do component work here (#how-demo-reset, :has(#how-demo-result:not([hidden]))) — same pattern GAPS.md already flags. Every .stl-demo value is now declared twice: base rules mid-file, hero overrides ~250 lines later.

In the live quiz the only state the renderer ever applies is .is-selected; correctness appears in review via [data-state] on the <li>. A third form ships on the home-page hero: .stl-choice on a plain <button> (no radio) with .is-demo-correct / .is-demo-wrong. Three vocabularies for one idea — see GAPS.md.

gap No :focus-visible at all. The component relies on :focus-within with a 2px solid var(--stl-accent-soft) ring — 12%-alpha, effectively invisible. This is the weakest focus indicator in the product. .is-correct also hardcodes #22c55e, a fourth green — the palette is one green per theme, spelled as a token.

Hover, per-tier hover, :active, .is-active, per-tier .is-active, .is-active:hover, :focus-visible, per-tier :focus-visible, :disabled, [aria-disabled], disabled-hover reset, @media (hover:none), view-transition-name. Use this as the bar.

Note the selection signals with colour and fill only — never a heavier edge (decision 2026-08-07: an outset ring reads as a 2px border and, because it paints outside the border box, nudges anything laid out against it).

The fifth tile is Tailored — --tailored, rendered as role="radio" (the four buckets are checkboxes) with data-tier-mode="tailored", deliberately not data-tier. Selected, it takes the rainbow gradient-border treatment; the signal dots it once carried were removed (design call — cleaner without them). When Tailored is on, all four bucket tiles render unselected on purpose.

gap ARIA and CSS are separate code paths: the markup renders aria-checked, the CSS styles .is-active. They can drift silently.

mastery Know it + correct · misconception Know it + wrong · lucky Maybe + correct · gap Maybe + wrong · fluke Don’t know + correct · cold Don’t know + wrong.

drift The same six outcomes render on the same screen in two different palettes — .stl-results__meter-seg--* uses the tokens, .stl-review-tab__dot--* hardcodes #34d399 / #f87171 / #fbbf24. The gap amber (#f59e0b) has no token at all.

gap --sm sets 13px at line 2974; the mobile query at 10184 then sets min-height:44px; font-size:14px on every .stl-btn with no opt-out. So --sm is silently full-size on mobile. (--dev opts out; --sm never did.) Resize this page below 640px to see it.

gap Primary/outline/pill have no :disabled of their own, so the base rule restates an inset white line inside the rainbow border. --icon is referenced in the CSS and never defined. __count is defined twice with incompatible treatments. --danger and --dev hardcode reds that duplicate --stl-red-rgb.

Back navigation is hierarchical, not historical. Every screen declares one parent in SCREEN_PARENT, resolved per click by backTarget(). Labels are written at render time by applyBackLabels() — never hardcode a destination in HTML. One delegated [data-back] handler. Guarded by tests/back-nav.test.js (16 assertions).

A third form exists: --stack (one column, primary first, back beneath) — the only arrangement where the primary leads.

This replaced 29 back affordances across 19 screens using 17 labels, 3 icon systems, 6 positions and 6 visual weights. gap Teacher, admin, learn and the signal trainer were out of scope and are still inconsistent — five back affordances remain app-wide.

gap --hero has a light-theme shadow swap; plain .stl-card does not, so its white inset top-highlight is invisible on a white canvas. Toggle the theme and compare the two above.

The canonical shape is a <label class="stl-field"> wrapping everything — implicit labelling, so no for/id pairing to keep in sync. The label text is a <span class="stl-label">, the hint a <span class="stl-hint">.

gap No :disabled, no ::placeholder, no [aria-invalid] anywhere in the app — the error hint above is not wired to the input. .stl-input:hover sets rgba(255,255,255,.18) with no light override, so the border disappears on hover in light mode — toggle and hover to see it.

fork Admin runs a second, incompatible system (.stl-admin__input, 40px at 13.5px vs ~48px at 1.25rem here) with 72 controls and zero overlap — plus a second label system 1px different from .stl-label.

Styles correctly off [aria-checked] rather than a class — the pattern the tiers and history chips should follow. gap No :hover, no :active, no :disabled, no aria-checked="mixed", and the thumb’s overshoot easing has no reduced-motion escape.

Non-interactive, <span> only. Both data-attribute families have full light-theme overrides — one of very few components that do. drift It is not a generic badge: roughly eight badge/chip families exist, five of them painting the same live / needs-review / unpublished / archived concept in five different palettes.

×6 Six tab implementations exist. .stl-tabbar, .stl-admin__tab and .stl-teacher__tab (dead) are byte-comparable ~55-line copies; .stl-review-tab, .stl-radar__sw-tab and .stl-add-image__tab are pill/segmented. Three of the six signal selection with .is-active instead of aria-selected — half the tab strips in the app are invisible to assistive tech. None has arrow-key roving tabindex. The header comment in app.css already says admin migrates onto this one “later.”

Three buttons, one axis. The forward slot holds exactly one button at a time: “Skip this question” on the newest question, “Next” once you’ve gone back onto an answered one — mutually exclusive because handleSkip() writes a skip at the current index, so offering Skip on an answered question would offer to erase it. Back is always present and merely disabled on question 1, never hidden, so the row cannot change width.

Hover, :focus-visible, :disabled (which also transparently kills the underline), and a reduced-motion escape for the chevron. The most complete state set in the quiz.

gap There are no skeletons. The loading pattern is a veil over a height-reserved container ([aria-busy="true"] { min-height: 220px }) — sound, but implemented twice identically for admin and teacher. --solid is documented in the CSS and never defined. The ring’s conic stops are a fifth palette, including an orange found nowhere else in the product.

A control that costs something wears a lock and opens the upgrade sheet instead of doing its job. Markup declares the capability (data-cap="teacher.send"); one pass (applyLocks()) stamps .is-paylocked from the server’s capability list; one delegated capture-phase handler intercepts the click. Adding a locked button is one attribute.

It is not a disabled button. No reduced opacity, no muted fill, no pointer-events: none, never the disabled attribute — a locked primary keeps its full weight, because it still does something when you click it. “You cannot do this” and “this costs money” are different messages and only one is true. The glyph takes currentColor at reduced emphasis, so no fourth meaning joins green/yellow/red (Rule 1), and it is an inline child, so nothing shifts (the 2026-08-07 ring rule). The price reaches a screen reader through an .sr-only suffix inside the button’s own accessible name.

The class is .is-paylocked, not .is-locked — that one was already taken by the quiz grid-in input, where it means “answer committed”.

gap The app’s only transient feedback channel, and it has one variant — so 'Note save failed (HTTP 500)' and 'Link copied' render identically. No tones, no icon, no stacking, no dismiss, no undo, no reduced-motion guard.

Share-sheet anatomy (2026-08-26): circled stroke icon over a wrapping caption, five-up even row. Hover is colour/fill only (§5.7); the borderless button carries its own :focus-visible ring (last item shows :disabled). Captions are the accessible names — icon-only was rejected on purpose.

gap No :focus-visible — and the component explicitly strips outline-adjacent native chrome while being applied to real <button> elements in six places. Keyboard users get nothing. Tab to the buttons above.