# Cooper Hewitt · Design system migration spec

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

> This site is an excellent example of institutional editorial design, using bold typography and immersive imagery to convey authority and cultural significance.

## 1. Identity DNA

The Cooper Hewitt site operates as a cultural anchor in digital space, its design system built with the structural rigor of the museum it represents. Every decision reflects an institutional authority tempered by a clear, public-facing mission to make design culture accessible.

**One-liner:** A bold, institutional design museum site that uses heavy typography and immersive imagery to present exhibitions and programs.
**Keywords:** museum · design · culture · education · exhibition
**Analogy:** A prestigious design museum acting as a cultural anchor, using bold typography and immersive photography to showcase design excellence.

## 2. Color

The palette is a deliberate exercise in institutional contrast: a stark, high-contrast foundation of black and white provides the scholarly gravitas, while a single vibrant orange acts as a signature accent for emphasis and interaction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#797B79` | placeholder |
| `--accent` | `#FF5700` | single accent |
| `--line` | `rgba(255,255,255,0.5)` | divider |

**Color principle:** High-contrast institutional palette with a signature vibrant orange accent.

The principle is one of disciplined contrast, using the accent sparingly to guide the eye and define interactive states without diluting the core monochrome authority.

## 3. Typography

Typography is the system's primary voice, employing bold, uppercase grotesque-sans categories for both display and body text. This creates a monolithic, high-impact hierarchy where weight and case, not font variety, establish the visual order.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.0 | 500 | 0px | Hero headlines and primary navigation links |
| body | 18px | 1.3 | 400 | 0px | Secondary descriptions and UI elements |

**Type rules:**
- All primary text is uppercase.
- Tight line-heights are used for headlines.

## 4. Spacing

A generous padding and margin rhythm governs the system, establishing clear breathing room within the rigid underlying grid structure.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding and margins within a rigid grid system.

## 5. Surfaces

Surfaces are defined by minimal, graphic treatments rather than depth simulation. Borders are thin, semi-transparent lines, and shadows are offset white blocks that create a subtle, paper-like lift from the background.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgb(255, 255, 255) 5px 0px 0px 0px
  - rgb(255, 255, 255) -5px 0px 0px 0px
- **Borders:** 1px solid rgba(255,255,255,0.5)

## 6. Layout

The layout skeleton is built on two primary structures: full-width photographic hero sections that command initial attention, followed by multi-column grids for structured content. This alternation creates a clear visual cadence between immersive imagery and organized information.

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

**Skeleton:** Full-width photographic hero sections followed by multi-column grids.

## 7. Motion & Interaction

Motion serves utility, not flourish. The philosophy favors subtle, purpose-driven transitions—smooth color fades on hover and functional carousel slides—that provide feedback without distracting from the content.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Color and border-color transitions on hover.
  - Simple carousel sliding animations.

- **Hover:** Color transitions on text links and borders.
- **Click:** Standard pointer cursor for interactive elements.
- **Transition:** Smooth color fades on navigation and UI elements.
- **Keyboard:** Visible focus states on interactive elements.

## 8. Voice & Don'ts

The editorial voice is institutional and authoritative, yet remains accessible through clear, direct language and a bold, consistent typographic presentation that avoids decorative excess.

- **Tone:** Institutional, authoritative, yet accessible and engaging.
- **Headline style:** Bold, uppercase, sans-serif, often displayed over photographic backgrounds.
- **CTA style:** Direct and action-oriented, frequently using orange for emphasis.
- **Avoid:** Cursive fonts / Muted or pastel color palettes / Low-contrast text

### Don'ts
- ❌ Don't use lowercase for primary navigation — the screenshot shows all-caps, bold text for menu items.
- ❌ Don't use a complex gradient background — the screenshot shows a solid black background for the header.
- ❌ Don't use a wide, open layout without heavy imagery — the screenshot shows full-width photographic heroes and tight grids.
- ❌ Don't use thin, delicate typography — the screenshot shows a heavy, bold grotesque-sans font for display text.
- ❌ Don't avoid white-background text overlays — the screenshot shows headlines placed directly over busy photos on white rectangles.
- ❌ Don't use a muted, monochrome-only palette — the screenshot shows a high-contrast black and white scheme with a vibrant orange accent.

What the system deliberately avoids are cursive type, muted palettes, and low-contrast text—choices that would compromise its authoritative clarity.

## System Prompt (paste into AI tool)

```
Design a robust museum and cultural institution website with a strong editorial focus. The identity is bold, institutional, and authoritative, featuring a black-and-white core palette with a signature orange accent. Typography consists of bold, uppercase grotesque-sans categories for both display and body text, creating a high-impact visual hierarchy. Critical constraints: maintain all primary text in uppercase, use full-width immersive photographic heroes with white-background text overlays for maximum readability, and ensure a rigid grid-based layout that balances large imagery with clear navigation. The aesthetic should be sophisticated yet accessible, reflecting a world-class design museum.
```