---
name: SFMOMA
description: "A masterful example of balancing institutional authority with modern, photography-led editorial design, using extreme white space to give content room to breathe."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#2D3033"
  tertiary: "#FF483B"
  neutral: "#636666"
  bg-soft: "#F7F7F7"
  line: "rgba(45, 48, 51, 1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 32px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  overline:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0.5px"

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

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

---

## Overview

Bold, photography-led editorial design for a world-class modern art museum.

*A modern art gallery's digital foyer, prioritizing large-scale photography and bold typography to evoke a physical gallery experience.*

## Colors

A restrained, high-contrast palette using a stark white base and deep charcoal ink, with a singular, vibrant red accent reserved strictly for interactive and membership elements.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#2D3033`)** — uses `ink` token
- **Accent (`#FF483B`)** — uses `accent` token
- **Muted (`#636666`)** — uses `muted` token
- **Borders (`rgba(45, 48, 51, 1.0)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans

- Headings use a display sans-serif with heavy weights and tight leading.
- Body text uses a highly legible humanist sans-serif.
- Labels and tags are consistently uppercase and tracked out.

## Layout

A single-column, full-width layout for primary content, utilizing massive imagery that spans the entire viewport width.

*Rhythm:* Generous vertical spacing, with large 120px top padding for major content blocks to create a sense of openness and physical gallery space.

## Elevation & Depth

- rgba(68, 73, 76, 0.2) 0px 3px 15px 0px
- Borders: 1px solid rgba(45, 48, 51, 1.0)

## Shapes

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

## Components

- **button:** Ghost buttons or text links with a vibrant red accent color and standard pointer cursor.
- **card:** Content blocks consisting of a large, full-width image followed by a text block, with no visible borders or background containers.
- **chip:** Uppercase text labels used as tags or categories.
- **input:** Search icon trigger with no visible input field until activated.
- **hero:** A full-bleed photographic hero with massive, semi-transparent white display typography overlaid.

## Do's and Don'ts

**Don't:**
- Don't use rounded corners on containers or images — screenshot shows sharp, square edges.
- Don't use drop caps or decorative fonts — screenshot uses a clean, modern display sans-serif.
- Don't overuse the red accent color — screenshot restricts it strictly to primary navigation and interactive elements.
- Don't use dense, multi-column text layouts — screenshot relies on generous white space and single-column reading paths.
- Don't use complex card styles with shadows or borders — screenshot uses borderless, image-forward blocks.
- Don't use dark mode or dark backgrounds — screenshot shows a predominantly bright, white-background interface.

---

## System Prompt (paste into AI agent)

```
This design system is for a world-class modern art museum website, positioning itself as a premium, photography-driven editorial experience. Key colors are a stark white (#FFFFFF) base, deep charcoal ink (#2D3033), and a vibrant red (#FF483B) accent for interactive elements. Typography relies on bold geometric-sans for display and humanist-sans for body text. Critical donts: never use rounded corners or soft borders, avoid cluttering the layout with dense text, and do not apply the red accent color broadly—it is strictly for navigation and calls to action. The layout prioritizes massive imagery and generous whitespace to evoke the physical space of a gallery.
```