MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-3874

8.3.18 The `/design` design asset predates the package it draws — both mocks inline 0.1.0's dark accent ink, and the current-page nav treatment is justified by a 4.41:1 that is now 5.76:1 (motir-marketing)

Done
Description

Type: design · Parent: MOTIR-656 8.3 (the EDGE test: this card blocks MOTIR-1043, a not-done card in the finding story) · Discovered in: MOTIR-3872, while publishing @motir/design-system@0.1.1 and bumping this repository's pin.

Root cause

design/marketing/landing.mock.html and design/marketing/design-showcase.mock.html are self-contained mocks: they inline the resolved --el-* values rather than importing the package, which is what makes them renderable on their own. They were drawn against @motir/design-system@0.1.0. MOTIR-3872 published 0.1.1 and re-pinned this repository to it, so the inlined copies now predate the package the site actually paints from.

Two consequences, and the second is the costly one.

  1. A stale VALUE. Both mocks declare, in their [data-theme='dark'] block:

    --el-accent-on-surface: #7b6ce5;
    

    landing.mock.html:135, design-showcase.mock.html:116. Measured off <html> in headless chromium against the INSTALLED package, motir palette, dark: 0.1.0 painted rgb(123, 108, 229) (= #7b6ce5, the value above); 0.1.1 paints color(srgb 0.567059 0.519529 0.910039)MOTIR-3745's color-mix() lift. Every dark element the mocks draw in that ink is now the wrong colour. The LIGHT value is unaffected (rgb(86, 69, 212) on both versions), which is why this is easy to miss by eye.

  2. A stale DECISION, justified by a number that has flipped. design-showcase.mock.html:325-333 carries, as a block comment on .nav a[aria-current='page']:

    NEVER --el-accent-on-surface as TEXT here: 4.41:1 in dark, under AA (MOTIR-3745).

    and the panel's own caption repeats it as rejected: --el-accent-on-surface as text 4.41:1. design-notes.md states the same. On 0.1.1 that pair measures 5.76:1 and passes AA — same probe, same surface (--el-surface-soft), same palette, same theme. The site's first current-page nav treatment (weight + a --el-accent rule, colour deliberately withheld) was chosen because the accent ink failed; the premise is gone.

    This is the design-decision-on-stale-reality shape, not a typo: the drawn pixels can be re-derived mechanically, but whether the current-page item should now carry the accent as text is a design act, and it is not MOTIR-3872's to take.

Measurement

Headless chromium, getComputedStyle read off REAL elements (color / background-color), never the var() chain, so color-mix() is resolved by the browser. --el-accent-on-surface on --el-surface-soft, dark, motir:

installed packagecontrastAA (4.5:1)
@motir/design-system@0.1.04.41fail
@motir/design-system@0.1.15.76pass

⚠️ A contrast harness that cannot parse color() reports this backwards. The fixed ink computes to color(srgb 0.567 0.520 0.910); a parser reading those 0–1 floats as 0–255 calls the FIXED theme catastrophically broken. MOTIR-3872 recorded the same trap.

Scope BOUNDARY

  • Not the site. motir.co already paints 0.1.1 correctly (MOTIR-3872, 0/10 fail on both arms). This card is about the ASSET only.
  • Not a re-measure of the asset's other records. design-notes.md states several counts "as installed" against 0.1.0 (68 barrel exports; 23 / 107 / 9 block counts). Those are HISTORICAL measurements of a version that existed; re-stating them as 0.1.1 without re-taking them would assert a measurement nobody made. Either re-measure and date them, or leave them and say which version they were taken on — do not silently renumber.
  • Not MOTIR-1043's build. This card ships design files. No route, no component.

Acceptance criteria

  • Both mocks' dark --el-accent-on-surface (and any other --el-* whose resolved value moved between 0.1.0 and 0.1.1) match the INSTALLED @motir/design-system@0.1.1, measured — not eyeballed — with the probe above, and the command that produced each number is quoted in design-notes.md.
  • The current-page nav treatment is RE-DECIDED on the new number and the decision is stated: either it keeps the weight + rule form (and the comment's rationale is rewritten so it no longer rests on the retired 4.41:1), or it adopts the accent ink with its measured contrast recorded. A comment that still cites 4.41:1 as a live reason fails this criterion.
  • design-showcase.mock.html's panel caption and design-notes.md carry no surviving claim that --el-accent-on-surface as text fails AA in dark on the pinned version.
  • Both .png exports are regenerated from the edited mocks (same basename, fullPage), so the three-file asset set stays internally consistent.
  • design-notes.md's Planning flags entry 1 — which MOTIR-3872 rewrote to point here — is closed out with what was decided.
  • pnpm format:check passes.

Context refs

  • motir-marketing design/marketing/design-showcase.mock.html (:116 the token, :325-333 the rationale comment, the panel-3 caption) · design/marketing/landing.mock.html (:135) · design/marketing/design-notes.md (Planning flags 1, and the Read the INSTALLED package note)
  • MOTIR-3872 — the publish + pin bump that falsified the asset, and the harness method
  • MOTIR-3745 — the dark accent-ink lift the mocks predate
  • MOTIR-3861 — the design pass that authored the asset