---
version: alpha
name: MUBI
description: A deep, warm near-black canvas where editorial restraint and curated cinema meet — Suisse Int'l at featherweight tracking, a single amber-cognac accent, and full-bleed film stills as the atmosphere of the entire interface.

colors:
  # Primary canvas + surfaces
  background: "#0a0a0a"          # /* estimated */ deep warm near-black — MUBI's signature void, warmer than pure #000
  surface: "#161616"             # /* estimated */ slightly elevated dark surface — film cards, rail backgrounds
  surface-elevated: "#1e1e1e"    # /* estimated */ raised panels — modals, dropdowns, hover surfaces
  surface-light: "#f5f2ee"       # /* estimated */ warm off-white — marketing/landing alternating sections

  # Ink / text
  ink: "#ffffff"                 # primary white text on dark canvas
  ink-secondary: "#a8a29e"       # /* estimated */ warm stone gray — supporting metadata, captions
  ink-muted: "#6b6560"           # /* estimated */ dimmed — de-emphasized labels, placeholders
  on-primary: "#0a0a0a"          # near-black text on amber accent surfaces
  on-surface-light: "#1a1714"    # /* estimated */ near-black on warm-white sections

  # Brand accent — MUBI's signature amber-cognac
  primary: "#e8a87c"             # /* estimated */ warm amber-cognac — the single chromatic accent; CTAs, highlights, focus rings
  primary-dark: "#c9855a"        # /* estimated */ deeper amber — hover/pressed state

  # Interactive states
  link: "#e8a87c"                # /* estimated */ same amber — inline links inherit accent
  focus-ring: "#e8a87c"          # /* estimated */ amber focus ring, consistent with accent

  # Semantic
  error: "#e05252"               # /* estimated */ muted red — form validation, destructive actions

  # Borders + dividers
  border: "#2a2825"              # /* estimated */ warm dark divider — barely visible on dark canvas
  border-subtle: "#1f1d1b"       # /* estimated */ hairline between sections on dark

  # Shadow tints (opaque approximations — Google format requires hex, no rgba)
  shadow-deep: "#000000"         # /* was rgba(0,0,0,0.5) — film card hover drop; Google format requires hex */
  shadow-warm: "#0d0b09"         # /* was rgba(0,0,0,0.3) warm-tinted — modal/overlay depth; Google format requires hex */

typography:
  display-hero:
    fontFamily: "Suisse Int'l, Helvetica Neue, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -1.5px
  display:
    fontFamily: "Suisse Int'l, Helvetica Neue, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: -0.75px
  heading-section:
    fontFamily: "Suisse Int'l, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.25px
  heading-sub:
    fontFamily: "Suisse Int'l, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Suisse Int'l, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Suisse Int'l, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  nav-link:
    fontFamily: "Suisse Int'l, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "Suisse Int'l, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.1px
  caption:
    fontFamily: "Suisse Int'l, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.1px
  film-title:
    fontFamily: "Suisse Int'l, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Suisse Int'l, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 1px

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

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

components:
  # Global navigation
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    padding: 8px 12px
  nav-link-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 8px 12px

  # Primary amber CTA — "Start watching" / "Subscribe"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px

  # Secondary ghost button — outlined, appears on dark surfaces
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px

  # Ghost / text button — used for "Log in", secondary actions
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  button-ghost-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px

  # Film card — the primary content tile (poster + meta below)
  card-film:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.film-title}"
    rounded: "{rounded.none}"
    padding: 0px
  card-film-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.film-title}"
    rounded: "{rounded.none}"
    padding: 0px

  # Editorial / Now Showing feature card — larger hero tile
  card-feature:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-section}"
    rounded: "{rounded.none}"
    padding: 24px

  # Search / text input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px

  # Badge — "Now Showing", "New", category label
  badge-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  badge-neutral:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    padding: 4px 8px

  # Progress bar (used on "Today's film" countdown)
  progress-bar:
    backgroundColor: "{colors.border}"
    textColor: "{colors.primary}"
    rounded: "{rounded.none}"
    padding: 0px
---

# MUBI Design System

## Overview

