Migrates the legacy site header and footer from hardcoded SCSS colors to DSCO semantic tokens, following the established [Rebrand] in-place tokenization pattern (exemplar: PhoneFrame, #73055). The chrome now responds to the brand router: unchanged (modulo the documented drift below) under the default codeai brand, CADS colors (purple #4c42cf bar, near-black footer) under codeai-next, and pink under codeai-audit — which is the point: the header/footer were among the last audit-opaque surfaces.

Tokenization

One commit per surface, each carrying its full hex-mapping table in the commit message: header + user menu + hamburger (fdf92c79f72), full footer (28738f2184e), LessonProgress vignette gradient (6ea14067e00). Color-value swaps only — zero selector, markup, or layout changes, so the UI-test selector contract (#header_user_menu, .headerlinks, #hamburger-icon, …) is untouched.

Headline exact mappings (no default-brand pixel change): header bar $contrastTealHeader #00818f → --background-brand-teal-primary, footer $darkest_gray #292F36 → --background-neutral-primary-inverse, all whites → --text-neutral-white-fixed / --background-neutral-primary, menu text #292F36 → --text-neutral-primary.

Documented nearest-token drift on the default brand (per-commit tables have the full list):

New token: --borders-neutral-white-fixed

Design ruled the white-fixed family should be complete across background/text/borders, so the border member is added through the whole bridge (7840c22d255): legacy colors.css (light+dark), canonical colors_codeAi.css + regenerated brandCodeAiNext.css (generator --check green), brandLegacyShim.css, brandCodeAiNextAliases.css, and brandCodeAiAudit.css (pinked #fff8fc, matching siblings). The header buttons' white borders adopt it.

⚠️ Follow-up for design: colors_codeAi.css is a CADS Sandbox export ("do not hand-edit"). The token must also be added to the sandbox source, or the next re-export silently drops it — the generator --check would still pass and only codeai-next would lose the header-button borders (default and audit resolve via other files).

Design rulings applied

The accent-orange header-link/button hovers are deliberately NOT tokenized (de0aff56fb3) — design says that hover does not carry over to the new brand (a marketing-style hover replaces it in the nav redesign), so painting it CADS orange under codeai-next would be wrong. The two sites keep $orange with an explanatory comment and will honestly show non-pink under audit. The small footer (light and dark share variants) is out of scope entirely — no mockup exists; its hexes are untouched, so all footer.feature Eyes baselines stay green. Levelbuilder/local env header colors and shared/css/color.scss are also untouched (note: $header_text in color.scss is now orphaned — its last four consumers were tokenized here; left in place since the shared palette file was fenced off).

Bug fix: left vignette gradient

headerVignetteLeft's gradient string had been missing its closing paren since 2020 (68b79ff4565), so the CSSOM dropped it and the left-edge fade never rendered in the left-anchored scroll state. Fixed (d98d5b6213e) — the left edge now fades like the right edge always has. This is the branch's only behavior change; an Eyes baseline capturing that scroll state would need a one-time re-accept.

Token resolution per brand

flowchart LR
    A["var(--background-brand-teal-primary)<br/>in application.scss"] --> B{data-brand}
    B -->|"code / codeai"| C["colors.css<br/>brand-teal-60 = #00818f<br/>(pixel-identical)"]
    B -->|"codeai-next"| D["brandCodeAiNextAliases.css<br/>→ brandCodeAiNext.css<br/>brand-purple-50 = #4c42cf"]
    B -->|"codeai-audit"| E["brandCodeAiAudit.css<br/>pink"]

Screenshots

Links

• Jira: n/a
• Exemplar migration: [Rebrand] SL-1904: Migrate PhoneFrame colors to DSCO semantic tokens #73055
• Design rulings (2026-07-20): add white-fixed border token; shadows on alpha primitives until CADS elevation tokens land; orange hover does not carry over; teacher keeps the create menu; hamburger preserved as-is

Testing story

./tools/hooks/pre-commit green after every commit batch. generateBrandCodeAiNext.mjs --check green (also the package's npm test). yarn typecheck shows pre-existing errors only (missing generated build artifacts, unrelated). Header unit-test run blocked by the known missing-yarn build locale-artifact issue — the change is CSS-only, lint + generator check are the material gates. Manual browser matrix on local dev (level page, project page, signed-out home): default brand pixel-stable except the documented drift; ?brand=codeai-next renders the purple bar / near-black footer; ?brand=codeai-audit renders the migrated chrome pink. An xhigh multi-agent code review (10 finder angles + adversarial verification) ran over the branch; all confirmed findings are addressed in commits or documented above.

Eyes impact: footer.feature baselines are all small-footer snapshots — untouched. Page-level snapshots containing a signed-in header may show the .header_user chip drift (#0093a4 → #00818f) and need re-accepts.

🤖 Generated with Claude Code