Align design tokens with landing page color scheme (Phase 10e-2a)

forgejo_admin commented

2026-03-15 03:48:48 +00:00

Owner

Lineage

plan-2026-03-08-tryout-prep → Phase 10e → Phase 10e-2a (color alignment refinement)

Repo

forgejo_admin/westside-app

User Story

As a visitor navigating between the landing page and the app
I want consistent brand colors and text hierarchy
So that both sites feel like the same organization

Context

The landing page (ldraney/west-side-basketball) has a deliberate 10-color palette with CSS custom properties. The westside-app design tokens (PR #23) were extracted from ad-hoc hex values already in the codebase. Comparing the two reveals drift: brand red is #d42026 on the landing page vs #c41230 in the app (more maroon), text grays differ significantly, and border colors don't match. Since all routes now use var() references (10e-2), aligning the token values in app.css propagates everywhere automatically.

File Targets

Files to modify:

src/app.css — update token hex values to match landing page palette
src/app.html — update inline critical styles to match (bg, text color)

Files NOT to touch:

Everything else — token values propagate via var() references

Acceptance Criteria

--color-brand matches landing page red #d42026
--color-brand-hover matches landing page hover #e8333a
Text grays align with landing page hierarchy (#f0f0f0, #d4d4d4, #a3a3a3, #737373)
Border color aligns with landing page #262626
app.html inline styles use same values as app.css tokens
npm run build passes

Test Expectations

Visual: app looks consistent with landing page color scheme
Build: npm run build passes
Run command: npm run build

Constraints

Token values only — no structural changes
Semantic colors (success/warning/danger/info) stay as-is (app-specific)
Keep app.html and app.css background values in sync

Checklist

PR opened
Tests pass (npm run build)
No unrelated changes

westside-basketball — project
plan-2026-03-08-tryout-prep — parent plan
PR #23 (design system) — created the tokens being updated

### Lineage `plan-2026-03-08-tryout-prep` → Phase 10e → Phase 10e-2a (color alignment refinement) ### Repo `forgejo_admin/westside-app` ### User Story As a visitor navigating between the landing page and the app I want consistent brand colors and text hierarchy So that both sites feel like the same organization ### Context The landing page (`ldraney/west-side-basketball`) has a deliberate 10-color palette with CSS custom properties. The westside-app design tokens (PR #23) were extracted from ad-hoc hex values already in the codebase. Comparing the two reveals drift: brand red is `#d42026` on the landing page vs `#c41230` in the app (more maroon), text grays differ significantly, and border colors don't match. Since all routes now use `var()` references (10e-2), aligning the token values in `app.css` propagates everywhere automatically. ### File Targets Files to modify: - `src/app.css` — update token hex values to match landing page palette - `src/app.html` — update inline critical styles to match (bg, text color) Files NOT to touch: - Everything else — token values propagate via `var()` references ### Acceptance Criteria - [ ] `--color-brand` matches landing page red `#d42026` - [ ] `--color-brand-hover` matches landing page hover `#e8333a` - [ ] Text grays align with landing page hierarchy (`#f0f0f0`, `#d4d4d4`, `#a3a3a3`, `#737373`) - [ ] Border color aligns with landing page `#262626` - [ ] `app.html` inline styles use same values as `app.css` tokens - [ ] `npm run build` passes ### Test Expectations - [ ] Visual: app looks consistent with landing page color scheme - [ ] Build: `npm run build` passes - Run command: `npm run build` ### Constraints - Token values only — no structural changes - Semantic colors (success/warning/danger/info) stay as-is (app-specific) - Keep `app.html` and `app.css` background values in sync ### Checklist - [ ] PR opened - [ ] Tests pass (`npm run build`) - [ ] No unrelated changes ### Related - `westside-basketball` — project - `plan-2026-03-08-tryout-prep` — parent plan - PR #23 (design system) — created the tokens being updated