---
version: alpha
name: Hollywood Exhibit
description: Editorial gallery minimalism for a New Hollywood photography exhibition — a near-black canvas with bone-white text, a high-fashion serif display for titles paired with a clean grotesque for body, generous letter-spacing on small caps labels, and photography-first layouts where typography defers to the image.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#141414"
  surface-soft: "#1c1c1c"
  ink: "#f4f1ea"
  ink-secondary: "#b8b4ab"
  ink-muted: "#8a8680"

  # Accent — exhibition gold/brass
  primary: "#c9a227"
  primary-soft: "#e6d49a"

  # On-color
  on-primary: "#0a0a0a"
  on-ink: "#0a0a0a"

  # Lines + chrome
  border: "#2a2a2a"
  border-strong: "#3d3d3d"
  overlay-backdrop: "#050505"

  # Light-mode inversion (editorial gallery wall)
  paper: "#f4f1ea"
  paper-ink: "#141414"
typography:
  display-hero:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.5px
  display-serif:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -0.25px
  section-heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  card-title:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.40
    letterSpacing: 2.4px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.70
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0.6px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 1.6px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 32px
  2xl: 48px
  3xl: 80px
  4xl: 128px
rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  pill: 9999px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    borderColor: "{colors.border-strong}"
  eyebrow-label:
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 6px 12px
    borderColor: "{colors.border}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
    borderColor: "{colors.border}"
  photo-frame:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.none}"
    borderColor: "{colors.border-strong}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 14px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    padding: 24px 32px
    borderColor: "{colors.border}"
---

# Hollywood Exhibit Design System

## Overview

Hollywood Exhibit is the visual identity for ELLE & Esquire's New Hollywood Photography Exhibition at the Hearst Tower in New York City. The design speaks the language of the gallery wall and the glossy magazine spread at once: a near-black canvas (`{colors.background}`) that lets photography glow, bone-white editorial ink (`{colors.ink}`) that reads warm rather than clinical, and a brass accent (`{colors.primary}`) that nods to museum plaques and award statuettes without tipping into ornament.

The typographic core is a deliberate two-voice system. Titles run in a high-contrast serif display (`{typography.display-hero}`) — the couture serif of fashion mastheads, with stark thick-thin strokes that feel both classic and cinematic. Everything functional is set in a clean neutral grotesque (`{typography.body}`), which keeps captions, plaque text, and navigation quiet so the serif and the imagery can carry the drama. Small labels and buttons use wide tracked uppercase (`{typography.eyebrow}`) — the typographic equivalent of an engraved gallery placard.

Crucially, this is a photography-first system. Chrome is almost absent: there are no rounded corners (`{rounded.none}` is the default), no drop shadows, no decorative fills. Structure comes from hairline rules (`{colors.border}`), generous negative space, and the rectangular discipline of a hung print. The interface is built to disappear behind the work it presents.

**Key Characteristics:**
- Near-black gallery canvas (`{colors.background}`) with warm bone-white ink (`{colors.ink}`) — never pure black or pure white
- Two-voice type: high-contrast serif display (Playfair Display) for titles + neutral grotesque (Inter) for everything functional
- Brass/gold accent (`{colors.primary}`) used sparingly — placard plaques, eyebrows, and the single primary CTA
- Square corners everywhere (`{rounded.none}`) — the rectangle of a framed print is the dominant shape
- Wide-tracked uppercase labels (`{typography.eyebrow}`, 2.4px tracking) as engraved-placard voice
- Hairline rules and whitespace instead of cards, shadows, or fills for structure
- Photography-first: typography and chrome defer to the image

## Colors

### Canvas & Ink
- **Gallery Black** (`{colors.background}`): The page canvas — near-black, lets prints glow.
- **Surface** (`{colors.surface}`): Raised panels, cards, photo mats.
- **Surface Soft** (`{colors.surface-soft}`): Secondary panels, hover lift.
- **Bone White** (`{colors.ink}`): Primary text, headings — warm, archival paper tone.
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy, captions, plaque detail.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary metadata, credits.

### Accent
- **Exhibition Brass** (`{colors.primary}`): The single accent — eyebrows, primary CTA, placard rules.
- **Brass Soft** (`{colors.primary-soft}`): Lighter brass for large-area accent text on dark.

### Lines & Chrome
- **Border** (`{colors.border}`): Hairline dividers, card outlines.
- **Border Strong** (`{colors.border-strong}`): Frame outlines, input borders.
- **Overlay Backdrop** (`{colors.overlay-backdrop}`): Modal/lightbox dim behind images.

### Light Inversion (Gallery Wall)
- **Paper** (`{colors.paper}`): Light-mode gallery-wall surface.
- **Paper Ink** (`{colors.paper-ink}`): Text on paper.

## Typography

