---
version: alpha
name: "MoMA"
description: "White canvas, MoMA Sans weight 900, a stark black-and-white structural field with a single sky-blue ticket accent — institutional authority through deliberate typographic weight"

colors:
  background: "#ffffff"
  surface: "#f5f5f5"      # was rgba(238,238,238,0.3) — flattened to opaque near-white
  surface-dark: "#444444" # footer background, reversed wordmark context
  ink: "#000000"
  ink-secondary: "#444444"
  ink-muted: "#767676"
  primary: "#00a0e3"      # sky-blue — Tickets CTA and collection accent (--color--collection--secondary: #00b7f2 normalized)
  on-primary: "#ffffff"
  primary-container: "#d5faea"  # --color--membership--6 mint tint
  collection-gold: "#fac300"    # --color--collection--background: exhibition/collection featured yellow
  session-pink: "#f752bd"       # --color--session: session-type label color
  brand-red: "#e82046"          # --color--brand--2: events/editorial red accent
  border: "#cccccc"             # --color--gray--ccc mid-gray divider
  border-dark: "#000000"        # structural underline borders on forms and nav
  focus-ring: "#00a0e3"         # matches primary sky-blue
  shadow-soft: "#d9d9d9"        # --color--gray--ccc light shadow approximation
  error: "#e42d00"              # --color--red: error/alert state

typography:
  display-hero:
    fontFamily: "MoMA Sans, Helvetica, Arial, sans-serif"
    fontSize: 60px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -1.2px
  display:
    fontFamily: "MoMA Sans, Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.8px
  heading-section:
    fontFamily: "MoMA Sans, Helvetica, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.6px
  heading-sub:
    fontFamily: "MoMA Sans, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.44px
  body-large:
    fontFamily: "MoMA Sans, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  body:
    fontFamily: "MoMA Sans, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  nav-link:
    fontFamily: "MoMA Sans, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.32px
  button-ui:
    fontFamily: "MoMA Sans, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.32px
  caption:
    fontFamily: "MoMA Sans, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  label-micro:
    fontFamily: "MoMA Sans, Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px

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

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-secondary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  button-ghost-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px 0px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  badge-collection:
    backgroundColor: "{colors.collection-gold}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  badge-session:
    backgroundColor: "{colors.session-pink}"
    textColor: "{colors.background}"
    typography: "{typography.label-micro}"
    rounded: "{rounded.none}"
    padding: 4px 8px
---

# MoMA Design System

## Overview

MoMA's web presence is the digital extension of Alfred Barr's foundational institutional vision — a white wall that exists for the work. The site opens on a near-blinding pure white canvas with the MoMA wordmark rendered in a bold, proprietary grotesque at roughly `{typography.display-hero}` scale, set in `{colors.ink}`. There are no hero gradients, no atmospheric washes, no branded color fields competing for attention. The page behaves like a well-curated gallery: the art and photography supply all the chromatic life the composition needs, while the structural chrome stays in an absolute black-and-white binary. The effect is of a prestige institution that has earned the right to be boring about decoration — and knows it.

The typographic system is built entirely on MoMA Sans, a custom grotesque typeface (served as self-hosted woff2 files: `moma-sans__bold.woff2`, `moma-sans__regular.woff2`, and `moma-sans__regular--italic.woff2`) that references the tradition of geometric institutional sans-serifs — closer to Akzidenz-Grotesk and Franklin Gothic than to Helvetica's Swiss precision or Inter's screen-native warmth. The distinguishing characteristic is its weight behavior: the bold cut (weight 900) runs as the dominant voice across every structural moment — headlines at 60px, subheads at 22px, navigation labels at 16px, button text at 16px — all set in the same ultra-black weight with tight negative tracking ranging from `{typography.display-hero}` at −1.2px down to `{typography.button-ui}` at −0.32px. The regular cut (weight 400) handles reading-flow body copy and captions, creating a binary contrast between dense-black structural text and lighter informational text that echoes the museum's on-wall label conventions.

