Stark, print-derived music-publication design — RA reads like a magazine transplanted onto a dense listings grid, not a product page. White canvas, black masthead, structure from 2px rules (#333333 / red #ff4848) and 1px #dddddd hairlines, never soft shadows. Two signatures: (1) a huge CONDENSED gothic (Alternate Gothic Pro, 243 uses, Oswald stand-in) set UPPERCASE in RA-red #ff4848, each section title prefixed by a red slash "/" glyph, and running 120px on the hero; (2) a Times SERIF (1420 uses) for every article and reading headline (32/36.8 and 18.72/21.5, weight 700). Small utility labels and buttons drop to Roboto Mono 11px; UI sans is Open Sans / Helvetica. The rotating hero photo is flooded with a red duotone overlay carrying the condensed title and a slideshow index counter (03 / 08). Links stay unapologetically classic-web blue #0000ee (hover red #eb4343). Buttons are 20px pills, 40px tall, red-filled (#ff4848, hover #eb4343) or red-outlined; editorial buttons invert to a black fill on hover. Depth is mostly refused — a couple of soft rgba(0,0,0,.39) shadows plus a signature red glow (0 0 10px #ff4848) — and there are no CSS gradients, canvas, video element or grain (atmosphere is red-duotone <img> photography). Motion is fast (border/background 0.09s and opacity/transform 0.18s on cubic-bezier(0,0,0.2,1)) with SVG stroke-dashoffset line-draws (the "/" slash) and keyframes blur/show/moveup/showLine/expandBox plus Material ripples; no third-party animation library. Two anti-patterns recorded: :focus-visible outline suppressed and no prefers-reduced-motion block. Bespoke dense breakpoint ladder (320–1620px), light-only. Alternate Gothic and Times are licensed/system faces, so the preview stands in with Oswald and a system serif.
⚠ needs-dashboard
Browse Resident Advisor 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: ra.co (live DOM, computed styles via scripts/extract.js), 2026-08-05 (desktop 1514px). sheetsBlocked: 0 — full stylesheet coverage. (Site served a "Verifying the device" JS wall that cleared itself automatically; no challenge was solved.) Coverage: home / listings. Logged-in RA PRO area behind login (needs-dashboard). No text inputs on the home page, so §4 input state isnot captured— none present. Reality check: matches the hint — "stark editorial black/white listings, dense grid." Sharpening it: this is a print-derived music publication, not a SaaS surface. Its two signatures are (1) a huge CONDENSED gothic display (Alternate Gothic) set UPPERCASE in RA-red #ff4848, always prefixed by a red slash "/" glyph, and (2) a Times SERIF for every article headline and reading line. Links are deliberately classic-web blue #0000ee. Distinct from Bandcamp (utilitarian indie marketplace), Spotify (consumer app) and NTS (mono ticker) — RA is serif+condensed editorial with a red duotone hero.
Stark, editorial and print-derived — RA reads like a music magazine transplanted onto a dense listings grid, not a product marketing page. The canvas is plain white with a black masthead; structure comes from 2px rules and 1px hairlines, never from soft shadows. The whole identity turns on a red slash: section titles (LATEST NEWS, POPULAR NEWS) are set in a huge condensed gothic, UPPERCASE, in RA-red #ff4848, each preceded by a red "/" mark, while the rotating hero photo is flooded with a red duotone overlay carrying a 120px condensed title and a slideshow index. Reading matter — every article headline — is a bold Times serif, and small utility labels/buttons drop to Roboto Mono. Links stay unapologetically classic-web blue #0000ee. Feels: stark, editorial, subcultural, print-derived.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #000000 | Primary text, masthead fill, article headlines |
| near-ink | #151515 | Mono labels, dark surfaces |
| gray | #666666 | Secondary text, metadata |
| mid-gray | #808080 | List index numerals |
| light-gray | #aaaaaa | Tertiary text, timestamps |
| on-dark | #f2f2f2 | Text on black / red |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Page background |
| dark-bar | #151515 | Masthead / dark blocks |
| tint | #f2f2f2 | Inset panel fill |
| hairline | #dddddd | List dividers, hover fill |
| rule | #333333 | 2px structural borders |
| Token | Hex | Role / usage |
|---|---|---|
| ra-red | #ff4848 | Section titles, slash glyph, hero duotone, button fill/border |
| red-hover | #eb4343 | Button + link hover |
| link-blue | #0000ee | Every text link (classic-web blue) |
Rule: red #ff4848 owns display titles, the "/" glyph, the hero duotone and buttons — never body. Rule: links are always classic blue #0000ee (hover → red). Rule: structure from 2px rules + 1px #dddddd hairlines, not shadows.
#000000.| Role | Font | Size/Line | Weight | Case |
|---|---|---|---|---|
| Hero display | Alternate Gothic | 120 / 120 | 400 | none |
| Section title | Alternate Gothic | 50 / 50 | 400 | UPPERCASE, #ff4848 |
| H1 (masthead) | Times | 32 / 36.8 | 700 | none |
| Article headline (h3) | Times | 18.72 / 21.5 | 700 | none |
| Body | Times / Open Sans | 16 | 400 | none |
| Mono label / button | Roboto Mono | 11 / 11 | 400–700 | none |
Patterns: condensed gothic reserved for red UPPERCASE display; Times bold for every headline; mono only for tiny utility labels. No letter-spacing tricks — tracking is normal everywhere.
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.