MUBI's interface is an editorial act of cinematic conviction. Unlike streaming services that optimize for content volume and discovery algorithms, MUBI curates a hand-picked selection of films — and every pixel of its design reflects that philosophy. The canvas is a deep, warm near-black (`{colors.background}`) — not the aggressive void of Netflix's pure `#000000`, but a dark that carries the faint suggestion of warmth, like the moment before a projection lamp ignites in a darkened room. Film stills and artwork are never dimmed or subordinated: they arrive at full luminance, let breathe by generous negative space, and treated as the primary visual material of every page.

The typographic spine of the system is Suisse Int'l — the Swiss-influenced grotesque from Swiss Typefaces, deployed in weights 300 and 400 almost exclusively. This is a deliberate choice toward lightness over authority: the thinnest viable strokes at display sizes, negative tracking at `{typography.display-hero}` (`-1.5px`) that cinches letterforms into compact editorial blocks without claustrophobia. The result reads as confident quietude — the brand has nothing to prove through typographic aggression. Text is organized in clean hierarchical bands: large light-weight display copy for curatorial statements, followed by compact metadata rendered in `{typography.caption}` with a hint of letter-spacing. The singular chromatic punctuation across the entire dark field is `{colors.primary}` — a warm amber-cognac that appears on CTAs, active states, and the rare accent moment. It is the color of old film celluloid held up to light.

Where A24 is cinematic brutalism, MUBI is cinematic minimalism — everything on the page is in service of the films themselves. The "Now Showing" counter, the 30-film rotating catalog, the editorial notes written with critical authority — all of it wrapped in a system that refuses decorative noise. Hover states reveal depth through film-still pan animations rather than shadow elevations. Negative space is a structural element, not a problem to be solved with content.

**Key Characteristics:**
- Warm near-black body canvas (`{colors.background}`) — a fraction warmer than pure black; never neutral gray
- Suisse Int'l at weight 300 for all display text — lightness as the defining typographic stance
- Display tracking tightened to `-1.5px` at 72px — editorial compression, not aggressive tightening
- Single amber-cognac accent (`{colors.primary}`) — appears exclusively on CTAs, focus states, active indicators
- Zero border-radius on all content containers — flat-plane surfaces that let imagery breathe
- Full-bleed film stills as the primary design surface — not decoration, the page IS the film
- "Now Showing" curatorial card — the signature MUBI interaction, a daily-rotating featured film
- Uppercase eyebrow labels (`{typography.eyebrow}`) in `1px` tracking for section headers and badges
- Warm gray text ramp (`{colors.ink-secondary}` → `{colors.ink-muted}`) — never cool-blue gray
- No gradients on UI surfaces — depth comes from the photography itself, not CSS effects
- Generous macro spacing (`{spacing.4xl}` between sections) — the interface breathes like an art gallery
- Countdown / "Days Remaining" mechanic with a thin progress bar — functional poetry

## Colors

### Primary Canvas
- **MUBI Void** (`{colors.background}`): The page background — a warm near-black that reads as darkness without being cold. The faint warmth is critical: it makes film imagery glow without the alienating contrast of pure black.
- **Card Surface** (`{colors.surface}`): Film card backgrounds, rail sections, and lightly elevated panels. Barely distinguishable from `{colors.background}` — the shift is structural, not atmospheric.
- **Elevated Surface** (`{colors.surface-elevated}`): Hover states, dropdown menus, modal panels. The system's highest dark tier.
- **Warm Off-White** (`{colors.surface-light}`): Alternating marketing sections — warm rather than stark white, maintaining the amber-adjacent palette throughout.

### Brand Accent
- **MUBI Amber** (`{colors.primary}`): The brand's singular chromatic moment — a warm amber-cognac applied to primary CTAs, active states, and focus rings. Never decorative; always functional. Its warmth echoes celluloid, old film posters, and amber cinema house lighting.
- **Amber Deep** (`{colors.primary-dark}`): Hover and pressed state for primary buttons — a deeper cognac that reads as "pressed" without jarring contrast.

### Text Scale
- **Primary White** (`{colors.ink}`): Headings, active navigation, primary body on dark canvas.
- **Stone Gray** (`{colors.ink-secondary}`): Supporting copy, film metadata (director, year, runtime), inactive navigation labels. A warm gray — the warmth is essential.
- **Dimmed** (`{colors.ink-muted}`): Placeholders, disabled states, lowest-emphasis labels.
- **Dark Text** (`{colors.on-surface-light}`): Near-black body text for warm-white marketing sections.

