# Guggenheim · Design system migration spec

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

> This design is worth including as a prime example of a refined, institutional museum aesthetic that uses typography and layout to let art take center stage.

## 1. Identity DNA

This design system operates like a curated gallery wall in a Brutalist building. Every structural decision, from the stark grid to the restrained palette, exists to frame the artwork without competing with it. The result is a refined, institutional aesthetic that speaks with quiet authority.

**One-liner:** A refined, institutional design system for a world-class art museum.
**Keywords:** museum · art · modern · institutional · refined
**Analogy:** A curated gallery wall in a Brutalist building.

## 2. Color

Color is reduced to its essential function: creating maximum contrast for text and letting art provide the chromatic experience. The strict monochrome palette of deep ink, a secondary gray, and pure white establishes a neutral, high-contrast foundation that never overshadows content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#171717` | body text |
| `--ink-soft` | `#393939` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--line` | `rgba(23,23,23,0.2)` | divider |

**Color principle:** High-contrast monochrome for maximum art focus.

The principle is absolute neutrality—the system's color exists to disappear, leaving only clarity and focus.

## 3. Typography

The typographic voice is that of a clean, geometric grotesque-sans, chosen for its clarity and modern institutional tone. It is deployed with discipline: uppercase for navigation and brand statements, wide letter-spacing for display, and a maintained hierarchy that prioritizes readability over decoration.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.1 | 700 | -1px | Primary brand identity and headings |
| body | 16px | 1.35 | 400 | 0.16px | Main navigation and body text |

**Type rules:**
- Use uppercase for primary navigation and brand elements.
- Use a wide letter-spacing for large display text.
- Maintain high contrast between ink and background.

## 4. Spacing

Spacing follows a consistent 4px base grid, creating a predictable and orderly rhythm across all layouts. Gutters are set at 32px or 40px, providing ample, consistent whitespace that lets components breathe within the structured column grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px grid with consistent 32px/40px gutters.

## 5. Surfaces

Depth is communicated solely through layering and borders, not through shadows or gradients. A single, consistent 1px solid border in the primary ink is the primary tool for defining component boundaries on a flat, clean surface.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid #171717

## 6. Layout

The layout skeleton is built on a full-width media hero that commands initial attention, followed by a wide content grid. This structure prioritizes large, full-bleed imagery, using a 12-column grid to organize information with generous, consistent gutters.

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

**Skeleton:** Full-width media hero followed by a wide content grid.

## 7. Motion & Interaction

Motion is minimal and purposeful, used only to smooth transitions and provide feedback. Animations like fades and opacity shifts are subtle, ensuring they guide attention without adding visual noise or becoming a decorative element.

- **Durations:** micro 100ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Fade-in for hero content on load.
  - Smooth opacity transitions for video overlays.

- **Hover:** Text color change or underline.
- **Click:** Immediate navigation to target section.
- **Transition:** All properties transition for smooth state changes.
- **Keyboard:** Standard tab navigation through menu items.

## 8. Voice & Don'ts

The editorial voice is authoritative, cultured, and inviting, speaking with the clarity of a well-written wall label. Headlines are short, punchy, and uppercase; calls to action are direct and underlined, avoiding any informal or cluttered language.

- **Tone:** Authoritative, cultured, and inviting.
- **Headline style:** Short, punchy, and uppercase.
- **CTA style:** Clear, action-oriented, and underlined.
- **Avoid:** Informal language / Excessive adjectives / Cluttered layouts

### Don'ts
- ❌ Don't use bright accent colors — screenshot shows a monochrome palette.
- ❌ Don't use rounded corners on buttons — screenshot shows sharp, rectangular borders.
- ❌ Don't use drop shadows on elements — screenshot shows flat, clean surfaces.
- ❌ Don't use decorative or script fonts — screenshot shows a clean, geometric grotesque-sans.
- ❌ Don't use complex gradients — screenshot shows solid black and white backgrounds.
- ❌ Don't use centered body text — screenshot shows left-aligned navigation and artwork captions.

The system deliberately omits ornament, avoiding rounded corners, drop shadows, gradients, and decorative type to maintain its stark, gallery-like integrity.

## System Prompt (paste into AI tool)

```
This is a refined, institutional design system for a world-class art museum. The visual identity is built on a high-contrast monochrome palette using #171717 for ink and #ffffff for background, with #393939 as a secondary ink. Typography is a custom grotesque-sans category with wide tracking on display elements and clear, functional body text. The layout is grid-based with 32px gutters and a 1280px container, prioritizing large-scale imagery. Critical don'ts include: don't use bright accent colors; don't use rounded corners; don't use drop shadows. The voice is authoritative and cultured, focusing on clear calls to action and uppercase navigation.
```
