src/shared/tokens.css lands as the canonical token system — engineering
working copy of .planning/intel/design-incoming/system/bundle/mokosh-handoff/
tokens.css with three surgical edits per Plan 01-12:
1. Handoff's PREVIEW-ONLY Google Fonts @import (line 12) REMOVED +
replaced with 8 local @font-face rules pointing at ./fonts/*.woff2
(Lora normal + italic variable; Plex Sans Regular/Medium/SemiBold/Bold;
Plex Mono Regular/Medium). MV3 CSP self-host enforced
(style-src 'self' + font-src 'self').
2. --mks-font-display VALUE substituted from "Newsreader" to "Lora" per
R2 designer reply 2026-05-19 (Cyrillic coverage; brand-decisions-v1-
followup-display-font.md). The Lora foundry note is preserved in the
Type-section comment. ZERO Newsreader references remain anywhere in
the file (verified by grep).
3. .mks-word class added at end-of-file with the {font-family,font-size,
font-weight,letter-spacing,fill} declarations from the lockup SVG's
class="mks-word" usage. Required by mokosh-lockup.svg line 21 per
RESEARCH §8.
src/shared/brand/ engineering working copies of:
- mokosh-mark.svg (Loom 2×2 weave intersection at 32×32 viewBox)
- mokosh-lockup.svg (mark + Mokosh wordmark at 240×56 viewBox)
The intel/ design-incoming/ copies remain unchanged as the original
handoff source-of-truth.
Verification:
- googleapis count: 0 (MV3 CSP self-host invariant)
- Newsreader count: 0 (R2 substitution complete)
- @font-face count: 8 (Lora normal + italic + Plex Sans ×4 + Plex Mono ×2)
- .mks-word: 1 definition (referenced by mokosh-lockup.svg)
- Lora references: 13 (font-family stack + @font-face + comments)
- tests/build/fonts-present.test.ts: 10/10 GREEN
- tests/build/tokens-adopted.test.ts case (a): GREEN (tokens.css exists)
- tests/build/tokens-adopted.test.ts cases (b)(c): still RED (Wave 4 work)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
