An investigative nonprofit 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 a row of full-bleed photographic story tiles, each darkened by a rgba(11,11,11,.6) scrim so a white serif headline reads over a small red uppercase kicker. Colour is disciplined to the point of austerity: black ink #0b0b0b, a grey label ladder (#888888/#999999), and a single published crimson accent (--tmp-accent-color #ff0b3a) that does every accent job — kickers, the DONATE and SIGN UP buttons, and link and menu hovers — with no second accent anywhere. The identity is a two-voice type pairing doing opposite jobs: a high-contrast Miller newspaper serif (Newsreader stand-in) for headlines at weight 500 with -0.4px tracking, against GT Pressura, an industrial grotesque (Space Grotesk stand-in), set UPPERCASE with -0.2px tracking for every kicker, nav item, label and button; the serif is never uppercased and the grotesque almost always is. Buttons are crimson, uppercase Pressura Bold, near-square at 3px radius and 27–52px tall, and hover darkens the red with brightness(0.85); crucially the focus state is a real :focus-visible dotted #111111 ring rather than a suppressed outline:none. Depth is refused entirely — the shadow census is empty and 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, cubic-bezier(0.4,0,0.2,1)) with no animation library and one reduced-motion block honoured; there are no gradients, canvas or video, so photography is the only atmosphere, over an extremely dense 74-seam device breakpoint ladder. Miller and GT Pressura are licensed, so the preview stands in with Newsreader and Space Grotesk.
⚠ site only
Browse The Marshall Project 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: 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. Theclaude-pulsekeyframe + 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.
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.
| 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 |
| 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 |
| Token | Hex | Role / usage |
|---|---|---|
| hairline | #cececc | 1px hairline (most-used border) |
| border-mid | #767676 | 2px neutral control border |
| 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.
| 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.
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.