🤖 From Claude:
Summary
Finish the brand-guide color reconciliation by mapping the app's per-domain palette — and the landing/profile surfaces themed off it — to the official AWBW brand colors. The global brand tokens are already aligned (primary blue #24479E, accent orange #D56027); what remains is the DomainTheme palette and the pages that use it, which still lean on generic Tailwind hues (cyan, emerald, indigo, rose, …) unrelated to the brand.
Scope
1. Landing page section tints
- Rotate the six home-section backgrounds through the brand background trio (
#E7F0C6 / #FFEFC7 / #FFDDCF) instead of ad-hoc *-50 hues.
- Fix the Stories drift:
app/views/home/_stories.html.erb is hardcoded bg-rose-50, but Stories' DomainTheme color is fuchsia — so it's neither tokenized nor brand-aligned. (Confirmed still hardcoded on main.)
2. Profile page hues (people & organizations)
- People →
cyan, Organizations → emerald today; remap to brand-approximated hues.
- Warm the white card shells; point the contact-row links at brand blue.
3. The underlying DomainTheme palette
lib/domain_theme.rb COLORS maps ~40 domain keys to named Tailwind colors. Approximate each to the nearest brand-guide color so badges, cards, and index pages read as one brand family.
Decision required first
DomainTheme maps to named Tailwind palette colors (:cyan, :emerald), not arbitrary hex. To hit the exact brand hexes we must either:
- (a) accept the nearest Tailwind hue per brand color, or
- (b) extend the theme to emit custom
--color-* brand tokens (and safelist them).
Pick one before implementing — it changes the whole approach.
⚠️ Requires coordination with AWBW staff
The brand guide has 6 primary + 8 complimentary colors; the app has ~40 domain keys. Deciding which domain maps to which brand color is a brand/design call, not a mechanical one — arbitrary assignments risk clashes and off-brand pairings. AWBW staff should sign off on the domain→color mapping (and the hex-vs-palette decision above) before this ships.
Done already (context)
🤖 From Claude:
Summary
Finish the brand-guide color reconciliation by mapping the app's per-domain palette — and the landing/profile surfaces themed off it — to the official AWBW brand colors. The global brand tokens are already aligned (primary blue
#24479E, accent orange#D56027); what remains is theDomainThemepalette and the pages that use it, which still lean on generic Tailwind hues (cyan,emerald,indigo,rose, …) unrelated to the brand.Scope
1. Landing page section tints
#E7F0C6/#FFEFC7/#FFDDCF) instead of ad-hoc*-50hues.app/views/home/_stories.html.erbis hardcodedbg-rose-50, but Stories'DomainThemecolor isfuchsia— so it's neither tokenized nor brand-aligned. (Confirmed still hardcoded onmain.)2. Profile page hues (people & organizations)
cyan, Organizations →emeraldtoday; remap to brand-approximated hues.3. The underlying DomainTheme palette
lib/domain_theme.rbCOLORSmaps ~40 domain keys to named Tailwind colors. Approximate each to the nearest brand-guide color so badges, cards, and index pages read as one brand family.Decision required first
DomainThememaps to named Tailwind palette colors (:cyan,:emerald), not arbitrary hex. To hit the exact brand hexes we must either:--color-*brand tokens (and safelist them).Pick one before implementing — it changes the whole approach.
The brand guide has 6 primary + 8 complimentary colors; the app has ~40 domain keys. Deciding which domain maps to which brand color is a brand/design call, not a mechanical one — arbitrary assignments risk clashes and off-brand pairings. AWBW staff should sign off on the domain→color mapping (and the hex-vs-palette decision above) before this ships.
Done already (context)