The sole exception to the black-and-white hierarchy is a sky blue (`{colors.primary}`) reserved exclusively for the "Tickets" purchase CTA and certain collection interface accents. Its appearance is deliberate and scarce — across the homepage, it fires once in the fixed header and once in the primary wayfinding for purchasing access. Secondary category accents include a collection gold (`{colors.collection-gold}`) for featured gallery moments and a vivid pink (`{colors.session-pink}`) for session-type categorization, drawn from MoMA's CSS variables (`--color--collection--background` and `--color--session`). These accents are contextual signals, not decorative choices — they carry meaning the way museum taxonomy labels do.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) — no surface tinting, no atmospheric warmth, all hierarchy through type
- MoMA Sans weight 900 (`{typography.display-hero}`) as the structural voice — tight negative tracking at every display size
- Binary weight system: 900 (bold) for all structural and interactive text; 400 (regular) for reading body and captions
- `{colors.primary}` sky-blue restricted to a single high-intent CTA: Tickets purchase — the only chromatic decision in the primary UI
- `{rounded.none}` on every interactive element — buttons, inputs, cards are hard rectangles throughout
- No drop shadows in the production system — depth from typographic weight contrast and photography
- Bottom-only `3px solid {colors.border-dark}` underline borders on form fields and nav separators — not box borders
- Multi-hue category color system via CSS variables: gold for collection, pink for sessions, blue for secondary collection
- 18 breakpoints from 360px to 2000px — a full-fidelity responsive scaffolding from phone to cinema display
- Self-hosted custom font — MoMA Sans is institution-specific; closest substitutes are Franklin Gothic Heavy or Barlow Condensed Black

## Colors

### Primary Brand
- **White Canvas** (`{colors.background}`): The page's dominant surface — every panel, card, and structural container defaults to white. This is a statement of institutional confidence, not a neutral default.
- **Carbon Black** (`{colors.ink}`): The structural color. Headings, nav labels, body text, and button fills all share this single black — creating a monochromatic type field where hierarchy comes from size and weight, not hue.

### Brand Accent
- **Tickets Blue** (`{colors.primary}`): MoMA's singular chromatic CTA. Applied exclusively to the "Tickets" button in the header and key purchase-intent moments. Sky-blue against white reads as a clear institutional signal — a stamp on a ticket, not a brand flourish.

### Category Color System
- **Collection Gold** (`{colors.collection-gold}`): `--color--collection--background: #fac300` — used as the featured background on collection/gallery highlight contexts. A saturated warm yellow that signals "primary collection feature."
- **Session Pink** (`{colors.session-pink}`): `--color--session: #f752bd` — vivid pink for session/event type labels. Color-coded taxonomy, not decoration.
- **Membership Green Tint** (`{colors.primary-container}`): `--color--membership--6: #d5faea` — soft mint background for membership-tier benefits sections.
- **Brand Red** (`{colors.brand-red}`): `--color--brand--2: #e82046` — editorial/event red for alerts and highlighted programs.

### Gray Scale
- **Footer Dark** (`{colors.surface-dark}`): `#444444` — footer and reversed-logo contexts. The CSS variable `--color--gray--444`.
- **Secondary Ink** (`{colors.ink-secondary}`): `#444444` — secondary text, de-emphasized metadata.
- **Muted Ink** (`{colors.ink-muted}`): `#767676` — tertiary text, placeholder copy, utility captions.
- **Border Gray** (`{colors.border}`): `#cccccc` — `--color--gray--ccc` — card separator rules and subtle dividers.

### Borders
- **Structural Border** (`{colors.border-dark}`): Black `#000000` bottom-only borders on form inputs and section underlines — `0px 0px 3px solid {colors.ink}`. The dominant form-field treatment.
- **Focus Border** (`{colors.focus-ring}`): Sky-blue focus outline matching `{colors.primary}` — `4px solid {colors.primary}` on interactive keyboard focus.
- **Error** (`{colors.error}`): `--color--red: #e42d00` — form validation and alert states.

## Typography

