pal-e-docs

Phase 8: Design System

phase-wkq-8-design-system Phase

phase
Project
Goal: CSS design tokens, dark theme fix (no white flash), mobile-first nav, brand color alignment.
Owner: Dev agent
Repo: forgejo_admin/westside-app
Depends on: phase-wkq-5-team-placement

Scope

  • White flash fix: moved critical dark theme from <svelte:head> to inline <style> in app.html
  • src/app.css with 25+ CSS custom properties (design tokens)
  • Replaced hardcoded hex across 9 routes + AuthStatus with var()
  • Brand color alignment with GitHub Pages palette (#d42026, Tailwind neutral scale)
  • Mobile-first nav: hamburger drawer on mobile (<768px), horizontal on desktop
  • Animated hamburger-to-X, slide-out drawer with backdrop

Deliverables

  • PRs: #23, #25, #27 (westside-app). Issues: #22, #24, #26 closed.
  • Dark theme renders before JS loads — zero FOUC

Provenance

Phases 10e-1, 10e-2, 10e-2a, 10e-5 from original tryout prep plan.