Skip to content

Use brand cream (#FCFAEB) as the site background instead of white - #2287

Draft
maebeale wants to merge 1 commit into
mainfrom
maebeale/site-background-brand-cream
Draft

Use brand cream (#FCFAEB) as the site background instead of white#2287
maebeale wants to merge 1 commit into
mainfrom
maebeale/site-background-brand-cream

Conversation

@maebeale

@maebeale maebeale commented Aug 21, 2026

Copy link
Copy Markdown
Collaborator

🤖 suggested review level: 1 Skim 👀 two-line theming change (one canvas token + class); no logic, but it recolors every page's canvas

⚠️ Needs AWBW staff branding sign-off before merge — see #2289.

What is the goal of this PR and why is this important?

  • The AWBW brand guide names #FCFAEB ("BACKGROUND COLOR") as the page background, but the site rendered on plain white.
  • Moves the site canvas to the brand cream, controlled from one place.

How did you approach the change?

  • Added a single --color-canvas: #fcfaeb token to the @theme block in application.tailwind.css (same mechanism --color-primary uses for the navbar) — Tailwind generates bg-canvas from it.
  • Pointed the app layout <body> at bg-canvas instead of bg-white. Change the hex once and the whole site updates.
  • Not routed through DomainTheme — that's for per-domain identity colors, not global site chrome.
  • Verified the built CSS emits .bg-canvas{background-color:var(--color-canvas)} with --color-canvas:#fcfaeb.

Scope

  • Only the site canvas changes. All ~748 card/input/modal bg-white usages are intentional surfaces — they stay white and now pop against the cream.
  • The 4 admin pages that painted their content column white are handled separately in Give 4 white admin pages the standard bg-blue-100 tint #2288 (align to the standard bg-blue-100 admin tint).

UI Testing Checklist

  • Public index/show pages show the cream background
  • Admin pages still show their blue content wrapper over the cream canvas/margins
  • Navbar, banner, footer, and white cards render correctly against cream

Anything else to add?

The brand guide names #FCFAEB as the page background, but the site rendered on
plain white — the layout <body> hard-coded bg-white. Add a single --color-canvas
theme token (the one place to change it) and point the <body> at bg-canvas, so
the whole site canvas now matches the brand guide. Public pages that fell through
to the white body now show cream; per-page content wrappers are unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant