# Resident Advisor (RA) — Marketing Site Design Spec

> 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 is `not 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text
| 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 |

### Surfaces & borders
| 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 |

### Accent
| 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.

## 3. Typography Rules

- Faces (four): **Times** (serif, 1420× — article headlines + reading), **Alternate Gothic Pro** (condensed gothic, 243× — huge display, UPPERCASE, red), **Open Sans / Helvetica** (UI sans), **Roboto Mono** (56× — small labels + buttons). Specimen stand-ins: Alternate Gothic → **Oswald**; Times → system serif; Roboto Mono / Open Sans render as themselves.
- Body: 16px, Times / Open Sans, `#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.

## 4. Component Stylings

### Buttons
- **Primary (pill)**: bg `#ff4848`, text `#f2f2f2`, border 2px `#ff4848`, radius 20px, h 40px, pad `0 20px`, Roboto Mono 11px/700. Hover: bg darkens to `#eb4343`.
- **Outline (pill)**: transparent, text `#f2f2f2`, border 2px `#ff4848`, radius 20px, h 40px.
- **Editorial button (feature/microsite)**: transparent with border; hover **inverts** to bg `#000000`, text `#f2f2f2`.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary pill | bg `#ff4848` / `#f2f2f2` | bg `#eb4343` | outline none (`:focus-visible` suppressed) | — | not captured |
| Editorial btn | transparent + 2px border | bg `#000000` / `#f2f2f2` | — | — | — |
| Text link | `#0000ee` | color → `#eb4343` | — | — | — |

### Inputs
- No text field on the home page — `not captured` (none present). Search is an icon-triggered overlay.

### Cards / list rows
- News list: numbered rows (condensed gray numeral) + Times-bold headline, separated by 1px `#dddddd` hairlines, no card fill.
- Feature card: full-bleed `<img>` with red-duotone hero variant; index counter (e.g. 03 / 08) top-right.

### Nav / masthead
- h ~62px, bg `#000000`, white RA wave logomark left; links (Events, Music, Magazine, 2000-25) + search icon; right = My account + RA PRO.

## 5. Layout Principles

- Dense multi-column editorial grid: LATEST NEWS (wide) beside POPULAR NEWS (numbered rail); many bespoke breakpoints (see §10) drive column reflow.
- Section titles are the load-bearing device: red "/" glyph + condensed UPPERCASE red heading.
- Hero: full-bleed rotating photo under a red duotone, 120px condensed title, slideshow index counter.
- Structure from 2px `#333333`/`#ff4848` rules and 1px `#dddddd` dividers; generous but tight print-style rhythm.

## 6. Depth & Elevation

- Radii: buttons/pills `20px`, avatars/dots `50%`/`100%`, small `7–8px`. Corners otherwise square.
- Elevation is largely refused: subtle `rgba(0,0,0,.39) 0 0 2px 1px` and `rgba(0,0,0,.35) 1px 2px 8px` on a few floating elements, plus a signature **red glow** `rgb(255,72,72) 0 0 10px` on active/hover accents. Structure is borders: 2px `#333333`, 2px `#ff4848`, 1px `#dddddd`.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| border-color, background-color | 0.09s | cubic-bezier(0,0,0.2,1) | buttons, hovers |
| opacity, transform | 0.18s | cubic-bezier(0,0,0.2,1) | reveals |
| stroke-dashoffset | 0.18s | cubic-bezier(0.4,0,0.6,1) | SVG line draws (the "/" slash + icons) |
| all | 0.1s | ease / ease-in-out | misc controls |
| max-height / height | 0.2–0.3s | ease | expanding panels |

- House transition is fast: `border-color/background-color 0.09s`. Keyframes present: `blur`, `show`, `moveup`, `showLine`, `expandBox` (content reveals) plus Material `mdc-ripple-*` (component library ripples). No third-party animation library detected.
- **Anti-pattern: `:focus-visible` outline is suppressed** (`.js-focus-visible :focus:not(.focus-visible){outline:none}`) and there is **no `prefers-reduced-motion` block** (reducedMotionBlocks 0) — recommend restoring a visible ring and adding a reduced-motion guard.

## 8. Backgrounds, Effects & WebGL

- Flat: no CSS gradients, no canvas/WebGL, no background video element, no grain (rasterLayers 0, canvases 0, three false).
- Atmosphere comes entirely from full-bleed `<img>` photography under a **red duotone overlay** (the hero) — a CSS/image treatment, not a shader.
- No `backdrop-filter`. The only glow is the red box-shadow noted in §6.

## 9. Do's and Don'ts

### Do
- Prefix section titles with a red "/" glyph and set them in condensed gothic, UPPERCASE, in `#ff4848`.
- Use Times serif bold for every article headline and reading headline.
- Keep links classic-web blue `#0000ee` (hover → red `#eb4343`).
- Build structure from 2px `#333333`/`#ff4848` rules and 1px `#dddddd` hairlines, on a white canvas.
- Flood hero photography with a red duotone; add a slideshow index counter.
- Drop to Roboto Mono only for tiny utility labels and buttons.

### Don't
- Don't use red for body text — it is for display titles, the slash, the duotone and buttons only.
- Don't replace the classic-blue links with a "modern" underline-only style.
- Don't add soft card shadows — the system is border-and-rule based.
- Don't collapse the four-face system to one sans; the Times/condensed/mono contrast is the identity.
- Don't ship without restoring a focus ring and adding a reduced-motion block.

## 10. Responsive Behavior

- Bespoke dense ladder (not a framework default): 320, 440, 663/664, 700, 764, 979/980, 1024/1028, 1299/1300, 1442, 1619/1620px.

| Breakpoint | What changes |
|---|---|
| max 663 / min 664px | single column ↔ two-column listings |
| ~764 / 979 / 1028px | rail counts and grid gutters step up |
| 1300 / 1620px | max content width caps, hero scales |

- Many seams because the listings grid reflows at component level. No dark-scheme block (`darkSchemeBlocks` 0), no container queries — light-only (the black masthead/hero are design, not a theme).

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#000000` · Muted `#666666` · Border `#dddddd` · Accent `#ff4848` · Link `#0000ee`
- Faces: Times (serif headlines), Alternate Gothic (condensed red display, Oswald stand-in), Roboto Mono (labels) · Body 16px · Radius: 20px pill · Control height: 40px
- Focus: (site suppresses it — restore 2px `#000000`) · Hover: button `#eb4343`, link `#eb4343`

<resident-advisor-marketing_design_language>
Use the Resident Advisor (RA) design language: a stark print-derived music-publication style. White canvas, black masthead, structure from 2px rules (#333333 / red #ff4848) and 1px #dddddd hairlines, never soft shadows. The signature is a red slash: section titles set in a huge CONDENSED gothic (Alternate Gothic, Oswald stand-in), UPPERCASE, in RA-red #ff4848, each prefixed by a red "/" glyph; the rotating hero photo carries a red duotone overlay, a 120px condensed title and a slideshow index. Every article/reading headline is a bold Times SERIF; tiny utility labels and buttons drop to Roboto Mono 11px. Text is near-black #000000/#151515 with #666666 metadata; links are 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. Fast motion (0.09-0.18s cubic-bezier(0,0,0.2,1)), SVG stroke-dashoffset line-draws, one red glow box-shadow. Feels: stark, editorial, subcultural, print-derived. Avoid: red body text, replacing classic-blue links, soft card shadows, collapsing the four-face Times/condensed/mono system to one sans, and shipping without a focus ring or reduced-motion block.
</resident-advisor-marketing_design_language>