WorkBefore/after case study
designesy.org · D to A
The publisher scores itself, fixes the gaps, and publishes the grade.
The same /api/score engine that grades every other site graded designesy.org. The result was a D — 9 failures, 2 warnings, 3 skips. The fixes were real: token discipline, focus-visible rings, reduced-motion tiering, Cadence typography rules, and the static halves of the Poise/Takt checks. The score is now A, verified on the same terms as everyone else’s.
Summary
Outcome · A · 96.3
designesy.org was scored by its own engine and got a D. The failures were concentrated in four areas: token discipline (raw hex, magic numbers), keyboard affordance (no focus-visible rings), reduced-motion handling (a kill switch rather than tiered), and Cadence typography (no text-wrap, no tabular-nums, no font-synthesis guards). One session resolved all 9 failures and 2 warnings, plus converted 3 SKIPs to PASSes by implementing the static contract-diff halves. The score moved from D 67.4 to A 96.3 — a 28.9-point gain in a single working session.
Score delta
Before · D · 67.4
12 pass · 9 fail · 2 warn · 3 skip
After · A · 96.3
23 pass · 0 fail · 0 warn · 3 skip
+11 pass · -9 fail · -2 warn · skip unchanged (browser-only checks, honestly labeled).
Checks that moved
Every check that changed status between the before and after score. The fix that moved each one is documented in the corrections section.
Token values match live site :root foundation
FAIL → PASS
focus-visible present on all interactive elements
FAIL → PASS
Reduced-motion tiering (Tier 1/2/3) not a kill switch
FAIL → PASS
No raw hex colors in component CSS
FAIL → PASS
Cadence typography contract-diff
SKIP → PASS
text-wrap: balance + pretty both present
WARN → PASS
tabular-nums: 8 instances across the live CSS
SKIP → PASS
Poise interaction rules match live /labs/poise
SKIP → PASS
Poise keyboard-path published
SKIP → PASS
Takt rules match CSS
SKIP → PASS
Corrections
The fix
Replaced raw hex values with contract tokens across component CSS. Added focus-visible rings on every interactive element, tiered reduced-motion (Tier 1 remove, Tier 2 soften ≤200ms, Tier 3 keep — never a kill switch). Implemented the Cadence typography rules: text-wrap balance + pretty, tabular-nums in numeric contexts, font-synthesis guards, skip-ink on underlines. Shipped the static contract-diff halves of the Poise interaction, Poise keyboard-path, and Takt feel checks — converting 3 SKIPs to PASSes without a browser path.
Lessons
What is still open
Honest skips
Three checks remain SKIP: v02 (responsive overflow at 4 viewports), v04 (sound toggle aria-pressed flip), and v21 (Core Web Vitals). All three need a browser path. The audit endpoint at /api/score/audit returns honest SKIPs with diagnostic strings until ENABLE_BROWSER_AUDIT=1 and PSI_API_KEY are set on the deployment. They are not hidden — they are unrun, and labeled as such.