---
version: alpha
name: "Resident Advisor"
description: "The global authority on electronic music culture — paper-white canvas, utilitarian sans at every scale, a single coral-red brand mark, and an information-dense grid that treats every pixel as schedulable real estate."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"       # light grey for alternating rows, sidebar fills
  surface-dark: "#111111"  # footer, dark editorial panels
  surface-raised: "#fafafa" # card hover tint on white

  # Text / ink
  ink: "#0d0d0d"
  ink-soft: "#1a1a1a"      # article body copy — just off pure black
  ink-muted: "#767676"     # bylines, timestamps, secondary metadata
  ink-faint: "#b3b3b3"     # placeholder text, disabled controls
  on-background: "#0d0d0d"
  on-surface: "#1a1a1a"
  on-dark: "#ffffff"       # type on surface-dark zones

  # Brand accent — the RA coral-red circle mark
  primary: "#f44336"       # RA red — logo circle, CTA button backgrounds, active states
  on-primary: "#ffffff"    # white type on red
  primary-hover: "#d32f2f" # darkened red on button hover
  primary-container: "#fdecea" # pale red tint for tag backgrounds /* estimated */

  # Interaction states
  text-hover: "#f44336"    # inline link hover — snaps to red
  focus-ring: "#f44336"    # keyboard focus outline

  # Borders
  border: "#e0e0e0"        # light separator lines between list rows
  border-strong: "#0d0d0d" # strong rule, active tab underline

  # Shadow tints
  shadow-soft: "#000000"   # was rgba(0,0,0,0.08) — flattened for Google format

typography:
  display-hero:
    fontFamily: "RA Text, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.07
    letterSpacing: -0.5px
  display:
    fontFamily: "RA Text, Helvetica Neue, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.11
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "RA Text, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.17
    letterSpacing: 0px
  heading-sub:
    fontFamily: "RA Text, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0px
  body-large:
    fontFamily: "RA Text, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.67
    letterSpacing: 0px
  body:
    fontFamily: "RA Text, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "RA Text, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.14
    letterSpacing: 0px
  button-ui:
    fontFamily: "RA Text, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.25px
  label-caps:
    fontFamily: "RA Text, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.18
    letterSpacing: 1px
  caption:
    fontFamily: "RA Text, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0px
  caption-bold:
    fontFamily: "RA Text, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.38
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 4px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px

  button-secondary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-secondary-hover:
    backgroundColor: "{colors.ink-soft}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
    borderColor: "{colors.border-strong}"
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
    borderColor: "{colors.border-strong}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-soft}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"
  card-hover:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink-soft}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 12px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 12px
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
    padding: 3px 6px
  badge-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
    padding: 3px 6px
  badge-primary:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
    padding: 3px 6px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px 24px
    borderColor: "{colors.border}"
  nav-bar-item-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.text-hover}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px 24px

  event-row:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderColor: "{colors.border}"
  event-row-hover:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
---

# Resident Advisor Design System

## Overview

Resident Advisor is the information infrastructure of the global electronic music scene. Its design reflects that function directly: the page is white, the grid is relentless, and the typography does the heavy lifting. The canvas is paper-white (`{colors.background}`) held against near-black ink (`{colors.ink}`), with a single coral-red accent (`{colors.primary}`) reserved for the circular RA logo mark and primary call-to-action moments. There is no decorative color, no hero gradient, no ambient atmosphere. The site looks like the inside of a promoter's spreadsheet made beautiful — and for its audience, that is the correct aesthetic choice.

The type system is grounded in a custom grotesque (RA Text) that runs from 56px display headlines down to 11px uppercase event metadata, always within the same humanist-sans family. Weight and size do all the hierarchical work. There is no serif, no expressive display face, no editorial flourish. This is by design: the content — tens of thousands of events, DJ profiles, tracklists, editorial features — is so dense that ornamentation would create noise. What RA's type system communicates above all is legibility at speed, the way a well-designed train schedule communicates departure times. You scan it; you do not read it.