### Font Family
- **Primary**: `MoMA Sans` — a custom proprietary grotesque with Bold and Regular cuts. Self-hosted at `/fonts/moma-sans__bold.woff2`, `/fonts/moma-sans__regular.woff2`, `/fonts/moma-sans__regular--italic.woff2`. Not available on any font service.
- **Fallback stack**: `Helvetica, Arial, sans-serif` — Helvetica is the closest aesthetic match; Franklin Gothic Heavy approximates the bold weight.
- **Note for external implementations**: Franklin Gothic Heavy or Barlow Condensed Black (Google Fonts) approximate the weight-900 display voice. For the regular cut, Inter or Helvetica Neue works as a structural match.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Page hero headlines, museum welcome statements — 60px weight 900, −1.2px tracking |
| `display` | Section openers, exhibition titles, primary navigation callouts — 40px weight 900 |
| `heading-section` | Midweight section labels, featured program titles — 30px weight 900 |
| `heading-sub` | Card titles, event names, UI sub-headings — 22px weight 900 |
| `body-large` | Lead paragraph copy, featured blurbs — 22px weight 400, 1.33 leading |
| `body` | Standard reading text, exhibition descriptions — 18px weight 400 |
| `nav-link` | Navigation items and top-bar labels — 16px weight 900, −0.32px tracking |
| `button-ui` | All button and CTA labels — 16px weight 900, −0.32px tracking |
| `caption` | Image captions, metadata, accessory text — 14px weight 400 |
| `label-micro` | Microlabels, footer taxonomy, secondary badges — 10px weight 400 |

### Principles
- **Weight 900 is the system's structural voice.** Display headings, navigation, buttons, and sub-headings all use the ultra-black cut. Regular (400) appears only in reading-flow body copy and captions — the contrast between these two weights is the entire typographic system.
- **Negative tracking scales with size.** From −1.2px at 60px down to −0.32px at 16px — the larger the type, the tighter it sits. Body text (18–22px regular) tracks at 0 for legibility.
- **Line-height collapses to 1.0 for all weight-900 instances.** Structural text stacks tightly. Body copy opens to 1.33. This creates visual texture contrast between structural and reading registers.
- **No italic display moments.** The italic cut (`moma-sans__regular--italic.woff2`) serves captions and in-text emphasis, never headlines. The system's authority comes from upright weight, not angle.
- **One typeface, no exceptions.** MoMA Sans serves every context — there is no serif pairing, no monospace insertion, no secondary grotesque. The system trusts a single voice across the entire hierarchy.

## Layout

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

The dominant measured value is `8px` (314 occurrences in the dembrandt extraction), confirming a strict 8-point grid. Section breaks run in the `{spacing.3xl}`–`{spacing.4xl}` range, giving exhibition photography and art imagery generous breathing room. Card and component internal spacing runs at `{spacing.xs}`–`{spacing.md}`, tight enough to read as institutional density rather than airy luxury.

### Grid & Container
- Max content width: approximately 1440px centered
- Breakpoints span 360px to 2000px in 18 steps — from phone to 4K museum kiosk
- Primary layout: single column with full-bleed image heroes, then contained text columns beneath
- Exhibition grids: 3–4 columns at desktop, collapsing to 2 then 1 on mobile
- Navigation: fixed top bar, full-width, white background with black text — sticky on scroll

### Whitespace Philosophy
- **The page is the white wall.** Negative space between content blocks is not design timidity; it is the institutional language of the gallery. Art needs room.
- **8px grid, not luxurious spacing.** Unlike luxury e-commerce or fashion brands that pad aggressively, MoMA's spacing is utilitarian — generous where photography lives, compact where text governs.
- **No decorative dividers.** Section separation comes from whitespace and the occasional 1px hairline rule, never from design ornament or background color shifts.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Every surface by default — cards, panels, nav, buttons |
| Hairline (Level 1) | `1px solid {colors.border}` | Card separation, list dividers |
| Underline (Level 2) | `0px 0px 3px solid {colors.border-dark}` | Form fields and nav section bottom borders |
| Focus Ring (Level 3) | `0px 4px solid {colors.primary}` | Keyboard focus on interactive elements |
| Dark Surface (Level 4) | Background shift to `{colors.surface-dark}` | Footer container and reversed-logo contexts |

