refactor(web): extract shared design system tokens

.omo/evidence/design-system-fidelity-clone-fidelity.md

@@ -0,0 +1,57 @@
+# Clone Fidelity Review: design-system-fidelity
+
+recommendation: APPROVE
+
+## Scope Reviewed
+- `packages/web/DESIGN.md`
+- `packages/web/app/globals.css`
+- `packages/web/app/styles/design-system.css`
+- Evidence under `.omo/ulw-loop/evidence/design-system-fidelity`
+- Supporting live component sources for fake-image checks: `packages/web/app/page.tsx`, `packages/web/app/docs/page.tsx`, `packages/web/components/site/hero.tsx`, `packages/web/components/site/site-header.tsx`, and related image helpers.
+
+## Findings
+
+### CRITICAL
+None.
+
+### HIGH
+None.
+
+### MEDIUM
+None.
+
+### LOW
+1. Non-blocking cleanup opportunity: the extracted shared gradient utilities repeat color stops as literals in `packages/web/app/styles/design-system.css:78`, `:82-83`, `:88-89`, and `:96-97` instead of composing them from the already declared `--brand-*` / `--accent-*` tokens. This is not blocking for this scoped behavior-preserving extraction because the values match `packages/web/DESIGN.md:20`, `:23-24`, and `:44`, and source comparison against `HEAD:packages/web/app/globals.css` showed the block was moved without functional CSS changes.
+
+## Assessment
+
+- Real component tree: PASS. The landing page composes live React components in `packages/web/app/page.tsx:22-33`; the hero uses live DOM gradient layers plus inline SVG in `packages/web/components/site/hero.tsx:4-98`; the shared header uses inline SVG and live links in `packages/web/components/site/site-header.tsx:6-65`. Search found ordinary content images and OG routes, but no pasted screenshot or page-level raster/background-image substitute for the reviewed landing/docs UI.
+- Token-driven extraction: PASS for the scoped refactor. `packages/web/app/styles/design-system.css:1-100` contains the extracted Tailwind theme, root tokens, base rules, focus state, and shared card-gradient utility family. The token values align with `packages/web/DESIGN.md:15-33`, and the implementation source is documented at `packages/web/DESIGN.md:3-6`.
+- CSS import order: PASS. `packages/web/app/globals.css:1-3` imports Tailwind first, then `./styles/design-system.css`, then page-level landing styles. The root layout imports globals at `packages/web/app/layout.tsx:3`, while docs imports `packages/web/app/styles/docs.css` from `packages/web/app/docs/page.tsx:8`, leaving design tokens available before route-specific styling.
+- Component-family documentation: PASS for this scoped extraction. `packages/web/DESIGN.md:69-74` documents the brand mark, hero card, command cards, docs shell, and interactive states enough to explain the families affected or depended on by the CSS extraction.
+- Visual behavior preservation: PASS. `C001-browser-fidelity.json` reports 100 similarity, zero diff pixels, intact alpha, no console issues, and no overflow for landing desktop/mobile and docs desktop/mobile. I independently verified the baseline/after screenshot pairs have identical SHA-256 hashes at all four target viewport captures.
+- Interaction/regression evidence: PASS. `C002-docs-interactions.json` records successful mobile and desktop docs search/menu/hash navigation with no console errors or overflow. `C003-automated-gates.txt` records `pnpm run lint`, `pnpm run type-check`, `pnpm run build`, and focused Playwright landing/docs/responsive tests passing with 32 tests passed.
+- Diff hygiene: PASS. `git diff --check` returned clean. Comparing the old `globals.css` design-system block to the new `design-system.css` showed only comment and blank-line removal.
+
+## Evidence Inspected
+- `.omo/ulw-loop/evidence/design-system-fidelity/C001-browser-fidelity.json`
+- `.omo/ulw-loop/evidence/design-system-fidelity/C002-docs-interactions.json`
+- `.omo/ulw-loop/evidence/design-system-fidelity/C003-automated-gates.txt`
+- `.omo/ulw-loop/evidence/design-system-fidelity/baseline-capture.json`
+- `.omo/ulw-loop/evidence/design-system-fidelity/after-capture.json`
+- `.omo/ulw-loop/evidence/design-system-fidelity/screenshots/baseline-landing-desktop-1440x900.png`
+- `.omo/ulw-loop/evidence/design-system-fidelity/screenshots/after-landing-desktop-1440x900.png`
+- `.omo/ulw-loop/evidence/design-system-fidelity/screenshots/baseline-landing-mobile-390x844.png`
+- `.omo/ulw-loop/evidence/design-system-fidelity/screenshots/after-landing-mobile-390x844.png`
+- `.omo/ulw-loop/evidence/design-system-fidelity/screenshots/baseline-docs-desktop-1280x800.png`
+- `.omo/ulw-loop/evidence/design-system-fidelity/screenshots/after-docs-desktop-1280x800.png`
+- `.omo/ulw-loop/evidence/design-system-fidelity/screenshots/baseline-docs-mobile-390x844.png`
+- `.omo/ulw-loop/evidence/design-system-fidelity/screenshots/after-docs-mobile-390x844.png`
+- `.omo/ulw-loop/evidence/design-system-fidelity/screenshots/interaction-docs-mobile-390x844.png`
+- `.omo/ulw-loop/evidence/design-system-fidelity/screenshots/interaction-docs-desktop-1280x800.png`
+- `git diff -- packages/web/DESIGN.md packages/web/app/globals.css packages/web/app/styles/design-system.css`
+- `git show HEAD:packages/web/app/globals.css`
+- `git diff --check`
+
+## Blockers
+None.