Layout is where RA's design philosophy becomes unmistakable. The event listing grid is the product. Rows of artists, venues, dates, and genre tags stack with `{spacing.sm}` separation and `{colors.border}` hairline rules between them. The information is flush-left, the dates are flush-right, and every pixel is accounted for. Outside the listing rows, section headers are brief and uppercase in `{typography.label-caps}`, editorial features carry 16:9 photography at full column width, and the spacing scale tightens the further you descend into the list view. It is a design that trusts its audience to know what they're looking at.

**Key Characteristics:**
- Pure white (`{colors.background}`) editorial canvas — never tinted, never pulled warm
- Single coral-red accent (`{colors.primary}`) for the RA circle logo and primary CTAs — the only chromatic note
- RA Text custom grotesque — one family, two functional weights (400 for reading, 600–700 for scanning)
- `{rounded.none}` on all interactive elements — buttons, inputs, event rows, badges — no softening
- Dense event-row grid with `{colors.border}` hairline separators and `{spacing.sm}` vertical rhythm
- Flush-left metadata with flush-right dates — the listing row is RA's signature UI component
- `{typography.label-caps}` uppercase labels at 11px / 700 weight / 1px tracking for all section eyebrows
- Sticky white nav bar with minimal chrome — wordmark, primary sections, search, account
- Link hover snaps to `{colors.text-hover}` red with no transition — functional, not decorative
- Near-flat depth model: 1px `{colors.border}` rules and `{colors.surface-raised}` tint on row hover — no shadows on content
- Editorial photography rendered edge-to-edge in feature cards — the image IS the card
- Genre/category tags as `{typography.label-caps}` text labels, not pill chips — information over affordance

## Colors

### Primary
- **Paper White** (`{colors.background}`): The dominant canvas. Event listings, article pages, DJ profiles, venue pages — everything sits on this. It is an active choice to stay legible at all ambient lighting conditions in which someone might check RA (before a night out, in a taxi, at a booth).
- **Ink Black** (`{colors.ink}`): Primary text across the entire site — event titles, artist names, venue names, article headlines. Near-pure black: authoritative, unrelenting.
- **Soft Ink** (`{colors.ink-soft}`): Article body copy and card sub-copy, marginally pulled from pure black for long-read comfort.

### Brand Accent
- **RA Red** (`{colors.primary}`): The circular RA logo mark — coral-red filled circle with a white wordmark inside — is RA's only chromatic identity signal. The same red surfaces on primary CTAs (buy tickets, subscribe, follow) and on link hover states throughout the site. Its rarity in a near-monochrome system gives it immediate salience. On hover it deepens to `{colors.primary-hover}`.

### Text States
- **Secondary Text** (`{colors.ink-muted}`): Venue capacity, start time, ticket prices, bylines, timestamps, "attending" counts. The metadata layer that contextualizes but doesn't compete with the primary event title.
- **Faint Text** (`{colors.ink-faint}`): Placeholder copy, disabled filter states, inactive pagination controls.
- **Dark Reverse** (`{colors.on-dark}`): All type inside the footer and any dark editorial hero zones. White at 100% opacity on `{colors.surface-dark}`.

### Borders & Surfaces
- **Hairline Border** (`{colors.border}`): The most-used border in the system. Every event row separator, every table rule, every input edge at rest. `1px solid` in light grey — structural without weight.
- **Strong Border** (`{colors.border-strong}`): Active tab underline, selected filter pill outline, the 1px left-edge rule on content sidebars.
- **Off-White Surface** (`{colors.surface}`): Filter panel backgrounds, alternating list row fills on some views, tag chip backgrounds in their unselected state.
- **Row Hover Tint** (`{colors.surface-raised}`): The almost-invisible grey (`#fafafa`) that appears under event rows on hover — communicating interactivity without chrome.
- **Dark Surface** (`{colors.surface-dark}`): Footer background, occasional dark editorial hero panels.

### Shadows
- **Shadow Soft** (`{colors.shadow-soft}`): Flattened from `rgba(0,0,0,0.08)`. Used sparingly for floating dropdowns and the search overlay. The system is functionally flat.

## Typography