**Shadow Philosophy**: MoMA has no drop shadows in the production system — confirmed by the dembrandt extraction returning an empty shadows array. Depth in this system is achieved entirely through typographic weight contrast (900 vs 400), color contrast (black on white), and the natural dimensionality of large-format photography. A shadow would compete with the art. The page is flat in the most deliberate sense.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every interactive element — buttons, inputs, cards, nav items, modals, badges |
| `pill` | 9999px | Reserved for search input pills and any future filter chip contexts |

MoMA is essentially a zero-radius system. The screenshot confirms hard rectangular buttons (the "Tickets" sky-blue CTA, the "Plan your visit" black secondary, the "Donate" ghost variant) all with square corners. This is consistent with the institution's design lineage — the same sharp geometry that appears in the building's architecture and the grid-locked typography of the permanent collection catalog.

## Components

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

### Button Variants

- **`button-primary`** — Sky-blue fill (`{colors.primary}`), white text, `{typography.button-ui}`, zero radius, 8×16px padding. Reserved for purchase-intent CTAs: "Tickets", "Buy". The rarest button in the hierarchy; its scarcity makes it legible at a glance.
- **`button-secondary`** — Black fill (`{colors.ink}`), white text, same typography and padding. The workhorse CTA: "Plan your visit", "Become a member", "Reserve". Hover shifts to sky-blue, connecting secondary actions to the Tickets color in their interacted state.
- **`button-ghost`** — No background, no border, `{colors.ink}` text, zero padding. Text-link CTAs — the most frequent interaction pattern on article and exhibition cards. Hover shifts text to `{colors.primary}`.

### Cards

Exhibition and program cards have no border, no shadow, and no radius. The artwork or photography image occupies the upper portion at full bleed within the column width; title in `{typography.heading-sub}` and descriptive text in `{typography.caption}` sit below. Hover surfaces a `{colors.surface}` background wash without any border change. Card separation is achieved through grid gutter whitespace — no chrome exists between cards.

### Inputs

Form inputs use a bottom-only border (`0px 0px 3px solid {colors.border-dark}`) rather than a box border — a refined form pattern that reads as an underline rather than a container. No background tint on the input field. Focus state switches the underline to `{colors.primary}` sky-blue with a white outer glow (`rgb(255, 255, 255) 0px 0px 0px 0.2rem`). Labels in `{typography.caption}`. The email newsletter input (footer and membership contexts) uses this underline treatment on a `{colors.surface-dark}` background with white text.

### Badges / Labels

Category and program type labels use `{typography.caption}` (regular) or `{typography.label-micro}` depending on context, with zero border-radius. The category color system fires here: collection features use `{colors.collection-gold}` badge backgrounds; session-type labels use `{colors.session-pink}`; membership tier markers use `{colors.primary-container}` mint. These are classifying marks, not decorative chips.

### Navigation

Fixed white header, full-width. Left-aligned MoMA wordmark in `{colors.ink}` — the wordmark is a proprietary SVG of the MoMA logotype. Right side: "Membership ∨", "Donate" (ghost), and "Tickets" (`{colors.primary}` fill) — the three tiers of institutional relationship in ascending commitment order. Below the wordmark bar: horizontal secondary nav with "Visit", "Exhibitions and events", "Art and artists", "Store", and a search icon — all in `{typography.nav-link}` weight 900, `{colors.ink}`. No hover color shift to brand accent on primary nav links; underline appears on hover. Sticky scroll behavior with `transform` easing (`0.3s ease-in-out`).

## Do's and Don'ts

### Do
- Use `{colors.background}` white as the only canvas color — the art provides all the chromatic interest the page needs
- Reserve `{colors.primary}` sky-blue exclusively for Tickets and top-priority purchase CTAs — its power is its singularity
- Set all structural text (headings, nav, buttons) in MoMA Sans weight 900 (`{typography.display-hero}` through `{typography.button-ui}`) — the heavy weight is the institutional voice
- Apply tight negative tracking at display sizes: −1.2px at 60px, −0.8px at 40px, −0.6px at 30px — looser tracking breaks the compressed authority
- Use black fill (`{colors.ink}`) for all non-Tickets CTAs — the secondary button is black, not brand-blue
- Maintain `{rounded.none}` on every interactive element — a rounded button corner is a category error in this system
- Use the underline form-field border (`0px 0px 3px solid {colors.border-dark}`) rather than box borders — MoMA's input language is a line, not a container
- Let exhibition photography and art imagery carry all color — never introduce decorative color fills behind content

