Civic editorial storytelling that reads like a well-art-directed print magazine reset for the web, built as alternating full-bleed white and pure-black chapter bands each carrying full-bleed video or photography. The whole identity is a type pairing the queue hint understates: a huge CONDENSED grotesque — Gotham Condensed, the Obama-campaign face (748 uses, Barlow Condensed stand-in) — at weight 400 for every headline (100/90, -1.5px) and all 24px nav and buttons, set against a Chronicle Text serif (804 uses, Newsreader stand-in) for 16/24 body, with a little Gotham (Montserrat stand-in) for minor UI. Chrome stays strictly black #000000 and white #ffffff; colour is rationed as a SINGLE editorial accent per section — foundation red #ce2227, rising-sun yellow #ffbd12, sky blue #8eddff, blue #0064f0 — so hue signals chapter rather than forming a global palette. Buttons are square (0–2px radius), big (h56–74) and INVERT on hover (transparent + black border + text → black fill + white text), driven by a 0.15s colour transition. Depth is refused: flat, 1px #dddddd hairlines and full-bleed colour bands do the structural work while shadows stay rare and soft. The signature motion is a slow background-size 0.3s ease-in-out zoom on hovered media (58 uses) plus 0.6s scroll-reveal fades, powered by SvelteKit transitions with no third-party animation library. Atmosphere is 9 autoplaying full-bleed videos and photography scrimmed with rgba(0,0,0,.6) for legibility; no canvas or grain. Two anti-patterns recorded: a:focus{outline:none} suppresses the ring (recommended 2px solid #000 replacement shown), and there is no prefers-reduced-motion block despite the video. Gotham Condensed and Chronicle Text are licensed, so the preview stands in with Barlow Condensed and Newsreader.
⚠ site only
Browse Obama Foundation in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
| 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.
"Gotham Condensed" (display + nav + buttons, 748 uses), "Chronicle Text G1" (serif body, 804 uses), "Gotham" (minor UI, 91 uses).#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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.