### Font Family
- **Primary**: RA Text (custom self-hosted grotesque), fallbacks: `Helvetica Neue, Arial, sans-serif`. A humanist sans with tight metrics suited to high-density data display. Two practical weights: 400 (reading) and 600–700 (scanning/labels). No italics in primary UI.
- **Closest Google Font equivalent**: Inter (weights 400/600/700) or DM Sans — both share the humanist grotesque metrics and render cleanly at small sizes.
- No secondary typeface. No serif. No monospace. One face, disciplined through weight and size alone.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Magazine feature openers, RA Guide section leads — 56px at weight 700 |
| `display` | Section headers, artist profile names at hero scale — 36px |
| `heading-section` | Page-level section titles ("Events in New York", "Latest News") — 24px |
| `heading-sub` | Card headline within a feature tile, sidebar list head — 18px / 600 |
| `body-large` | Long-form article body, feature description decks — 18px / 400 |
| `body` | Standard editorial copy, event description text — 16px / 400 |
| `nav-link` | Top navigation items (Events, Music, Magazine, RA Pro) — 14px / 500 |
| `button-ui` | CTA labels (Buy Tickets, Follow, Subscribe) — 14px / 600 |
| `label-caps` | Section eyebrows, category tags, column headers in listing tables — 11px / 700 / uppercase |
| `caption` | Venue address, door time, event metadata supporting lines — 13px / 400 |
| `caption-bold` | Attending count, ticket price, genre tag inline — 13px / 600 |

### Principles
- **One family does everything.** RA Text runs from 56px editorial hero to 11px listing-row metadata without a secondary face stepping in. The discipline is its own clarity signal.
- **Weight is binary in practice.** 400 for anything a reader consumes; 600–700 for anything a scanner parses. There is no 300 weight on the site.
- **Uppercase is reserved for labels.** Only `{typography.label-caps}` tokens use `text-transform: uppercase` with positive letter-spacing. Body copy, headlines, and nav links are set in title or sentence case.
- **Tight leading on display, moderate on body.** `{typography.display-hero}` runs at 1.07 line-height; `{typography.body-large}` opens to 1.67. The scale reflects reading mode versus scanning mode, not size alone.
- **No decorative letter-spacing on body text.** The 1px letter-spacing in `{typography.label-caps}` is the only departure — and it applies only to 11px uppercase labels where the tracking compensates for optical crowding at small sizes.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The dominant values are `{spacing.sm}` (8px) for within-row element gaps and `{spacing.md}` (16px) for column gutters. `{spacing.lg}` (24px) separates major page sections. `{spacing.xl}` (32px) and above appear only in editorial feature zones and the header. The event listing itself uses the tightest consistent spacing of any major music publication — each row is approximately 48–52px tall with 12px vertical padding, row after row, minimizing the scroll distance between adjacent events.

### Grid & Container
- Max content width: 1280px centered, with a 24px gutter on either side
- Events grid: single-column list at all sizes, full container width
- Three-column layout on desktop: main listing column (wide) + filter sidebar + optional right rail
- Magazine section: 2-up on tablet, 3-up on large desktop, single column on mobile
- Artist/DJ profile: two-column split (bio column left, event listings column right) at desktop
- Filter panel: fixed left sidebar at 240px on desktop, slides in as a sheet on mobile

### Whitespace Philosophy
- **Density is the product.** A user checking RA before a night out needs to see as many events as possible without scrolling. Tight row padding is a feature, not a compromise.
- **Rules, not gaps.** Sections are divided by `1px solid {colors.border}` hairlines rather than large vertical whitespace. The page scrolls as a continuous list, not as separate editorial blocks.
- **Editorial zones breathe.** Feature articles and the Magazine section get generous whitespace (`{spacing.2xl}` to `{spacing.4xl}`) because reading demands it. Event listings do not.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | All event rows at rest, page canvas, article body |
| Hairline (Level 1) | `1px solid {colors.border}` | Event row separators, nav bar bottom border, input edges |
| Row Hover (Level 2) | `{colors.surface-raised}` fill | Event row hover state — tint only, no shadow |
| Strong Rule (Level 3) | `2px solid {colors.border-strong}` | Active filter tab underline, selected section indicator |
| Dropdown (Level 4) | `box-shadow: rgba(0,0,0,0.08) 0px 4px 12px` | Search overlay, date-picker, genre filter dropdown |
| Focus Ring | `2px solid {colors.focus-ring}` | Keyboard focus on all interactive elements |