### Don't
- Don't introduce mid-weight fonts (300, 500, 600) — the system runs on 900 (structural) and 400 (reading) only
- Don't use `{colors.primary}` on headings, section backgrounds, or non-purchase UI — sky-blue is a ticketing signal, not a brand color
- Don't add drop shadows to any element — the system is explicitly shadow-free; shadows would compete with art
- Don't tint the canvas — no warm grays, no cool off-whites, no section backgrounds other than `{colors.surface}` for card hover states
- Don't center-align body text — MoMA's grid is flush-left, institutionally rigorous
- Don't use the category colors (`{colors.collection-gold}`, `{colors.session-pink}`) outside taxonomy contexts — they are classifying marks, not accent decoration
- Don't introduce border-radius at any value on buttons or inputs — not even 2px. The system is hard-edged by conviction
- Don't rely on shadows or borders for card separation — use grid gutter whitespace alone

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile S | 360–375px | Single column, stacked hero, compact nav |
| Mobile | 376–480px | Single column, reduced hero typography |
| Mobile L | 481–600px | Slight content widening, 2-column content grids begin |
| Tablet S | 601–768px | 2-column exhibition grids, full nav visible |
| Tablet | 769–900px | 3-column grids, secondary nav condensed |
| Desktop S | 901–1024px | Full editorial layout, nav at full weight |
| Desktop | 1025–1280px | Max content width approached |
| Desktop L | 1281–1440px | Container centers at ~1440px max-width |
| Wide | 1441–1550px | Expanded side margins, max photography scale |
| Cinema | 1551–2000px | Full 4K / museum-kiosk display tier |

### Touch Targets
- "Tickets" CTA: 40×px+ touch target via padding — primary purchase action
- Navigation links: 44px+ touch height on mobile drawer
- Exhibition cards: full-card touch targets, linking to detail pages
- Search icon: 44×44px minimum via surrounding padding

### Collapsing Strategy
- **Navigation**: Fixed horizontal bar collapses to hamburger at <768px; MoMA wordmark and Tickets button persist
- **Hero typography**: 60px display collapses to approximately 40px on tablet and 30px on mobile — negative tracking maintained
- **Exhibition grids**: 4-column → 3-column → 2-column → 1-column across viewport breakpoints
- **Section spacing**: `{spacing.3xl}` desktop → `{spacing.xl}` tablet → `{spacing.lg}` mobile
- **Photography**: Full-bleed width maintained at all breakpoints via `object-fit: cover`

### Image Behavior
- Exhibition and collection photography: full-bleed hero, `object-fit: cover` within defined aspect-ratio containers
- Art images: maintained at natural aspect ratio within grid columns — no forced cropping of artworks
- No gradient overlays or scrims on photography — the image is the content, not the container
- Lazy-loading below the fold for collection grids and program listings

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — pure white
- Text: `{colors.ink}` — pure black
- Secondary text: `{colors.ink-secondary}`
- Muted text: `{colors.ink-muted}`
- Primary CTA (Tickets): `{colors.primary}` — sky-blue
- Secondary CTA: `{colors.ink}` — black button, white text
- Border (dividers): `{colors.border}`
- Border (structural/focus): `{colors.border-dark}`
- Focus ring: `{colors.focus-ring}`
- Collection badge: `{colors.collection-gold}`
- Session badge: `{colors.session-pink}`

### Example Component Prompts

