# SFMOMA · Design system migration spec

> Source: https://www.sfmoma.org  ·  Curated by OpenDesign  ·  en

> A masterful example of balancing institutional authority with modern, photography-led editorial design, using extreme white space to give content room to breathe.

## 1. Identity DNA

This design system functions as a modern art gallery's digital foyer, translating the physical experience of spacious white walls and monumental art into a screen-based interface. The entire framework is built to foreground photography and bold typographic statements, establishing an institutional presence that is both authoritative and inviting.

**One-liner:** Bold, photography-led editorial design for a world-class modern art museum.
**Keywords:** Museum · Art · Institution · Gallery · Exhibition
**Analogy:** A modern art gallery's digital foyer, prioritizing large-scale photography and bold typography to evoke a physical gallery experience.

## 2. Color

The palette is a study in restraint and contrast, built on a stark white base and deep charcoal ink. A singular, vibrant red accent is reserved exclusively for interactive elements and membership, acting as a precise navigational beacon.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F7F7F7` | card background |
| `--ink` | `#2D3033` | body text |
| `--muted` | `#636666` | placeholder |
| `--accent` | `#FF483B` | single accent |
| `--line` | `rgba(45, 48, 51, 1.0)` | divider |

**Color principle:** 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.

The principle is clarity through contrast: the white canvas makes the charcoal text authoritative and the red accent unmistakably functional.

## 3. Typography

Typography establishes a clear hierarchy of voice. Headings employ a heavy, geometric display sans-serif for immediate impact, while body text relies on a highly legible humanist sans-serif for comfortable reading.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.0 | 500 | -0.5px | Section titles and primary headings |
| body | 16px | 1.5 | 400 | 0px | Main body copy and descriptive text |
| caption | 14px | 1.6 | 400 | 0px | Secondary details and captions |
| overline | 12px | 1.2 | 400 | 0.5px | Uppercase labels like 'NOW ON VIEW' |

**Type rules:**
- 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.

## 4. Spacing

The rhythm is defined by generous vertical spacing, creating a sense of openness and calm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 120 px
- **Rhythm:** Generous vertical spacing, with large 120px top padding for major content blocks to create a sense of openness and physical gallery space.

## 5. Surfaces

Depth is suggested through minimal means—a single, subtle shadow on primary components and a crisp, thin border to define key boundaries. The surface remains predominantly flat and bright.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgba(68, 73, 76, 0.2) 0px 3px 15px 0px
- **Borders:** 1px solid rgba(45, 48, 51, 1.0)

## 6. Layout

The layout skeleton is a clean, single-column structure that allows primary content to span the full viewport width. This framework prioritizes massive imagery, using the screen's edge-to-edge expanse to emulate a gallery wall.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is understated and functional, serving to confirm interaction rather than distract. Smooth, brief transitions on transform and opacity provide feedback without disrupting the editorial focus.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transitions on transform and box-shadow for interactive elements (0.4s).
  - General 0.2s transitions for state changes.

- **Hover:** Color shifts or subtle transforms on interactive elements, indicated by pointer cursors.
- **Click:** Immediate response with standard link behavior.
- **Transition:** Global 0.2s transitions applied to all elements for smooth state changes.
- **Keyboard:** Standard browser focus rings for accessibility.

## 8. Voice & Don'ts

The editorial voice is institutional and authoritative, yet remains accessible through clear, concise language. Headlines are bold and punchy, while calls to action use direct, standard verbs.

- **Tone:** Institutional, authoritative, yet inviting and accessible.
- **Headline style:** Bold, concise, and punchy, often using display weights to grab immediate attention.
- **CTA style:** Action-oriented and clear, typically using standard verbs like 'Membership' or 'Tickets'.
- **Avoid:** Overly casual language / Cluttered text blocks / Generic stock photography

### Don'ts
- ❌ 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.

The system deliberately avoids rounded corners, decorative elements, dense multi-column text, and the overuse of its signature red, adhering to a strict grammar of clarity.

## System Prompt (paste into AI tool)

```
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.
```
