web UI: install Tailwind CSS + design tokens + styled shared layout #35

What to build

/web currently has zero CSS anywhere in the repo — every screen renders as unstyled default-browser HTML (confirmed: no .css files, no styling deps in package.json, src/routes/+layout.svelte has no markup beyond a favicon link). This is the prefactor ticket that makes every subsequent screen-styling ticket an "easy change": install Tailwind, establish design tokens, and build a styled shared layout shell (nav/header) that every other page renders inside of.

Setup: Tailwind CSS v4 via @tailwindcss/vite (the current, cleanest integration path for a Vite-based SvelteKit app — no separate PostCSS config needed). Add a global stylesheet imported once in src/routes/+layout.svelte.

Design direction: this is a calorie/macro tracker for a college dining service — load the frontend-design skill for guidance on making deliberate, non-templated aesthetic choices (typography pairing, a real color direction, spacing scale) rather than reaching for generic default Tailwind blue-on-white. Pick something that reads as considered, not a starter template. Establish this as reusable tokens (Tailwind theme config: a small color palette, font stack, spacing/radius scale) that every subsequent screen ticket reuses — don't let each screen invent its own ad-hoc colors.

Shared layout: restyle src/routes/+layout.svelte into an actual page shell — a real nav (the current nav is a flat pipe-separated list of ~13 text links: Today's macros | Filters | Favorites | Rank dishes | Friends | Notifications | Press | Events | FAQ | Staff Directory | Newsletter — this needs real information architecture, not just color, e.g. grouping into primary vs. secondary nav, or a nav drawer/menu, your call on the right pattern), consistent page container/spacing, and the sign-in/sign-out state display (currently plain text "Signed in as x@umass.edu").

Critical constraint — do not break existing E2E tests: web/e2e/vertical-slice.spec.ts, rank.spec.ts, filters.spec.ts, favorites.spec.ts all currently select elements by semantic HTML structure and visible text content (headings, button text, list items) — not CSS classes. Adding Tailwind classes and restyling should not change element text, semantic tags (keep using real <button>/<a>/<ol>/<ul>/headings, don't replace with generic <div>s), or the DOM structure these tests rely on (e.g. rank.spec.ts's locators scope by nearest-preceding <h2> text). Run the full E2E suite after your changes and treat any failure as a real regression to fix, not a test to loosen.

Acceptance criteria

• Tailwind CSS installed and working (@tailwindcss/vite), global stylesheet in place
• Design tokens established (color palette, font stack, spacing/radius scale) in Tailwind theme config — documented briefly (a comment block or short README section) so subsequent tickets reuse them instead of reinventing
• Shared layout (+layout.svelte) restyled: real nav, page container, sign-in state — applies to every page automatically
• npx playwright test (all 4 spec files) passes unchanged
• pnpm --filter web check clean
• CI passes (all required checks)

Blocked by

None — can start immediately. Blocks #[filled in after creating the rest]: the per-area screen styling tickets, which should reuse these tokens rather than establishing their own.