**Shadow Philosophy**: RA is essentially flat. The event listing — the core product — uses zero shadows. The hierarchy is communicated through typographic weight, color contrast, and hairline borders, not through simulated depth. Shadows appear only in genuine overlay contexts (dropdowns, date pickers, search) and are understated even there. This is both a performance and an aesthetic choice: at event-listing scale, shadows would create visual noise across hundreds of simultaneous rows.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All buttons, all event rows, all input fields, all cards — the absolute default |
| `sm` | 4px | Occasional utility UI elements (tooltips, small helper badges) |
| `pill` | 9999px | Profile avatar crops, genre filter chip active states in some filter views |

RA's corner system is binary: `{rounded.none}` for everything primary. The RA circle logo itself is `{rounded.pill}` at 100% — a deliberate contrast to the otherwise square-cornered system. That circle is brand; everything else is function. Rounding on a button or an input would signal a consumer-app softness that contradicts RA's utility-forward identity.

## Components

### Button Variants

- **`button-primary`** — Coral-red (`{colors.primary}`) fill, white Walfork-weight sans label, square corners, `10px 20px` padding. Used for "Buy Tickets," "Subscribe," and "Follow" actions. On hover: deepens to `{colors.primary-hover}`. The CTA is red because the logo is red; it inherits brand authority.
- **`button-secondary`** — Near-black fill (`{colors.ink}`), white label. Used for secondary CTAs in editorial zones ("Read More," "View All Events"). Same geometry as primary, different signal weight.
- **`button-ghost`** — White background, `{colors.border-strong}` outline, `{colors.ink}` text. Used for tertiary actions on white surfaces — filter toggles, "Save Event," "Share."

### Cards

Feature editorial cards are full-bleed photography with no surrounding card chrome — the image IS the card. Headline in `{typography.display}` overlaid below (not on) the image, category in `{typography.label-caps}` eyebrow. Event cards in the listing have no background, no shadow, no radius: they are composed of event name (`{typography.body}` weight 600), venue + date in `{typography.caption}` at `{colors.ink-muted}`, and genre tags in `{typography.label-caps}`. The event row is separated from its neighbors by `1px solid {colors.border}` and `{spacing.sm}` vertical padding only.

### Inputs

Standard `{rounded.none}` rectangular inputs. Border `{colors.border}` at rest, `{colors.border-strong}` on focus. No glow effect — focus is signaled by the darkened border and the `2px solid {colors.focus-ring}` outline for keyboard users. Search input at the top of event pages is full-column-width with a search icon inset at left and a submit arrow at right.

### Badges / Tags

Genre and category badges are set in `{typography.label-caps}` (11px, 700, uppercase, 1px tracking) on a `{colors.surface}` background with square corners and minimal `3px 6px` padding. Active/selected state inverts to black fill. The tags feel like index-card labels rather than modern rounded chips — the aesthetic matches the utilitarian grid.

### Navigation

Top nav: white `{colors.background}` bar, borderless at top, `1px solid {colors.border}` at bottom. The RA red-circle logomark sits flush-left. Primary nav links (Events, Music, Magazine, RA Pro) in `{typography.nav-link}` weight 500, sentence-case, no underline at rest. Hover: color shifts to `{colors.text-hover}` red. Right cluster: city selector, search icon, account. The nav does not use large horizontal padding — it is compressed to leave maximum width for the content column below.

### Event Row

