design: align uplbtools.me with Room TBA design system

[smmariquit]

Problem

uplbtools.me and Room TBA feel like two different products today.

	uplbtools.me (current)	Room TBA (target reference)
Theme	Dark zinc / monochrome (#09090b, Shadcn-style)	Warm light surfaces, maroon accent
Typography	Inter via Google Fonts	System / in-app stack; legal pages use calm serif-like hierarchy
Brand color	--brand-maroon: #991b1b (minimal use)	hsl(5, 53%, 28–32%) links; hsl(5, 75%, 28%) primary actions
Surfaces	Dark cards + zinc borders	--map-chrome-surface, panel shadows, soft dividers
Motion	--transition-fast: 0.1s	Functional only; prefers-reduced-motion respected
Community links	Generic secondary buttons	Discord blurple + Messenger gradient brand icons

Volunteers landing on the org site and then opening Room TBA get a jarring visual shift. The org homepage should read as the same family as our flagship app.

Goal

Restyle uplbtools.me to match the Room TBA design system — shared color tokens, typography rhythm, button/link patterns, and community brand treatment — so the org site and app feel cohesive.

Source of truth (Room TBA):

• Design system epic: uplbtools/room-tba#31
• Map chrome tokens: src/components/svelte/Entry.svelte (.app-layout CSS vars)
• Layout / motion matrix: docs/map-ui-mode-matrix.md
• Legal/static page patterns: src/pages/privacy.astro, src/pages/terms.astro
• Community brand icons: src/components/svelte/community/CommunityBrandIcon.svelte
• Community link constants: src/constants/community-links.ts

Scope

1. Shared design tokens (src/styles/global.css)

Extract / mirror a light-theme token set from Room TBA (not the full map layout vars):

/* Example target tokens — align with Room TBA legal + map chrome */
--color-bg: hsl(5 20% 97%);
--color-surface: hsl(5 18% 96%);
--color-text: hsl(0 0% 22%);
--color-text-muted: hsl(0 0% 40%);
--color-accent: hsl(5 53% 32%);
--color-accent-strong: hsl(5 75% 28%);
--color-border: hsl(5 10% 68%);
--color-divider: hsl(5 12% 88%);
--radius-md: 0.625rem;
--radius-lg: 1rem;
--shadow-panel: /* match --map-chrome-panel-shadow */;

Replace the current dark-zinc palette (--bg-black, --border-zinc, etc.) or gate it behind a deliberate “marketing dark” variant — default should match Room TBA light chrome.

2. Components to restyle

File	Notes
src/styles/global.css	Tokens, buttons (.btn, .btn-primary, .btn-maroon), cards, badges
src/components/Hero.astro	Light hero, maroon CTAs, community links with brand icons
src/components/Header.astro	Match Room TBA status-bar / ghost-link tone
src/components/Projects.astro	Card surfaces + accent borders
src/components/Community.astro	Discord/Messenger/GitHub link cards — reuse brand icon SVGs
src/components/About.astro	Typography parity with Room TBA legal pages
src/components/Footer.astro	Community + legal link row

3. Community links (parity with Room TBA #217)

• Discord → https://discord.uplbtools.me
• Messenger (contribute) → https://room-tba.uplbtools.me/messenger/contribute (or direct m.me target from community-links.ts)
• Use branded icons, not plain text secondary buttons

4. Content accuracy (while touching Hero/Projects)

Fix stale copy where noticed:

• Room TBA stack is Astro 7 + MapLibre, not “Next.js / Mapbox”
• Link labels should match live project names and URLs

5. Responsive + a11y

• Verify 320px and 768px — no overflow, buttons wrap gracefully (Room TBA editor UX rule)
• Respect prefers-reduced-motion: reduce
• No decorative animations (spinners/loaders only when communicating state)

Non-goals

• Rebuilding uplbtools.me as a Svelte island app
• Full Figma / Code Connect library sync (optional follow-up after #31 lands)
• Dark theme for the org site (unless explicitly paired with Room TBA #381 dark chrome work)
• Map basemap palette — org site has no map

Suggested approach

1. Add src/styles/tokens.css (or shared package later) copied from Room TBA semantic tokens
2. Restyle global.css + one section at a time (Hero → Projects → Community → Footer)
3. Optional: extract CommunityBrandIcon into a tiny shared npm workspace package once two sites consume it — not required for v1 (inline SVG copy is fine)

Acceptance criteria

• Default uplbtools.me theme is light + warm maroon, visually consistent with Room TBA legal pages and map chrome
• Primary CTA buttons use Room TBA maroon (hsl(5, 75%, 28%) hover hsl(5, 75%, 22%))
• Discord and Messenger links show brand icons (Discord blurple, Messenger gradient)
• Community hrefs match community-links.ts
• No horizontal overflow at 320px; text truncates/wraps instead of colliding
• Hero project table shows correct Room TBA stack (Astro / MapLibre)
• Before/after screenshots attached to PR for desktop + 320px mobile

Tests

• Manual: side-by-side compare uplbtools.me and room-tba.uplbtools.me /privacy typography + link colors
• Manual: 320px / 768px layout pass on all sections
• Optional: Playwright smoke for community link hrefs (if E2E added to this repo)

Related

• room-tba#31 — Creating a design system
• room-tba#217 — Messenger role links
• room-tba#406 — Brand icons for Discord/Messenger