### Font Family
- **Display / Titles**: `Playfair Display`, fallbacks `Georgia, serif` — high-contrast couture serif.
- **Body / UI**: `Inter`, fallbacks `Helvetica Neue, Arial, sans-serif` — neutral grotesque.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 64px exhibition title — masthead serif impact |
| `display-serif` | Large serif section titles |
| `section-heading` | Standard section headings |
| `card-title` | Photo/feature card titles |
| `eyebrow` | Wide-tracked uppercase placard labels |
| `body-large` | Lead paragraphs, intro copy |
| `body` | Standard reading text |
| `body-small` | Captions, plaque detail |
| `caption` | Metadata, credits, nav |
| `button-ui` | Tracked uppercase button labels |

### Principles
- **Two voices, strict roles**: serif (Playfair Display) announces; grotesque (Inter) informs. Never mix roles.
- **Tracking marks register**: large serif titles run tight; small uppercase labels run wide (1.6px–2.4px) like an engraved placard.
- **Restraint over weight**: the serif's thick-thin contrast does the expressive work; weights stay between 400 and 600.
- **Warm neutrals**: ink is bone-white (`{colors.ink}`), never `#ffffff` — it should read like archival paper.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with oversized gallery gaps (`{spacing.3xl}`–`{spacing.4xl}`) between major sections.

### Grid & Container
- Max content width ~1200px, centered
- Hero: centered single column with the serif title large and isolated
- Photography: asymmetric editorial grids and full-bleed image bands
- Hairline rules (`{colors.border}`) separate sections — no filled dividers

### Whitespace Philosophy
- **Gallery hang**: prints and titles float in deep negative space; emptiness is the framing.
- **Image leads**: typography never competes with photography — it labels and credits.
- **Square discipline**: every container is rectangular; the framed-print rectangle is the motif.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — frames, cards, buttons, inputs |
| `xs` | 2px | Tiny inline chips |
| `sm` | 4px | Small functional elements |
| `md` | 6px | Rare softening |
| `pill` | 9999px | Reserved (rarely used) |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.photo-frame}`).

### Buttons
- **`button-primary`** — Brass fill, dark text, square corners, wide-tracked uppercase. The single emphatic CTA (e.g. "Reserve a Visit").
- **`button-secondary`** — Transparent on canvas with a strong hairline outline (`{colors.border-strong}`).

### Labels & Badges
- **`eyebrow-label`** — Brass, wide-tracked uppercase placard voice above titles.
- **`badge`** — Quiet surface chip with hairline border for tags/dates.

### Cards & Frames
- **`card`** — Surface panel, hairline border, square corners, no shadow.
- **`photo-frame`** — The signature container: surface mat, `{colors.border-strong}` frame line, square corners, holding a single print.

### Inputs
- **`input`** — Surface fill, strong hairline border, square corners. Focus swaps the border to brass (`{colors.primary}`).

### Navigation
- **`nav-bar`** — Transparent-to-canvas header, tracked uppercase links, hairline bottom rule.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`) and ink warm bone-white (`{colors.ink}`)
- Use Playfair Display for titles, Inter for everything functional
- Track uppercase labels wide (1.6px–2.4px) like an engraved placard
- Default to square corners (`{rounded.none}`)
- Let photography lead; keep chrome to hairlines and whitespace
- Use brass (`{colors.primary}`) sparingly — eyebrows, one CTA, placard rules

### Don't
- Don't use pure `#000000` or `#ffffff` — warmth is the brand
- Don't add drop shadows or rounded cards — the rectangle of a frame is the motif
- Don't set body copy in the serif — Inter carries function
- Don't overuse brass; it loses its plaque value if it fills areas
- Don't crowd the image with typography

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, serif title scales down, full-bleed images |
| Tablet | 600–1024px | 2-column editorial grids begin |
| Desktop | 1024–1400px | Full asymmetric gallery layout, max content width |
| Large | >1400px | Centered with generous margins |

### Collapsing Strategy
- Hero serif: 64px → ~40px on mobile, tracking preserved
- Photo grids: asymmetric multi-column → stacked single column
- Nav: tracked link row → minimal menu
- Section gaps: `{spacing.4xl}` → ~`{spacing.2xl}` on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Gallery Black `{colors.background}`
- Heading text: Bone White `{colors.ink}` in Playfair Display
- Body text: Ink Secondary `{colors.ink-secondary}` in Inter
- Accent / CTA: Exhibition Brass `{colors.primary}`
- Borders: hairline `{colors.border}`

### Example Component Prompts
- "Create a hero: near-black background `{colors.background}`. Brass eyebrow in tracked uppercase Inter (12px, 2.4px tracking). Title in Playfair Display 64px weight 600, color `{colors.ink}`. Square brass CTA button `{colors.primary}`, dark text, 16px 32px padding, no radius."
- "Design a photo frame: surface mat `{colors.surface}`, 1px `{colors.border-strong}` frame, square corners, no shadow, holding a single image with a small Inter caption in `{colors.ink-muted}` below."
- "Build a placard label: brass `{colors.primary}`, uppercase, 12px, 2.4px letter-spacing, Inter weight 600."

---

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