refactor(web): extract shared design system tokens

[code-yeongyu]

Summary

This PR supersedes the stale closed draft PR #70 with a fresh branch from origin/main (4a15494). It extracts the existing web design tokens and shared CSS layers into a dedicated design-system stylesheet while preserving the current rendered UI, behavior, and experience pixel-for-pixel.

Changes

• Moved the existing Tailwind @theme, base CSS variables, global base layer, and shared .card-gradient-* utilities from packages/web/app/globals.css into packages/web/app/styles/design-system.css.
• Kept globals.css as the import hub for Tailwind, shared design-system CSS, and page-specific composition CSS.
• Updated packages/web/DESIGN.md so implementation sources, live green token values, and reusable component families match the current rendered design.
• Refreshed one stale docs e2e assertion to match the current content/docs/skills.md copy; the same assertion failed on clean origin/main before this branch.
• Added a reproducible Playwright real-Chrome capture/interaction harness and committed visual QA evidence under .omo/ulw-loop/evidence/design-system-fidelity-v2/.

Verification

Automated gates run locally in packages/web:

• pnpm install --frozen-lockfile passed.
• pnpm run lint passed.
• pnpm run type-check passed.
• pnpm run build passed.
• pnpm run test:e2e passed: 52/52 tests.
• Lighthouse in e2e passed with real Chrome CDP: mobile 100/100/100/100 and desktop 100/100/100/100.

Manual/visual QA evidence:

• Capture harness: .omo/scripts/design-system-fidelity/capture-and-drive.mjs
• Evidence summary: .omo/evidence/design-system-fidelity-v2.md
• Browser interaction report: .omo/ulw-loop/evidence/design-system-fidelity-v2/capture-report.json
• Pixel diff summary: .omo/ulw-loop/evidence/design-system-fidelity-v2/diffs/summary.json
• Compared / and /docs across 390x844, 768x1024, and 1280x800.
• All 6 visual comparisons are exact: diffPixels: 0, diffRatio: 0, similarityScore: 100, dimensionsMatch: true, alphaChannelIntact: true.
• Interaction checks passed: copy install command, landing -> docs navigation, docs mobile menu, Cmd-K search focus, docs search filtering, and docs hash navigation.
• No console warnings/errors or page errors were recorded during the capture run.

Notes

No visual redesign was introduced. The intent is design-system extraction and documentation fidelity with current behavior and current pixels preserved.

---

Summary by cubic

Extracted shared design tokens and CSS utilities into a dedicated packages/web/app/styles/design-system.css with no visual or behavioral changes. Also refreshed docs/tests and added a Playwright capture script with committed visual evidence.

• Refactors
  • Moved Tailwind @theme, root CSS tokens, base layer, and .card-gradient-* utilities from app/globals.css to app/styles/design-system.css; kept globals.css as the import hub.
  • Updated packages/web/DESIGN.md to match live token values and component families.
  • Added a Playwright capture/interaction script and evidence under .omo/ulw-loop/evidence/design-system-fidelity-v2/, and refreshed one docs e2e assertion to match current copy.

^{Written for commit 292420d. Summary will update on new commits.}

[github-actions]

Thanks for the PR! Changes to LazyCodex land through oh-my-openagent — could you open this against omo-codex over there instead? PRs in this repository can't be merged.

If you're working with a coding agent, prompt it like this:

I opened #72 ("refactor(web): extract shared design system tokens") against code-yeongyu/lazycodex, but changes there land through code-yeongyu/oh-my-openagent, where the Codex implementation lives under packages/omo-codex. Read my original PR, then open an equivalent PR against code-yeongyu/oh-my-openagent. In the new PR body, link the original PR (#72), explain that it was first opened against lazycodex, and describe in detail what that PR changed and why.