# The Marshall Project — Marketing / Home Design Spec

> Source: themarshallproject.org (live DOM, computed styles), 2026-08-03; desktop 1238px.
> Coverage: newsroom home (masthead + full-bleed story tiles + newsletter band + footer). Publishes a small `--tmp-*` token set; the rest from computed styles + census. sheetsBlocked 0. The `claude-pulse` keyframe + its inset glow are capture-tool artifacts, excluded.
> Reality check: hint ("civic / data-journalism — investigative non-profit newsroom, restrained editorial") is ACCURATE — restrained editorial to the letter. The data-journalism lives inside the story pages; the home is a photo-tile index. The signature the hint doesn't name: a **Miller newspaper serif + GT Pressura uppercase-label** pairing over a warm off-white / near-black base with a single crimson accent.

## 1. Visual Theme & Atmosphere

An investigative newsroom that looks like a serious newspaper reset for the web. A warm off-white `#f6f6f4` canvas sits under a near-black `#111111` masthead and full-bleed photographic story tiles, each carrying a white **Miller** serif headline over a small **red uppercase GT Pressura** kicker. Colour is disciplined to the point of austerity: black ink, a grey label ladder, and one crimson `#ff0b3a` that does all the accent work — kickers, the DONATE and SIGN UP buttons, link and menu hovers. Depth is refused (no drop shadows; structure is 1px hairlines), corners are near-square (3px), and the whole page reads as considered, sober and authoritative — a design that gets out of the way of the reporting. Feels: sober, editorial, authoritative, restrained.

## 2. Color Palette & Roles

### Text
| Token | Hex | Role / usage |
|---|---|---|
| ink (`--tmp-text-color`) | `#0b0b0b` | Primary text, serif headlines on light |
| ink-2 | `#111111` | Dark masthead/tile bg, focus-ring colour |
| gray | `#888888` | Uppercase nav + label text |
| gray-2 | `#999999` | Tertiary labels |

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| canvas (`--tmp-background-color`) | `#f6f6f4` | Page background (warm off-white) |
| white | `#ffffff` | Cards, headline text on dark tiles |
| panel | `#ececea` | Light inset panels / dividers |
| dark | `#111111` | Masthead + dark hero tile background |

### Borders
| Token | Hex | Role / usage |
|---|---|---|
| hairline | `#cececc` | 1px hairline (most-used border) |
| border-mid | `#767676` | 2px neutral control border |

### Accent
| Token | Hex | Role / usage |
|---|---|---|
| crimson (`--tmp-accent-color`) | `#ff0b3a` | THE accent: kickers, DONATE/SIGN UP buttons, link + menu hovers, 2px accent borders |

Rule: the page is black + grey on warm off-white; crimson `#ff0b3a` is the only chromatic colour and carries every interactive/emphasis role. No second accent.

## 3. Typography Rules

- Families: **Miller** (Scotch/newspaper serif — story headlines, 176 uses incl. Bold) + **GT Pressura** (industrial grotesque — kickers, nav, labels, buttons; Light/Regular/Bold, 277 uses) + **Times** (the wordmark) + a little Utopia-Std.
- Body base: 16px. Specimen swaps: **Newsreader** stands in for licensed Miller (and the Times wordmark); **Space Grotesk** for licensed GT Pressura.

| Role | Family | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Wordmark | Times (serif) | 32 | 700 | normal | none, `#0b0b0b` |
| Story headline | Miller (serif) | 30 / 34.5 | 500 | -0.4px | none, `#ffffff`/`#0b0b0b` |
| Section head | GT Pressura Bold | 30 | 400 | normal | none, `#ff0b3a` |
| Kicker | GT Pressura | ~13–16 | 400 | -0.2px | UPPERCASE, `#ff0b3a` |
| Nav | GT Pressura | 14 | 400 | -0.2px | UPPERCASE, `#888888` |
| Body | Miller / Pressura | 16 / — | 400 | normal | none |
| Button | GT Pressura Bold | 14–18 | 400 | -0.2px | UPPERCASE |

Pattern: two voices doing opposite jobs — a high-contrast serif (Miller) for headlines, an industrial grotesque (GT Pressura) UPPERCASE with slight negative tracking for every label, kicker, nav item and button. The serif is never uppercased; the grotesque almost always is.

## 4. Component Stylings

### Buttons
- **Primary (nav DONATE)**: bg `#ff0b3a`, text `#ffffff`, radius 3px, h 27px, pad 6px 10px, GT Pressura Bold 14 UPPERCASE (-0.2px).
- **Primary large (SIGN UP)**: bg `#ff0b3a`, text `#ffffff`, radius 3px, h 52px, pad 14px, 2px `#ff0b3a` border, GT Pressura Bold 18 UPPERCASE.
- **Ghost link (footer DONATE)**: transparent, text `#ff0b3a`, UPPERCASE.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary button | bg `#ff0b3a`, white, 3px | text `#fff` + `filter: brightness(0.85)` | `:focus` outline none; `:focus-visible` **`outline: #111111 dotted`** (keyboard ring) | — | dimmed |
| Nav link | `#888888` UPPERCASE | color → `#ff0b3a` | color → `#ff0b3a` | — | — |
| Menu button | dark | bg → `#ff0b3a` | dotted ring | — | — |

### Inputs
- Search field opens from the masthead; `input:focus` outline none (the branded focus lives on `:focus-visible` of controls).