.omo/evidence/design-system-fidelity-code-review-resolution.md

@@ -0,0 +1,23 @@
+# Design System Fidelity Code Review Resolution
+
+## Prior Blocking Finding
+
+`packages/web/app/globals.css` imported `./styles/design-system.css` while `packages/web/app/styles/design-system.css` was still untracked.
+
+## Resolution
+
+Resolved by commit `42b05ce refactor(web): extract shared design system tokens`.
+
+That commit includes:
+
+- `packages/web/DESIGN.md`
+- `packages/web/app/globals.css`
+- `packages/web/app/styles/design-system.css`
+
+The previously untracked CSS import target is now part of the branch history.
+
+## Supporting Gates
+
+- `.omo/ulw-loop/evidence/design-system-fidelity/C003-automated-gates.txt`: lint, type-check, build, focused Playwright landing/docs/responsive, 32 passed.
+- `.omo/evidence/design-system-fidelity-full-gates.txt`: SEO spec 8 passed, Lighthouse mobile and desktop 100/100/100/100, full Playwright e2e 52 passed.
+

.omo/evidence/design-system-fidelity-code-review.md

@@ -0,0 +1,56 @@
+# Design System Fidelity Code Review
+
+Scope: `/Users/yeongyu/local-workspaces/lazycodex-wt/design-system-fidelity`
+
+Review target: branch `code-yeongyu/design-system-fidelity` against `origin/main`, plus dirty working-tree changes listed by the task.
+
+Skill-perspective check: ran. I loaded and consulted `code-review`, `remove-ai-slops`, `programming`, and the TypeScript programming reference before judging test relevance and maintainability. The diff does not introduce deletion-only tests, tautological tests, implementation-mirroring tests, untyped escape hatches, needless abstraction, or unnecessary parsing/normalization. The blocking issue below is packaging/reviewability, not slop in the CSS extraction itself.
+
+## CRITICAL
+
+None.
+
+## HIGH
+
+1. `packages/web/app/globals.css:2` imports `./styles/design-system.css`, but `packages/web/app/styles/design-system.css` is untracked and absent from the branch diff.
+
+   Evidence:
+   - `git log --oneline origin/main..HEAD` produced no commits.
+   - `git diff --name-only origin/main` listed only `packages/web/DESIGN.md` and `packages/web/app/globals.css`.
+   - `git status --porcelain=v1 -- packages/web/DESIGN.md packages/web/app/globals.css packages/web/app/styles/design-system.css .omo` showed `?? packages/web/app/styles/design-system.css`.
+   - `git ls-files --error-unmatch packages/web/app/styles/design-system.css` failed with `pathspec ... did not match any file(s) known to git`.
+
+   Risk: the local working tree builds only because the untracked CSS file exists. A branch/PR/review based on tracked changes omits the file imported by `globals.css`, so the submitted refactor is incomplete and can fail from a clean checkout or appear as an empty branch diff. The automated evidence is therefore not sufficient for approval until the required production file is included in version control and gates are rerun from that state.
+
+   Required fix: add/commit `packages/web/app/styles/design-system.css` together with the tracked production changes, then rerun the relevant gates from the committed/clean branch state.
+
+## MEDIUM
+
+None.
+
+## LOW
+
+None.
+
+## Verified Evidence
+
+- CSS extraction fidelity: a mechanical comparison of `origin/main:packages/web/app/globals.css` against `packages/web/app/styles/design-system.css`, after removing imports and comments, reported `sameAfterRemovingImportsAndComments: true`.
+- CSS import ordering: current `packages/web/app/globals.css` imports Tailwind, then `design-system.css`, then `landing.css`. I found no overlapping selectors between extracted `.card-gradient-*`/base selectors and `landing.css`; docs styles are route-imported from `packages/web/app/docs/page.tsx:8`.
+- Token correctness: the extracted browser tokens match the existing `origin/main` CSS values; `packages/web/DESIGN.md` now aligns its palette with those already-rendered values and with `packages/web/app/og-image-theme.ts`.
+- Raw magic values: the reviewed production diff introduces raw values only in `DESIGN.md` and the extracted token file. Existing literal geometry/color values elsewhere remain pre-existing and outside this diff.
+- Browser fidelity evidence: I independently checked the four baseline/after screenshot pairs referenced by `C001-browser-fidelity.json`; each pair is binary-identical with matching dimensions.
+- Automated evidence: `C003-automated-gates.txt` contains passing transcripts for `pnpm run lint`, `pnpm run type-check`, `pnpm run build`, and `pnpm exec playwright test e2e/landing.spec.ts e2e/docs.spec.ts e2e/responsive.spec.ts` with 32 passed.
+
+## Residual Risks
+
+- I did not rerun the full build/e2e suite during this read-only review to avoid generating additional build/test artifacts; I verified the provided logs and screenshot artifacts directly.
+- Evidence covers Chrome landing/docs fidelity and docs interactions. It does not independently prove OG/Twitter image visual fidelity or non-Chrome rendering, but that is not the blocker here.
+
+## Recommendation
+
+codeQualityStatus: BLOCK
+
+recommendation: REQUEST_CHANGES
+
+blockers:
+- Track and commit `packages/web/app/styles/design-system.css` with the production changes, then rerun gates from the committed branch state.