# Obama Foundation — Marketing Site Design Spec

> Source: obama.org (live DOM, computed styles), 2026-08-04 (desktop 1512px). SvelteKit build.
> Coverage: homepage. No login product; site only. Screenshots blocked by 9 autoplaying videos, so visual review is from extraction + known brand marks; all stylesheets read (0 blocked) — full token/state/keyframe coverage.
> Reality check: matches the hint (split-screen storytelling, fixed-panel narrative, image-forward). Sharpens it: the identity is the classic Obama-campaign type pairing — Gotham Condensed for every headline/nav at huge sizes over a Chronicle Text serif body — on a strict black/white canvas, with editorial per-section color accents (red/yellow/sky-blue) and full-bleed video as the atmosphere.

## 1. Visual Theme & Atmosphere

Civic editorial storytelling that reads like a well-art-directed print magazine reset for the web. A strict black-and-white canvas alternates full-bleed white and pure-black bands, each carrying full-bleed video or photography that zooms slowly on hover. The type does all the expressive work: an enormous Gotham Condensed (the Obama campaign face) sets 100px display headlines and every nav item, paired with a Chronicle Text serif for warm, readable body — a deliberately dignified, optimistic voice. Color is rationed and editorial: individual sections adopt a single accent (foundation red, a rising-sun yellow, sky blue) rather than a global palette, so hue signals chapter. Controls are square, blocky and invert on hover. Feels: dignified, editorial, hopeful, image-forward.

## 2. Color Palette & Roles

### Text
| Token | Hex | Role / usage |
|---|---|---|
| black | `#000000` | Primary text, dark bands (most-used) |
| white | `#ffffff` | Text on dark, light bands |
| grey-696 | `#696969` | Secondary text |
| grey-555 | `#555555` | Tertiary text |
| grey-656 | `#656565` | Muted text |
| grey-767 | `#767676` | Caption / label grey |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Page bg, light sections, cards |
| black | `#000000` | Full-bleed dark bands (18 section fills) |
| off-white | `#f8f8f8` | Inset panels |
| cream | `#f3f3ee` | Warm editorial section band |
| grey-bg | `#f4f4f4` | Alt panel |
| border-white | `#ffffff` | 1px outline-button border on dark (most-used border) |
| border-black | `#000000` | 1px outline-button border on light |
| border-ddd | `#dddddd` | Hairline dividers |
| border-d8 | `#d8d8d8` | Alt hairline |

### Editorial accents (one per section)
| Token | Hex | Role / usage |
|---|---|---|
| red | `#ce2227` | Foundation red — accents, links |
| yellow | `#ffbd12` | Rising-sun yellow — section band, highlights |
| sky | `#8eddff` | Sky-blue section band |
| blue | `#0064f0` | Blue section band |
| blue-slate | `#3860be` | Link / accent blue |
| blue-light | `#6aaae4` | Light blue accent |

Scrims: `rgba(0,0,0,.5)` / `.6` / `.75` over media so white type stays legible.
Rule: chrome stays black & white; color is applied per-section as a single editorial accent, never mixed globally.

## 3. Typography Rules

- Families: `"Gotham Condensed"` (display + nav + buttons, 748 uses), `"Chronicle Text G1"` (serif body, 804 uses), `"Gotham"` (minor UI, 91 uses).
- Preview specimens use **Barlow Condensed** (for Gotham Condensed), **Newsreader** (for Chronicle Text) and **Montserrat** (for Gotham) as the closest open stand-ins; the site ships the licensed originals.
- Body: 16px / 24px / 400 / Chronicle Text serif / `#000000`, tracking -0.2px.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | Gotham Condensed | 100 / 90 | 400 | -1.5px |
| Section (h2) | Gotham Condensed | 54 / 54 | 400 | normal |
| Body | Chronicle Text G1 | 16 / 24 | 400 | -0.2px |
| Nav / UI | Gotham Condensed | 24 / 24 | 400 | normal |
| Button | Gotham Condensed | 24 / 24 | 400 | normal |

Patterns: headings are a CONDENSED grotesque at weight 400 (never bold) run very large, with tight line-height (90 on 100px display); body is a warm serif. The condensed-sans + serif split is the whole identity.

## 4. Component Stylings

### Buttons (square, blocky, inverting)
- **Primary (Donate)**: bg `#ffffff`, text `#000000`, radius `0px`, h `74px`, padding `24px 32px`, Gotham Condensed 24px/400.
- **Outline (on dark)**: transparent bg, 1px `#ffffff` border, white text. Hover inverts: bg `#ffffff` + text `#000000`.
- **Solid black**: bg `#000000`, white text, 1px `#000000` border.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Outline button | transparent, 1px `#fff` border, white text | bg `#ffffff`, text `#000000` (inverts) | `a:focus{outline:none}` + `focus-visible` offset 2px (see anti-pattern) | not captured | not captured |
| Donate button | white bg, black text, square | bg stays white; media/context shift | as above | — | — |

Anti-pattern: `a:focus{outline:none}` suppresses the ring for mouse+keyboard; only `:focus-visible` keeps an offset. Recommend a real visible ring, e.g. `outline: 2px solid #000; outline-offset: 2px`.

### Inputs
- `not captured`: no visible standalone input on the homepage (search opens an overlay).

### Cards / panels
- Square-ish: dominant radius `2px` (occasional `20px`, `100px` pills for tags). 1px hairline borders (`#dddddd`), minimal shadow (`rgba(0,0,0,.2) 0 4px 8px` on the rare lifted element).

### Nav
- Gotham Condensed 24px links; logo is the Obama Foundation rising-sun mark; Donate CTA on the right.

