# MoMA — Marketing Site Design Spec

> Source: moma.org (live DOM, computed styles), 2026-08-01 (desktop 1512px).
> Coverage: homepage (nav, hero, buttons, newsletter input). No login captured — a public museum site. All stylesheets same-origin (`sheetsBlocked: 0`); Klaviyo (newsletter popup) keyframes and Swiper (carousel) are third-party and excluded from the brand motion notes.
> Reality check: hint WRONG on the typeface — it is not Franklin Gothic but a **bespoke MoMA Sans** used at weight **900** almost everywhere. The rest of the hint holds and is enriched: bold, editorial, image-forward, but the real signature is a **black-heavy grotesque on white + a rotating set of vivid accents** (mint #6bdcc5, cyan #00b7f2, red-orange #ff3300, lime #8fc421) applied to buttons, inputs and links, with **square corners (0px), zero shadows** and full-bleed artwork.

## 1. Visual Theme & Atmosphere

Confident, editorial, and unmistakably modern-art: the whole institution speaks in one voice — a heavy grotesque (MoMA Sans, weight 900) set black on white at large sizes with tight negative tracking, exactly like the famous MoMA logotype. Everything is square (0px radius), there are no shadows at all, and structure is drawn with crisp black rules. Colour is where the play is: a rotating palette of vivid accents (mint, cyan, red-orange, lime) lands on buttons, the newsletter field and link states, so the chrome flips between energetic hues while the type stays resolutely black. Full-bleed artwork images carry the emotion; the design gets out of their way. Feels: bold, editorial, confident, modern.

## 2. Color Palette & Roles

### Text
| Token | Hex | Role / usage |
|---|---|---|
| black | `#000000` | Primary text, headings, the MoMA wordmark (dominant) |
| grey | `#666666` | Secondary text, captions |
| grey-2 | `#767676` | Tertiary text, meta |
| dark-grey | `#444444` | Muted button text + a dark section fill |

### Accents (rotating vivid set)
| Token | Hex | Role / usage |
|---|---|---|
| mint | `#6bdcc5` | Button text on black, newsletter input fill |
| cyan | `#00b7f2` | "Tickets" button fill (the primary buy CTA) |
| red-orange | `#ff3300` | Rotating accent (links / highlights, ~93% alpha) |
| lime | `#8fc421` | Rotating accent (section / highlight) |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Page background, cards |
| light-grey | `#eeeeee` | Inset panels, section tints |
| ink-fill | `#444444` | Dark section background variant |
| border | `#000000` | Black rules — 1px hairlines and 3px heavy edges |

Rule: type stays black; the vivid accents (`#6bdcc5` / `#00b7f2` / `#ff3300` / `#8fc421`) rotate across buttons, inputs and link states — that rotation IS the brand energy. `#00b7f2` cyan owns the Tickets CTA.

## 3. Typography Rules

- Font: **MoMA Sans** (bespoke neo-grotesque; a separate **MoMA Sans Bold** file carries the 900 buttons). Weights used: 400 (tiny utility) and 900 (everything expressive). **Preview substitutes Archivo** (open neo-grotesque with a true 900) — noted here so the spec never implies the real face.
- Body: 18px, weight often 900 even at body scale, colour `#000000`. Line-height is tight — equal to font-size (1.0) on headings.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | MoMA Sans | 60 / 60 | 900 | -1.2px |
| Section (h2) | MoMA Sans | 40 / 40 | 900 | -0.8px |
| Sub (h3, on image) | MoMA Sans | 40 / 40 | 900 | -0.8px |
| Body / heavy label | MoMA Sans | 18 / 18 | 900 | -0.36px |
| Utility nav | MoMA Sans | 10 / 10 | 400 | normal |
| Button | MoMA Sans Bold | 18 | 900 | normal |

Pattern: weight is binary — 900 for anything with presence, 400 only for the tiny 10px utility labels. Tight line-height (1.0) and growing negative tracking at scale. No serif, no second family.

## 4. Component Stylings

### Buttons (all square, radius 0px)
- **Tickets (primary)**: bg `#00b7f2` cyan, text `#000000`, radius `0px`, ~h 40px, MoMA Sans Bold.
- **Subscribe (on black)**: bg `#000000`, text `#6bdcc5` mint, radius `0px`, h 48px, 18px/900 — a black button with mint type.
- **Subscribe (on light)**: bg `#ffffff`, text `#444444`, radius `0px`, h 48px.
- **Donate / ghost**: white bg, black text, minimal chrome.
- **Utility nav**: transparent, 10px/400 black (or white on image).

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Button | square, accent or black fill | border-color → `#000000` | `outline: #000 auto 2px` | — | — |
| Newsletter input | mint `#6bdcc5`, 1px `#000` | — | black 2px outline | — | — |
| Link | black | rotating accent / underline | black outline (some suppress it) | — | — |

### Inputs
- Newsletter email: bg `#6bdcc5` mint, border `1px #000000`, radius `0px`, h 48px, 18px, placeholder `#000000`, left padding 16px. A filled, high-contrast field — not a hairline box.

### Cards / panels
- No rounded cards or shadows: content sits on white or `#eeeeee`, separated by black `1px`/`3px` rules. Circular tokens (avatars/dots) use `50%`.

### Nav
- Big black MoMA wordmark (MoMA Sans 900) top-left; a heavy main nav row (Visit / Exhibitions and events / Art and artists / Store) plus a tiny 10px utility row; right side carries Membership ▾, Donate, and the cyan Tickets button.

## 5. Layout Principles

- Full-width layout; hero is a full-bleed artwork image directly under the nav, with the heavy "Welcome" headline and open-hours line below it.
- Generous page spacing (`--page-spacing: 3.2rem`); content in wide columns.
- Sections stack as image + heavy-headline blocks; carousels (Swiper) for exhibition rows.
- Everything aligns to crisp black rules rather than boxes.

## 6. Depth & Elevation

- **Radius: 0px on everything** except `50%` on circular tokens (7×). Square is the rule.
- **No shadows at all** — the shadow census returned empty. Depth is refused; the page is flat.
- Structure = black borders: `1px #000000` hairlines and `3px #000000` heavy edges (plus `1px #ffffff` on dark). No soft elevation anywhere.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| opacity, visibility | 0.3s | ease-in-out | Menus, overlays (dominant, 10×) |
| transform, visibility | 0.3s | ease-in-out | Slide/reveal panels |
| mask-image, opacity | 0.2s | linear | Masked reveals |
| transform | 0.6s | ease | Larger transitions |

- House transition: `opacity/visibility 0.3s ease-in-out`. Custom easings via CSS custom props (`--motion--transition--curve`), including `cubic-bezier(0.4,0,0.2,1)` and `cubic-bezier(0.5,0,0.5,1)`.
- Brand `@keyframes`: `fade-in-out` (4s, rotating hero), `progress-loading`, `spinner`, `fadeOut`. Carousels run on **Swiper** (`swiper-preloader-spin`). No GSAP/Lenis/Framer/Rive/Lottie detected.
- Third-party `klaviyo-*` keyframes belong to the newsletter popup and are excluded. No `prefers-reduced-motion` block was found (`reducedMotionBlocks: 0`).

## 8. Backgrounds, Effects & WebGL

- Art does the work: full-bleed artwork `<img>` elements (not CSS backgrounds, so `rasterLayers: 0`), no background video, no canvas/WebGL, no grain.
- The only gradients are utilitarian: a `linear-gradient(#eeeeee .3 overlay)` tint and text-underline gradients (a 2px black underline drawn as `linear-gradient(to top, …, #000 0-2px, transparent)`), not decorative colour washes.
- No `backdrop-filter`.

## 9. Do's and Don'ts

### Do
- Set headlines in a heavy grotesque (MoMA Sans / Archivo) at weight 900, black on white, with tight line-height (1.0) and negative tracking (-1.2px at 60px).
- Keep every corner square (radius 0px) and use crisp black rules (1px / 3px) for structure.
- Rotate the vivid accents (`#6bdcc5`, `#00b7f2`, `#ff3300`, `#8fc421`) across buttons, inputs and links — keep `#00b7f2` cyan on the Tickets CTA.
- Fill the newsletter input with mint `#6bdcc5` and a 1px black border — a bold field, not a hairline box.
- Let full-bleed artwork carry the emotion; keep the chrome black-and-white around it.

### Don't
- Don't round corners or add any shadow — the design is flat and square.
- Don't use Franklin Gothic or a second type family; MoMA Sans at 900 is the voice.
- Don't mute the accents into pastels — they are meant to be vivid and to rotate.
- Don't set expressive text below weight 900 (400 is only for 10px utility labels).
- Don't add gradient washes or decorative effects over the artwork.

## 10. Responsive Behavior

- A dense breakpoint ladder (21 media queries). Real layout seams: `700`, `768`, `1000`, `1024`, `1216`, `1280`, `1440`, `1550`, `2000px`, plus mobile steps from 360px.
- Mobile: nav collapses to a menu; the heavy headlines scale down; carousels become swipeable.
- No dark theme (`darkSchemeBlocks: 0`, no toggle) and 0 container queries — a single light, image-led theme.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#000000` · Muted `#666666` · Border `#000000` · Accents `#6bdcc5` / `#00b7f2` / `#ff3300` / `#8fc421`
- Font: MoMA Sans (Archivo stand-in) · Weights 900 / 400 · Body 18px · Radius: 0px · Control height: 48px
- Focus: `outline: #000 auto 2px` · Hover: border → `#000` · Tickets CTA: cyan `#00b7f2`

<moma_design_language>
Use the MoMA design language: bold, editorial, image-forward museum design. White canvas, black #000000 type set in a heavy grotesque (MoMA Sans; Archivo stand-in) at weight 900 almost everywhere, with tight line-height (1.0) and growing negative tracking (-1.2px at 60px) — weight is binary, 900 for anything expressive and 400 only for tiny 10px utility labels; no serif, no second family. Every corner is square (radius 0px) and there are NO shadows at all — depth is refused, structure drawn with crisp black rules (1px hairlines, 3px heavy edges). Colour is a rotating set of vivid accents — mint #6bdcc5, cyan #00b7f2, red-orange #ff3300, lime #8fc421 — applied across buttons, inputs and link states while the type stays black; cyan #00b7f2 owns the Tickets CTA, and the newsletter field is filled mint #6bdcc5 with a 1px black border. Surfaces are white or light-grey #eeeeee with occasional #444444 dark sections; full-bleed artwork images carry the emotion. Motion is restrained: opacity/visibility 0.3s ease-in-out with custom cubic-bezier(0.4,0,0.2,1) curves, Swiper carousels, a 4s hero fade — no scroll library. Feels: bold, editorial, confident, modern. Avoid: rounded corners, any shadow, Franklin Gothic or a second family, muting the accents into pastels, expressive text below weight 900, and gradient washes over the art.
</moma_design_language>