### Borders & Dividers
- **Warm Dark Border** (`{colors.border}`): Hairline dividers between sections and around inputs — nearly invisible on the dark canvas; its role is structural not decorative.
- **Hairline Subtle** (`{colors.border-subtle}`): The quietest section separator — exists primarily to anchor vertical rhythm.

### Semantic
- **Error Red** (`{colors.error}`): Form validation, destructive actions. Muted — the brand refuses garish status colors.

### Shadow Tints
All shadows are warm-black; no cool or tinted shadows exist in this system. `{colors.shadow-deep}` represents deep hover drops (flattened from `rgba(0,0,0,0.5)`); `{colors.shadow-warm}` represents modal halos (flattened from `rgba(0,0,0,0.3)`).

## Typography

### Font Family
- **Primary**: `Suisse Int'l` (Swiss Typefaces), with fallbacks: `Helvetica Neue, Arial, sans-serif`
- **Mono**: None — the system is single-typeface throughout
- **Note**: Suisse Int'l is a licensed commercial typeface. In external implementations, Inter or Helvetica Neue serve as the closest available substitutes; GT America is a stronger stylistic match if available.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference (`{typography.display-hero}`, `{typography.body}`) rather than hardcoding values.

| Token | Use |
|---|---|
| `display-hero` | Curatorial hero statements, landing page hero copy (72px / 300 / -1.5px tracking) |
| `display` | Section hero titles, promotional campaigns (48px / 300 / -0.75px tracking) |
| `heading-section` | Rail titles, section headers, "Now Showing" label (28px / 400) |
| `heading-sub` | Film detail headings, sidebar section titles (20px / 400) |
| `body-large` | Editorial descriptions, curatorial notes, "About" copy (18px / 300 / line-height 1.6) |
| `body` | Film synopses, UI body copy, descriptions (15px / 400) |
| `nav-link` | Navigation items, tab labels (14px / 400) |
| `button-ui` | All button labels (14px / 500) |
| `film-title` | Film title below poster on cards (17px / 400) |
| `caption` | Director, year, runtime metadata; image captions (12px / 400 / 0.1px tracking) |
| `eyebrow` | UPPERCASE section badges — "NOW SHOWING", "NEW", category labels (11px / 500 / 1px tracking) |

### Principles
- **Lightness over authority.** Suisse Int'l at weight 300 is the display default — a deliberate choice that reads as editorial confidence rather than branding assertiveness. Boldness is reserved for `button-ui` at weight 500 and nothing else.
- **Negative tracking only at display scale.** `-1.5px` at 72px, `-0.75px` at 48px, `-0.25px` at 28px. Body text (`15–18px`) tracks at `0px`. No positive tracking except the `eyebrow` label at `1px` for UPPERCASE badge legibility.
- **Uppercase is editorial punctuation.** Only `{typography.eyebrow}` goes uppercase — section labels, badges, category tags. Display and body text is always sentence or title case.
- **Line-height opens at body.** Display sizes run tight (`1.05–1.2`); body copy relaxes to `1.55–1.6` for sustained reading. The transition from display to body is paced to feel like a shift from headline to essay.
- **Single typeface discipline.** Suisse Int'l carries every role. There is no editorial serif for pull-quotes, no mono for technical labels. The system's authority comes from restraint, not variety.

## Layout

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

Macro spacing (`{spacing.4xl}` and `{spacing.5xl}`) governs section breaks — the interface breathes at gallery proportions, not SaaS dashboard density. Film cards within a rail are separated by tighter values (`{spacing.sm}` to `{spacing.md}`) that keep the browsing feel taut while the between-section breathing is expansive.

### Grid & Container
- Max content width: approximately 1200px centered
- Film grids: typically 4–6 columns at desktop, 2:3 poster aspect ratio
- "Now Showing" hero: full-viewport width, constrained-height editorial card at 16:9 or cinematic aspect
- Sidebar / single-column layout on film detail pages: content left, metadata right, ~70/30 split
- Section padding: `{spacing.4xl}` vertical between major bands

