refactor(web): extract shared design system tokens

[code-yeongyu]

Summary

This PR extracts the existing LazyCodex web design-system tokens and shared base/gradient utilities out of app/globals.css into app/styles/design-system.css while preserving the current rendered landing/docs experience.

It also updates packages/web/DESIGN.md so the documented palette, implementation sources, component families, and interaction rules match the UI that is already shipping. No visible redesign or behavior change is intended.

Changes

• Adds packages/web/app/styles/design-system.css as the shared token/base/utility layer.
• Keeps packages/web/app/globals.css as the import hub: Tailwind, then design system, then landing styles.
• Aligns packages/web/DESIGN.md with the existing green token values and documents the browser CSS, OG theme, landing/docs style sources, and reusable component families.
• Commits ULW/manual QA artifacts under .omo/ so reviewers can inspect the visual diff evidence, interaction proof, full gates, and review notes.

Verification

Visual fidelity

• .omo/ulw-loop/evidence/design-system-fidelity/C001-browser-fidelity.json
• Baseline/after screenshots under .omo/ulw-loop/evidence/design-system-fidelity/screenshots/
• Landing desktop/mobile and docs desktop/mobile all report similarityScore: 100, diffPixels: 0, no console errors, no horizontal overflow.

Manual browser interaction

• .omo/ulw-loop/evidence/design-system-fidelity/C002-docs-interactions.json
• /docs at 390x844 and 1280x800: mobile Menu open/close, search term ulw, Meta+K focus, $ulw-loop nav/hash target in viewport, no console errors, no horizontal overflow.

Automated gates

• .omo/ulw-loop/evidence/design-system-fidelity/C003-automated-gates.txt
  • pnpm run lint
  • pnpm run type-check
  • pnpm run build
  • pnpm exec playwright test e2e/landing.spec.ts e2e/docs.spec.ts e2e/responsive.spec.ts
  • Result: 32 passed.

Full frontend gates

• .omo/evidence/design-system-fidelity-full-gates.txt
  • pnpm exec playwright test e2e/seo.spec.ts: 8 passed.
  • pnpm run test:lighthouse: real Chrome/CDP mobile and desktop both perf=100 a11y=100 bp=100 seo=100.
  • pnpm run test:e2e: 52 passed.

Review artifacts

• .omo/evidence/design-system-fidelity-manual-qa-matrix.md
• .omo/evidence/design-system-fidelity-clone-fidelity.md
• .omo/evidence/design-system-fidelity-code-review.md
• .omo/evidence/design-system-fidelity-code-review-resolution.md
• .omo/evidence/design-system-fidelity-gate-review.md
• .omo/evidence/design-system-fidelity-notepad.md

Notes

• Codex Chrome Extension automation was unavailable during the run, so browser QA used the repo's Playwright real-Chrome path and recorded the fallback in the evidence.
• Generated test-results, playwright-report, and Lighthouse HTML/JSON report directories were cleaned before commit.

---

Summary by cubic

Centralized web design system tokens and shared base/gradient utilities into a dedicated stylesheet to simplify maintenance. No visual or behavior changes to landing/docs.

• Refactors
  • Added packages/web/app/styles/design-system.css for tokens/base/utilities.
  • Updated packages/web/app/globals.css to import Tailwind, then the design system, then landing styles.
  • Synced packages/web/DESIGN.md with the shipped palette and documented style sources.

^{Written for commit 864ca04. 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 #70 ("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 (#70), explain that it was first opened against lazycodex, and describe in detail what that PR changed and why.