The signature RA component: a full-width horizontal row with the following anatomy from left to right — event date/time in `{typography.caption-bold}` at `{colors.ink-muted}` (flush-left), venue name, event title in `{typography.body}` weight 600 at `{colors.ink}` (expanding), genre tags in `{typography.label-caps}`, attending count in `{typography.caption}` at `{colors.ink-muted}` (flush-right). Separated from the row below by `1px solid {colors.border}`. Background shifts to `{colors.surface-raised}` on hover. Clicking the row navigates to the full event page.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for the RA logomark, primary CTAs, and link hover states — its power is its rarity in an otherwise monochrome system
- Apply `{rounded.none}` to all buttons, inputs, event rows, and badges — any softening contradicts RA's utilitarian posture
- Use `{typography.label-caps}` (uppercase, 11px, 1px tracking) for all section eyebrows, genre tags, and column headers — it is the single typographic tool that signals "label" rather than "content"
- Maintain `1px solid {colors.border}` hairline rules as the primary structure mechanism on listing pages — borders before whitespace
- Keep event row padding tight (`12px 0px`) — the density of the listing is a usability feature for a specialized audience
- Set the RA circle logomark at `{rounded.pill}` — the circle is the brand's only deliberate softness
- Use `{typography.body}` weight 600 for event titles within the listing row — they need to be scannable, not readable
- Use flush-right alignment for dates/times within the event row — the table-like two-column tension is RA's visual signature

### Don't
- Don't introduce rounded corners on buttons, inputs, or event rows — even `{rounded.sm}` 4px signals a different brand register
- Don't use `{colors.primary}` red for decorative elements, section fills, or typography on white — it is a signal color deployed in two contexts only (logo, CTA/hover)
- Don't add drop shadows to event rows or cards — shadows create elevation noise across a list of hundreds of rows
- Don't introduce a secondary typeface for editorial features — RA Text weight 700 handles display needs without a separate display face
- Don't apply positive letter-spacing to body text or headlines — tracking is reserved for `{typography.label-caps}` only
- Don't use pill-shaped chips for genre filters in primary listing UI — square-cornered `{rounded.none}` badges are the system default
- Don't add background fills to article body zones — the reading column is always white regardless of page section
- Don't reduce the attending-count / ticket-price metadata to secondary color lighter than `{colors.ink-muted}` — it is already the quietest the system permits

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, nav collapses to hamburger, event row metadata collapses to two lines |
| Mobile | 375–767px | Single column listing, filter panel hidden behind drawer, featured image full-width |
| Tablet | 768–1023px | 2-up editorial grid, filter sidebar collapsed, event listing full-width |
| Desktop | 1024–1279px | 3-column layout (filter sidebar + main listing + optional rail), full nav |
| Large Desktop | 1280px+ | Max 1280px container, 3-column, full event row anatomy visible |

### Touch Targets
- Event rows: min 48px height on mobile — comfortable for thumb-scroll scanning
- Primary CTA buttons: `10px 20px` padding gives approximately 40px height; fine for primary actions
- Nav icons (search, account): 44px tap targets enforced via padding
- Genre tag filters: small at desktop (`3px 6px` padding), expanded to `6px 12px` on mobile sheet

### Collapsing Strategy
- **Navigation**: horizontal nav collapses to hamburger at ≤767px; cityname selector persists; logo stays flush-left
- **Filter panel**: fixed left sidebar at desktop converts to a full-screen drawer sheet on mobile
- **Event row**: the full 5-column row anatomy (date / venue / title / genre / attending) collapses to 2–3 lines stacked on mobile — title first, metadata below in `{typography.caption}`
- **Editorial grid**: 3-up → 2-up → 1-up across breakpoints; feature hero image stays full-width at all sizes
- **Typography**: display hero scales from 56px on large desktop to ~32px on mobile; body sizes fixed