### Story tiles (signature)
- Full-bleed photograph with a `rgba(11,11,11,.6)` scrim, a red UPPERCASE Pressura kicker, and a white Miller serif headline; light tiles separated by 1px `#cececc` hairlines.

## 5. Layout Principles

- Masthead: near-black `#111111` bar — hamburger + bar-chart logo mark + Times wordmark left; SEARCH / ABOUT / NEWSLETTERS (grey uppercase) + red DONATE button right.
- Hero: a three-across row of equal full-bleed story tiles.
- Below: light `#f6f6f4` bands — a bold newsletter prompt + red SIGN UP, then the article river.
- Dense newspaper grid; 1px `#cececc` hairlines separate cells; generous serif headlines.

## 6. Depth & Elevation

- Radii: near-square — 3px (and a `3%` relative radius) dominant, 5px, 50% for circular avatars/marks.
- **Elevation refused: no box-shadows** (the only shadow in the census is the excluded capture artifact). Structure comes entirely from **1px `#cececc` hairlines** and 2px `#ff0b3a` / `#767676` borders.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color, border-color | 0.25s | ease-in-out | house transition (127×) |
| all | 0.25s | ease-in-out | general hovers |
| background-color, color | 0.2s | linear | buttons / menu |
| opacity | 0.25s | cubic-bezier(0.4,0,0.2,1) | fades |
| stroke | 0.2s | linear | SVG icons |

- House transition: `color, border-color 0.25s ease-in-out`; easings include `cubic-bezier(0.4,0,0.2,1)` and `cubic-bezier(0,0,0,1)`.
- No animation library and **no published keyframes** (only the excluded artifact) — motion is transitions only. **1 `prefers-reduced-motion` block honoured** (reducedMotionBlocks: 1).

## 8. Backgrounds, Effects & WebGL

- Flat: warm off-white `#f6f6f4` and near-black `#111111` surfaces — **no CSS gradients**, no canvas/WebGL, no grain, no background video.
- Emotional layer is photography: ~11 full-bleed CSS background-image story tiles, each darkened by a `rgba(11,11,11,.6)` scrim so white serif headlines read.

## 9. Do's and Don'ts

### Do
- Pair a high-contrast newspaper serif (Miller / Newsreader) for headlines with an industrial grotesque (GT Pressura / Space Grotesk) UPPERCASE for every kicker, nav item, label and button.
- Keep the base warm off-white `#f6f6f4` + near-black `#111111`; let one crimson `#ff0b3a` carry all accent and interactive roles.
- Use small red UPPERCASE kickers above serif headlines on full-bleed photo tiles (with a dark scrim).
- Build structure from 1px `#cececc` hairlines — refuse drop shadows.
- Keep corners near-square (3px); UPPERCASE labels get -0.2px tracking.
- Provide a real `:focus-visible` ring (dotted `#111111`), not just `outline:none`.

### Don't
- Don't add a second accent colour — crimson is the only one.
- Don't uppercase the serif or set headlines in the grotesque.
- Don't add shadows or rounded cards; this is a flat, near-square newspaper grid.
- Don't switch to a dark theme (light-only) or add decorative gradients/effects.

## 10. Responsive Behavior

- Extremely dense device breakpoint ladder — **74 seams** from 325px to 2000px (mostly max-width px steps) plus a `46.1875em` seam — a hand-tuned newspaper grid that reflows the tile columns at many widths. **2 container queries.**
- Mobile collapses the tile row to a single column and the masthead links into the hamburger menu.
- Light-only, no theme toggle (`darkSchemeBlocks: 0`); **1 reduced-motion block**.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#f6f6f4` · Text `#0b0b0b` · Dark `#111111` · Muted `#888888` · Hairline `#cececc` · Accent `#ff0b3a`
- Font: Miller/Newsreader serif (headlines) + GT Pressura/Space Grotesk UPPERCASE (labels) · Body 16px · Radius 3px · Button h 27–52px
- Focus: `:focus-visible` dotted `#111111` · Hover: crimson `brightness(0.85)` / link → `#ff0b3a`

<marshall-project-marketing_design_language>
Use The Marshall Project design language: an investigative newsroom that reads like a sober newspaper reset for the web. Warm off-white #f6f6f4 canvas under a near-black #111111 masthead and full-bleed photographic story tiles (each darkened by a rgba(11,11,11,.6) scrim). Text is black #0b0b0b with a grey label ladder (#888888/#999999); ONE crimson #ff0b3a is the only chromatic colour and does every accent job — kickers, DONATE/SIGN UP buttons, link and menu hovers. Two type voices doing opposite jobs: a high-contrast Miller newspaper serif (Newsreader stand-in) for headlines at weight 500 with -0.4px tracking, and GT Pressura industrial grotesque (Space Grotesk stand-in) UPPERCASE with -0.2px tracking for every kicker, nav item, label and button; the serif is never uppercased. Buttons are crimson, UPPERCASE Pressura Bold, near-square (3px radius), 27–52px tall; hover darkens the red to brightness(0.85); focus is a real :focus-visible dotted #111111 ring, not outline:none. Depth is refused — no drop shadows; structure comes from 1px #cececc hairlines and 2px #ff0b3a borders on a near-square grid. Motion is transitions only (color/border 0.25s ease-in-out), no library, reduced motion honoured; no gradients, canvas or video — photography is the only atmosphere. Feels: sober, editorial, authoritative, restrained. Avoid: a second accent colour, uppercasing the serif or setting headlines in the grotesque, rounded cards or shadows, and a dark theme.
</marshall-project-marketing_design_language>