### Whitespace Philosophy
- **Negative space as curation signal.** The amount of empty canvas around each film card communicates editorial care — a crowded grid would undermine the "30 hand-picked films" proposition.
- **Vertical rhythm led by content, not chrome.** Navigation is visually minimal; the first full-bleed film still begins immediately below. The page opens on cinema, not on brand.
- **Horizontal padding consistent.** `{spacing.lg}` to `{spacing.xl}` on side gutters at desktop; smaller on mobile but preserved proportionally.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page canvas, all static film cards, section backgrounds |
| Hover Reveal (Level 1) | Film-still pan / zoom animation | Hovered film card — depth via motion, not shadow |
| Surface Step (Level 1.5) | `{colors.surface-elevated}` background shift | Dropdown menus, hovered nav items |
| Modal (Level 2) | `{colors.shadow-warm}` overlay scrim | Dialogs, cookie banner, overlay panels |
| Deep Drop (Level 3) | `{colors.shadow-deep}` directional shadow | Rare — floating controls, video player chrome |
| Focus Ring | `2px solid {colors.focus-ring}` | Keyboard focus on interactive elements |

**Shadow Philosophy**: MUBI's shadow system is nearly invisible. The interface achieves depth primarily through photographic imagery — a full-bleed film still reads as foreground; the dark canvas recedes as background. Hover states on film cards do not add shadows; they initiate a subtle pan-and-scale animation on the poster image itself, implying depth through movement rather than simulated light. Formal shadows appear only at the very top of the stack — modal overlays and floating panels — and even then as warm-black fills rather than colored or tinted shadows. There is no shadow vocabulary for content-level elements.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All film posters, cards, containers, buttons, inputs — the dominant value |
| `sm` | 2px | Rare technical softening — form elements, small interactive controls |
| `md` | 4px | Occasional badge or tag rounding |
| `pill` | 9999px | Not actively used — the system avoids pill shapes entirely |

MUBI's radius philosophy is strict: `{rounded.none}` on everything editorial. A sharp corner aligns with the system's cinematic formalism — it reads like a film frame, a print border, an institutional container. The rare `{rounded.sm}` exists as a technical concession, not a stylistic choice.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card-film}`) rather than reconstructing them.

### Buttons
- **`button-primary`** — The primary CTA: amber `{colors.primary}` fill, near-black `{colors.on-primary}` text, `{rounded.sm}` radius. Used for "Start watching", "Subscribe", "Try for free". The amber fill is the system's only warm accent — its deliberateness communicates importance.
- **`button-primary-hover`** — Deepens to `{colors.primary-dark}` — a cognac press-state that reads as engaged without jarring.
- **`button-secondary`** — Ghost / outlined button for secondary actions on dark surfaces. Transparent fill, `{colors.ink}` text, visible border.
- **`button-ghost`** — Text-only action for "Log in", dismiss, and tertiary navigation. No background, no border — purely typographic.

### Cards & Containers
- **`card-film`** — The primary content unit: film poster at 2:3 aspect, `{rounded.none}`. Below: title in `{typography.film-title}`, director in `{typography.caption}` with `{colors.ink-secondary}`. Hover initiates a CSS scale-and-pan on the poster image — no shadow added.
- **`card-feature`** — The "Now Showing" editorial card: large film still at cinematic aspect, title in `{typography.heading-section}`, curatorial note in `{typography.body-large}`, countdown badge in `{components.badge-primary}`. The system's most complex single component.

### Inputs
- **`input`** — Search field: `{colors.surface}` background, `{colors.ink}` text, `{rounded.sm}` radius. Minimal — the search experience is typographic, not visually elaborate.
- **`input-focus`** — Background steps to `{colors.surface-elevated}`, no color shift — depth rather than accent on focus. Keyboard focus uses `{colors.focus-ring}` ring.

### Badges / Tags
- **`badge-primary`** — Amber `{colors.primary}` fill for "NOW SHOWING", active states. The only saturated element in the badge system.
- **`badge-neutral`** — `{colors.surface-elevated}` background for genre labels, secondary categories. UPPERCASE `{typography.eyebrow}` throughout.

### Navigation
- Top nav: minimal strip, `{colors.background}` fill, no visible border. MUBI wordmark left-aligned in white. Navigation links in `{typography.nav-link}` at `{colors.ink-secondary}`, hover to `{colors.ink}`. Right-aligned: "Log in" ghost link, "Start watching" primary button.
- The navigation does not compete with the page content — it is a functional header, not a brand expression moment.

### Progress Bar
- **`progress-bar`** — Used in the "Now Showing" countdown mechanic: thin horizontal bar, `{colors.border}` track, `{colors.primary}` fill representing days remaining. A functional poetry element that turns the passage of time into a design detail.

## Do's and Don'ts

### Do
- Use `{colors.background}` (warm near-black) for the canvas — never pure `#000000`, which destroys the system's warmth
- Treat full-bleed film stills as structural design elements — size them generously, let them breathe, never dim or scrim them decoratively
- Apply Suisse Int'l at weight 300 for all display text — the lightness is the brand's typographic identity
- Use `{colors.primary}` (amber) exclusively for CTAs, active states, and focus rings — never as decorative fill
- Set `{typography.eyebrow}` to UPPERCASE with `1px` tracking for ALL section labels and badges — this is the system's only uppercase convention
- Apply `{rounded.none}` to all content containers, buttons, film cards, and images — the sharp corner is a formal rule
- Maintain `{spacing.4xl}` between major section bands — generous breathing room is part of the editorial voice
- Use warm gray text (`{colors.ink-secondary}`) for metadata — never cool gray or blue-gray
- Let hover states live in animation (poster scale/pan) rather than shadow or color shifts
- Keep the primary button amber (`{colors.primary}`) as the only warm saturated element per viewport

