---
name: MoMA
description: "An excellent reference for institutional and editorial design, showing how a minimal, sharp-edged UI can effectively foreground complex visual content."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#767676"
  tertiary: "#00B7F2"
  neutral: "#767676"
  bg-soft: "#EEEEEE"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-1.2px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 40px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-0.8px"
  subhead:
    fontFamily: grotesque-sans
    fontSize: 30px
    lineHeight: 1.2
    fontWeight: 900
    letterSpacing: "-0.6px"
  body:
    fontFamily: grotesque-sans
    fontSize: 18px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "-0.36px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

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

---

## Overview

A minimal, photography-led editorial design that lets art breathe.

*A clean, authoritative institutional voice for the world's premier modern art museum.*

## Colors

High-contrast black and white creates a neutral, gallery-like canvas for colorful photography.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#767676`)** — uses `ink-soft` token
- **Accent (`#00B7F2`)** — uses `accent` token
- **Muted (`#767676`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- Use MoMA Sans (grotesque-sans) for all primary text.
- Use tight negative letter-spacing on large display text to emphasize institutional authority.
- Maintain high contrast between heavy weight headings and regular body text.

## Layout

A 12-column grid layout anchored by large, full-width hero photography and strict left-aligned text blocks.

*Rhythm:* A structured 4px base grid ensures consistent alignment for a multi-column layout.

## Elevation & Depth

- Borders: Minimal borders; used only as thick horizontal rules for section dividers.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** Sharp-edged, high-contrast rectangular buttons; primary CTAs are black with white text.
- **card:** Minimal cards relying on strong photography and bold, unadorned typography.
- **chip:** Not prominently featured; relies on standard hyperlinks.
- **input:** Clean, minimalist inputs with bottom borders.
- **hero:** Full-bleed, edge-to-edge photographic hero section with overlapping text content.

## Do's and Don'ts

**Don't:**
- don't use rounded corners — screenshot shows sharp, 0px radius rectangles.
- don't use drop shadows — screenshot shows flat, borderless elements.
- don't use a dark background for primary content — screenshot shows a dominant white canvas.
- don't use decorative serif fonts — screenshot shows a strictly grotesque-sans typographic system.
- don't use complex gradients — screenshot shows solid colors and flat photographic backgrounds.
- don't use heavy borders around cards — screenshot shows clean spacing without outlines.

---

## System Prompt (paste into AI agent)

```
MoMA.org is the digital home of the Museum of Modern Art, utilizing a minimal, authoritative, and photography-led editorial design. The palette is strictly high-contrast, utilizing a primary white background (#FFFFFF) and deep black text (#000000), with a single bright cyan-blue accent (#00B7F2) for ticketing. Typography is set in a custom grotesque-sans font family, featuring heavy weight, large display headlines with tight negative letter-spacing (-1.2px for display). The layout is a clean, unadorned 12-column grid with sharp edges, zero border-radius, and an absence of drop shadows, creating a gallery-like atmosphere. Key critical donts: Do not use rounded corners on any elements. Do not use decorative or serif fonts for headings. Do not use drop shadows or complex gradients. Ensure all large typography uses negative letter-spacing for an institutional feel.
```