## 5. Layout Principles

- Full-bleed alternating white/black chapter bands, each a fixed panel of media + condensed headline (split-screen storytelling).
- 12-column grid (`--grid-columns: 12`) with a defined grid-gap.
- Media-first: 9 videos and full-bleed photography carry the page; text sits in a column over or beside the media.
- Generous vertical rhythm between chapters; hero headline at 100px sets the scale.

## 6. Depth & Elevation

- Radius scale: `2px` dominant (near-square), `3px`, `17px`/`20px` occasional, `50px`/`100px` pills for tags, `50%` avatars.
- Shadows: minimal and soft — `rgba(0,0,0,.2) 0 4px 8px`, `rgba(0,0,0,.2) 0 0 18px`; structure comes from 1px borders and full-bleed color bands, not elevation.
- Philosophy: flat, editorial, square; depth is compositional (bands + media), not shadowed.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| background-size | 0.3s | ease-in-out | full-bleed media hover-zoom (58 uses — signature) |
| color, background-color, border-color, fill, stroke | 0.15s | cubic-bezier(0.25,0.1,0.25,0.1) | interactive chrome (28) |
| opacity | 0.6s | cubic-bezier(0.65,0,0.35,1) | scroll reveals (17) |
| all | 0.4s | cubic-bezier(0.4,0,0.2,1) | panels |

- House move: a slow `background-size 0.3s` zoom on hovered media is the signature; scroll-reveal fades at 0.6s.
- Svelte transitions power section reveals (`__svelte_*` keyframe animations, 0.5–0.6s linear). A `fun-widget-backdrop-rotate` keyframe drives an interactive widget.
- No third-party animation library (no GSAP/Lenis/Framer). `spin` loader keyframe present.
- Anti-pattern: `reducedMotionBlocks: 0` — no `prefers-reduced-motion` block despite heavy video/motion. Add one.

## 8. Backgrounds, Effects & WebGL

- Atmosphere is 9 autoplaying full-bleed **videos** plus photography — the primary background device.
- No canvas/WebGL, no grain. Only solid black/white "gradients" (single-color) and dark scrims (`rgba(0,0,0,.5–.75)`) over media for legibility.
- 91 SVGs (icon set + the rising-sun brand mark).

## 9. Do's and Don'ts

### Do
- Pair a large CONDENSED grotesque (Gotham Condensed) for headlines/nav with a serif (Chronicle Text) for body.
- Keep chrome strictly black & white; apply a single editorial accent per section (red / yellow / sky).
- Build the page as alternating full-bleed white/black chapter bands carrying video or photography.
- Make buttons square (0–2px), big, and invert them on hover (transparent→white, white→black).
- Zoom full-bleed media slowly on hover (background-size 0.3s ease-in-out).
- Run headlines at weight 400 and very large (100px display, 90 line-height).

### Don't
- Don't set headlines bold or in a normal-width sans — the condensed 400 treatment is the identity.
- Don't mix multiple accent colors within one section.
- Don't round controls — keep them square/near-square.
- Don't rely on shadows for structure; use bands and 1px borders.
- Don't suppress the focus ring globally (the site's `a:focus{outline:none}` is a bug to fix).
- Don't ship heavy video without a `prefers-reduced-motion` block.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| max 640px | Mobile: single column, stacked chapters, hamburger nav |
| min 768px | Tablet: side-by-side split panels |
| min 1200px | Desktop chapter layout |
| min 1920px | Ultra-wide max width |

- Dense bespoke ladder: 320/390/400/425/426/481/530/550/600/640/680/768/896/1200/1920.
- `darkSchemeBlocks: 0` — no OS dark theme (the black bands are intentional design, not a dark mode). No container queries.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` / `#000000` bands · Text `#000000` · Muted `#696969` · Border `#dddddd` · Accents `#ce2227` / `#ffbd12` / `#8eddff`
- Fonts: Gotham Condensed (display/nav) + Chronicle Text serif (body) + Gotham (UI) · Body: 16px serif · Radius: 0–2px square · Button height: 74px
- Focus: add `outline: 2px solid #000; outline-offset: 2px` (site suppresses it) · Hover: media zoom (background-size 0.3s) + button invert

<obama-foundation_design_language>
Use the Obama Foundation design language: civic editorial storytelling on a strict black/white canvas built as alternating full-bleed white and pure-black chapter bands, each carrying full-bleed video or photography that zooms slowly on hover (background-size 0.3s ease-in-out). The identity is a type pairing — a huge CONDENSED grotesque (Gotham Condensed; open stand-in Barlow Condensed) at weight 400 for every headline (100/90, -1.5px) and all 24px nav/buttons, against a Chronicle Text serif (stand-in Newsreader) for 16/24 body. Chrome stays black #000 and white #fff; color is applied as a SINGLE editorial accent per section (foundation red #ce2227, rising-sun yellow #ffbd12, sky #8eddff, blue #0064f0), never mixed globally. Buttons are square (0–2px radius), big (h74, 24px condensed) and INVERT on hover (transparent+white-border+white-text → white-fill+black-text). Depth is refused — flat, 1px borders (#dddddd) and full-bleed bands do the structural work, shadows are rare and soft. Grid is 12-col; body is a warm serif; scroll reveals fade at 0.6s. Feels: dignified, editorial, hopeful, image-forward. Avoid: bold or normal-width headline sans, rounded controls, multiple accents in one section, shadow-based structure, and a globally suppressed focus ring (add outline:2px solid #000) — and add a prefers-reduced-motion block for the video.
</obama-foundation_design_language>