### Don't
- Don't use pure `#000000` for the background — it loses the warm-cinema register that defines the brand
- Don't add gradients or scrim overlays to film stills — the photography stands on its own authority
- Don't increase Suisse Int'l weight beyond 500 for display text — heavy weights conflict with the editorial lightness principle
- Don't introduce a second chromatic accent — `{colors.primary}` amber is singular; no teal, no blue, no red alongside it
- Don't apply border-radius beyond `{rounded.sm}` to editorial containers — rounded cards are categorically wrong for this system
- Don't use UPPERCASE outside of `{typography.eyebrow}` contexts — display and body text is always sentence or title case
- Don't tighten letter-spacing below `-1.5px` at display scale — beyond that, the type becomes illegible; don't loosen to positive values either
- Don't use cool grays for secondary text — `{colors.ink-secondary}` must carry warmth to stay in family with the amber accent and warm canvas
- Don't add shadows to content-level film cards — depth is expressed through motion, not simulated light
- Don't use the pill radius (`{rounded.pill}`) — it has no role in this system and contradicts the cinematic formalism

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column film grid (2-wide), nav collapses to icon + wordmark only |
| Mobile | 375–767px | 2-wide film grid, navigation as dropdown from hamburger, hero fills viewport |
| Tablet | 768–1023px | 3–4 wide film grid, nav links partially visible, section padding reduces |
| Desktop | 1024–1279px | 4–5 wide film grid, full horizontal nav, dual-panel film detail |
| Large Desktop | ≥1280px | 5–6 wide film grid, content capped at ~1200px, margins expand |

### Touch Targets
- Primary buttons: minimum `44px` effective height
- Film card tiles: the entire poster area is the tap target — generous inherently
- Navigation links: adequate padding for thumb reach
- "Now Showing" feature card: full-width tap area — easy to hit intentionally

### Collapsing Strategy
- **Film grids**: column count reduces (5→4→3→2) rather than poster size shrinking below `~140px` wide
- **"Now Showing" card**: maintains full-bleed at all sizes; typography scales down proportionally
- **Navigation**: full horizontal links collapse to minimal wordmark + hamburger below tablet
- **Section spacing**: `{spacing.4xl}` between bands at desktop → `{spacing.2xl}` at tablet → `{spacing.xl}` at mobile; the gallery pacing compresses but never disappears

### Image Behavior
- Poster images: served at multiple resolutions, `object-fit: cover` within 2:3 aspect containers
- "Now Showing" hero stills: full-bleed, no art direction swap — the same image adapts across breakpoints
- No lazy-load above the fold — the "Now Showing" film is the opening statement, it must load immediately

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Film card surface: `{colors.surface}`
- Primary text: `{colors.ink}`
- Secondary / metadata: `{colors.ink-secondary}`
- Brand accent (CTA, focus): `{colors.primary}`
- Accent pressed: `{colors.primary-dark}`
- Border / divider: `{colors.border}`
- Text on amber: `{colors.on-primary}`

### Example Component Prompts

