The Museum of Modern Art speaks in one confident, editorial voice: a bespoke MoMA Sans set at weight 900 almost everywhere, black on white at large sizes with tight line-height (1.0) and growing negative tracking (-1.2px at 60px), exactly like the famous MoMA logotype — the queue hint’s “Franklin Gothic” is wrong, this is a purpose-built grotesque and weight is binary (900 for anything expressive, 400 only for the tiny 10px utility labels). Everything is square (radius 0px) and there are NO shadows at all: depth is refused and structure is drawn entirely with crisp black rules, 1px hairlines and 3px heavy edges. Colour is where the play lives — a rotating set of vivid accents (mint #6bdcc5, cyan #00b7f2, red-orange #ff3300, lime #8fc421) lands on buttons, the newsletter field and link states while the type stays resolutely black; cyan #00b7f2 owns the Tickets CTA, the Subscribe button is black with mint text, and the email field is filled mint #6bdcc5 with a 1px black border rather than a hairline box. Surfaces are white or light-grey #eeeeee with occasional #444444 dark sections, and full-bleed artwork images carry the emotion while the chrome gets out of their way. Motion is restrained — opacity/visibility 0.3s ease-in-out with custom cubic-bezier(0.4,0,0.2,1) curves, Swiper carousels and a 4s hero fade, no scroll library and no dark theme. The first museum/cultural-institution entry in the library.
⚠ site only
Browse MoMA in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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) |
| 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.
#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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.