1. "Create a MoMA homepage hero section on pure white (`{colors.background}`). MoMA wordmark in `{colors.ink}` using MoMA Sans or Franklin Gothic Heavy equivalent, top-left. Below, a 60px headline in `{typography.display-hero}` — weight 900, −1.2px tracking, line-height 1.0, black: 'Welcome'. Below that, a subhead in `{typography.body-large}` — 22px weight 400: 'Explore art and ideas at MoMA.' To the right, hours text in `{typography.body}` and a 'Plan your visit' button: black fill (`{colors.ink}`), white text (`{colors.background}`), `{typography.button-ui}`, zero border-radius, 8×16px padding. Full-bleed exhibition photograph above the text zone, no scrim."

2. "Build a MoMA exhibition card with zero border-radius and no shadow. Full-bleed artwork image at top, 3:2 aspect ratio. Below: exhibition title in `{typography.heading-sub}` — 22px weight 900, black. Date range in `{typography.caption}` — 14px weight 400, `{colors.ink-muted}`. A text-link CTA in `{typography.button-ui}` — 'View exhibition', `{colors.ink}`, hover shifts to `{colors.primary}`. Card background `{colors.background}`. Hover state: background washes to `{colors.surface}`. No card border."

3. "Design the MoMA fixed navigation bar: white background, full-width. Left: MoMA wordmark SVG in `{colors.ink}`. Right group: 'Membership ∨' in `{typography.nav-link}`, 'Donate' ghost text in `{typography.button-ui}` weight 900, and 'Tickets' button — `{colors.primary}` background, white text, `{typography.button-ui}`, zero radius, 8×16px padding. Below: secondary horizontal nav links 'Visit', 'Exhibitions and events', 'Art and artists', 'Store' in `{typography.nav-link}` — 16px weight 900 — plus a search icon. Hover: underline appears. Sticky, `0.3s ease-in-out` transform on scroll."

4. "Create a MoMA email newsletter input on `{colors.surface-dark}` dark background (footer context): input field with bottom-only border (`0px 0px 3px solid {colors.background}`), white text, MoMA Sans 18px weight 400, no background fill on the input. Placeholder in `{colors.ink-muted}`. Adjacent submit button in white fill, `{colors.ink}` text, `{typography.button-ui}`, zero radius. Focus state: border color shifts to `{colors.primary}` sky-blue, box-shadow `rgb(255,255,255) 0px 0px 0px 0.2rem`."

5. "Build a MoMA program/session badge set: all zero border-radius, `{typography.caption}` or `{typography.label-micro}`. Collection-featured badge: `{colors.collection-gold}` background, `{colors.ink}` text — 'Permanent Collection'. Session badge: `{colors.session-pink}` background, white text — 'Late Night'. Membership badge: `{colors.primary-container}` mint background, `{colors.ink}` text — 'Members Free'. Standard label: `{colors.surface}` background, `{colors.ink-secondary}` text — 'Photography'. All 4×8px padding, no radius."

### Iteration Guide

1. **Start with white and black.** `{colors.background}` white canvas, `{colors.ink}` for all text and structural elements. If you find yourself reaching for gray as a surface fill, you are outside the system — use whitespace instead.
2. **Weight 900 is the structural register.** Any text that wayfinding, navigates, or calls to action runs at MoMA Sans weight 900 with negative tracking. If a heading looks too light, increase the weight, not the size.
3. **Sky-blue fires once: Tickets.** `{colors.primary}` belongs to one button — the one that sells access. Every other CTA is black. If you put the blue on a secondary button, you have diluted the signal.
4. **Zero radius, everywhere.** Buttons, inputs, cards, badges — hard rectangles. If a component has a rounded corner, audit whether it came from a third-party widget or framework default and remove it.
5. **No shadows.** If depth is needed, use typographic weight contrast or photography scale. Box shadows break the flat-white institutional language.
6. **Category colors are taxonomy, not decoration.** `{colors.collection-gold}`, `{colors.session-pink}`, `{colors.primary-container}` are used on label badges only — they classify, they do not decorate.
7. **The underline is the input border.** Form fields use `border-bottom: 3px solid {colors.border-dark}`, not a four-sided border. This is the system's signature form treatment.
8. **Photography carries color.** Avoid adding chromatic fills to section backgrounds or content panels — the exhibition and collection imagery does that work. Trust the art.

---

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