- "Build a 'Now Showing' editorial hero card. Background `{colors.background}`. Full-bleed film still at cinematic aspect ratio — no scrim, no gradient. Top-left badge: `{components.badge-primary}` with text 'NOW SHOWING' in `{typography.eyebrow}` UPPERCASE. Film title in `{typography.display}` at `{colors.ink}`, tracking `-0.75px`. Below: director and year in `{typography.caption}` at `{colors.ink-secondary}`. Curatorial note in `{typography.body-large}` weight 300, `{colors.ink}`, line-height 1.6. Below that: a thin horizontal progress bar (`{components.progress-bar}`) with label 'X days remaining' in `{typography.caption}` at `{colors.ink-muted}`."

- "Build a film card grid tile. Poster image at 2:3 aspect, `{rounded.none}`, no border. Hover state: CSS `transform: scale(1.03)` with `overflow: hidden` on the container — no shadow added. Below poster: film title in `{typography.film-title}` at `{colors.ink}`, director in `{typography.caption}` at `{colors.ink-secondary}`. Gap between tiles: `{spacing.sm}`. Section heading above the grid: `{typography.heading-section}` at `{colors.ink}`, tracking `-0.25px`."

- "Create a primary CTA button using `{components.button-primary}`. Background `{colors.primary}` (amber), text `{colors.on-primary}` (near-black), `{rounded.sm}` radius, padding `12px 24px`, typography `{typography.button-ui}`. Hover transitions to `{components.button-primary-hover}` (deepens amber). Focus: `2px solid {colors.focus-ring}` ring."

- "Design the top navigation. Background `{colors.background}`. MUBI wordmark left, white SVG. Center or right: navigation links in `{components.nav-link}` (`{colors.ink-secondary}`), hover to `{components.nav-link-hover}` (`{colors.ink}`). Far right: 'Log in' as `{components.button-ghost}`, then 'Start watching' as `{components.button-primary}`. No visible nav border — nav recedes behind the page content, not in front."

- "Build a section with an editorial curatorial statement. Large hero text in `{typography.display-hero}` weight 300, `{colors.ink}`, tracking `-1.5px`, line-height 1.05. Below: supporting paragraph in `{typography.body-large}` weight 300, `{colors.ink-secondary}`, line-height 1.6. Bottom: `{components.button-primary}` 'Explore the collection'. Section background `{colors.surface-light}` (warm off-white) for contrast against surrounding dark sections. Text color on light: `{colors.on-surface-light}`."

- "Build an 'eyebrow + heading' section opener. Eyebrow label in `{typography.eyebrow}` UPPERCASE, `{colors.primary}`, letter-spacing `1px`. Below: section title in `{typography.heading-section}` weight 400, `{colors.ink}`. Spacing between eyebrow and heading: `{spacing.xs}`. Spacing above next content: `{spacing.lg}`."

### Iteration Guide

1. **Start with the canvas and photography.** Set body background to `{colors.background}` (warm near-black). The first visual decision is the film still — place it full-bleed, no scrim, at cinematic aspect. Everything else is commentary on that image.
2. **One accent color only.** `{colors.primary}` (amber) is the single chromatic element — place it on the primary CTA and the "NOW SHOWING" badge. Nowhere else in the default state.
3. **Weight 300 at display sizes.** Every heading above `20px` should be Suisse Int'l weight 300. Resist the urge to bold for emphasis — the lightness IS the brand.
4. **Negative tracking scales with font size.** `-1.5px` at 72px, `-0.75px` at 48px, `-0.25px` at 28px. Body tracks at 0. Apply mechanically.
5. **Warm the gray scale.** `{colors.ink-secondary}` and `{colors.ink-muted}` must carry warmth. If grays drift cool or blue-shifted, they're no longer in system.
6. **Corners are sharp.** `{rounded.none}` on every container, card, and button. The rare `{rounded.sm}` is a technical concession, not a style.
7. **Hover is motion, not shadow.** Film card hover = CSS scale-and-pan on the poster. No box-shadow. No background color change. Motion is the depth signal.
8. **Uppercase only for eyebrows.** UPPERCASE with `1px` tracking lives in `{typography.eyebrow}` — section labels, badges, category tags. Everything else is mixed case.
9. **Gallery spacing between sections.** `{spacing.4xl}` (96px) minimum between major bands. The interface doesn't rush. MUBI curates 30 films — its pacing reflects that deliberateness.
10. **The film is the design.** When in doubt, make the film imagery larger, give it more space, and step the chrome further back. The system earns its refinement by never competing with what it serves.

---

## 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 MUBI. Brand names and trademarks belong to their respective owners.