### Image Behavior
- Editorial feature images maintain 16:9 crop in grid views; full-width on article pages
- Artist/DJ profile photos appear as square 1:1 crops in listing contexts
- Event flyers: square 1:1 crop in event row (thumbnail, left-aligned) and full-width on event detail page
- All images use `object-fit: cover` — no letterboxing, no distortion

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Primary text: `{colors.ink}` (#0d0d0d)
- Secondary text: `{colors.ink-muted}` (#767676)
- Brand accent / CTA: `{colors.primary}` (#f44336)
- Border / row separator: `{colors.border}` (#e0e0e0)
- Dark footer: `{colors.surface-dark}` (#111111)
- Row hover: `{colors.surface-raised}` (#fafafa)

### Example Component Prompts

- "Build an RA-style event listing row: full-width white background, `12px 0px` padding, `1px solid {colors.border}` bottom border. Left-to-right: date-time in `{typography.caption-bold}` at `{colors.ink-muted}`; venue in `{typography.caption}` at `{colors.ink-muted}`; event title in `{typography.body}` weight 600 at `{colors.ink}` (flex-grow); genre tags in `{typography.label-caps}` on `{colors.surface}` background, `3px 6px` padding, `{rounded.none}`; attending count flush-right in `{typography.caption}` at `{colors.ink-muted}`. On hover: background shifts to `{colors.surface-raised}`."

- "Design an RA-style primary CTA button: `{colors.primary}` background, `{colors.on-primary}` text, `{typography.button-ui}` (14px weight 600, 0.25px tracking), `{rounded.none}`, `10px 20px` padding. On hover: `{colors.primary-hover}` background, same text. No shadow, no border-radius, no transition other than background-color 150ms ease."

- "Create an RA editorial feature card: full-bleed 16:9 photograph with no border-radius, no card chrome, no shadow. Below the image: a `{typography.label-caps}` section eyebrow ('FEATURES') in `{colors.ink-muted}`, then a `{typography.display}` headline (36px weight 700, `{colors.ink}`, -0.25px letter-spacing), then a `{typography.caption}` date byline in `{colors.ink-muted}`. Hover: headline shifts to `{colors.text-hover}` red."

- "Build an RA sticky nav bar: full-width `{colors.background}` white, `1px solid {colors.border}` bottom border, ~56px height. Flush-left: the RA red-circle logomark (24px circle, `{colors.primary}` fill, white RA mark inside, `{rounded.pill}`). Center or flex: nav links in `{typography.nav-link}` (14px weight 500, `{colors.ink}`) — Events, Music, Magazine, RA Pro. Hover: link color snaps to `{colors.text-hover}`. Flush-right: city selector, search icon, account icon. No shadows, no gradient, no background tint."

- "Create an RA genre badge: `{colors.surface}` background, `{colors.ink-muted}` text, `{typography.label-caps}` (11px weight 700 uppercase 1px tracking), `{rounded.none}`, `3px 6px` padding. Active/selected state: `{colors.ink}` background, `{colors.on-dark}` text, same geometry. Use these for genre tags in event rows and filter chips in the sidebar."

- "Design an RA DJ/artist profile header: white canvas, the artist's press photo as a 3:2 image flush-left at ~340px wide; right column flex: artist name in `{typography.display}` (36px weight 700, `{colors.ink}`), resident-city tag in `{typography.label-caps}` (`{colors.ink-muted}`), follower count in `{typography.caption-bold}` (`{colors.ink-muted}`), and a `button-primary` Follow CTA (red, `{rounded.none}`, `10px 20px` padding). Below: a `1px solid {colors.border}` rule, then the upcoming events section header in `{typography.heading-section}`."

### Iteration Guide

1. Start with `{colors.background}` white as the base. RA's canvas is white even in dark ambient contexts — the brightness is intentional for legibility.
2. Structure listing pages with `1px solid {colors.border}` hairline separators — no card shadows, no background panels on rows.
3. Apply `{colors.primary}` to exactly two roles: the RA circle logomark and primary CTA buttons / link hover states.
4. Set all buttons and inputs to `{rounded.none}` — the square corner is the single most recognizable RA UI decision.
5. Use `{typography.label-caps}` (uppercase, 1px tracking) for all section eyebrows, genre tags, and filter labels — it is the system's "label mode," distinct from all body and heading tokens.
6. Keep event row padding tight — `12px 0px` maximum vertical padding. Density is the product.
7. `{colors.ink-muted}` handles all metadata: venue, time, attending count, ticket price. Never go lighter than this in primary listing context.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Resident Advisor. Brand names and trademarks belong to their respective owners.