# Whitney · Design system migration spec

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

> This site serves as a masterclass in brutalist-adjacent editorial design, proving that extreme restraint and high contrast can create a powerful, premium cultural experience.

## 1. Identity DNA

This design system treats the website as a crisp, architectural exhibition catalog, where every element is cataloged with purpose and clarity. It is a stark, high-contrast editorial interface for a contemporary art museum, built on a foundation of absolute black and white.

**One-liner:** A stark, high-contrast editorial interface for a contemporary art museum, balancing bold typographic hierarchy with generous white space.
**Keywords:** museum · art · american · contemporary · exhibition
**Analogy:** A crisp, architectural exhibition catalog brought to the web.

## 2. Color

The color system is a disciplined monochrome palette, anchored by pure white and black for maximum typographic impact. A single, aggressive high-chroma accent is reserved strictly for primary calls to action, creating a focal point of pure function.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#212121` | secondary text |
| `--muted` | `#949494` | placeholder |
| `--accent` | `#d7ff2d` | single accent |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** High-contrast monochrome palette with a single, aggressive high-chroma accent used sparingly for primary calls to action.

The principle is one of stark contrast and deliberate interruption, using color not for decoration but as a clear signal within a restrained field.

## 3. Typography

Typography establishes a bold, authoritative voice through geometric and grotesque sans-serif categories. Headlines are frequently set in uppercase to command the grid, while body copy remains clean and left-aligned for optimal readability.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 65px | 1.0 | 700 | -1px | Primary headings and site title |
| headline | 35px | 1.1 | 400 | 0px | Section headings and navigation links |
| body | 16px | 1.4 | 400 | 0px | Primary body text and descriptions |
| caption | 15px | 1.5 | 400 | 0px | Secondary text and metadata |

**Type rules:**
- Headlines frequently use uppercase text transformation
- Body copy relies heavily on clean, left-aligned grotesque fonts
- Line heights are relatively tight for display sizes but standard for body copy

## 4. Spacing

A generous vertical rhythm between content blocks and clean horizontal gutters maintain an orderly, uncluttered grid, allowing the content to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing between content blocks and clean horizontal gutters maintain an orderly, uncluttered grid.

## 5. Surfaces

Depth is conveyed through stark means: a single, deep box shadow or sharp 1px solid black borders define key interactive elements. The visual language is one of flat planes and defined edges, not soft elevation.

- **Radius:** sm 2px · md 6px · lg 0px · pill 0px
- **Shadows:**
  - rgba(0, 0, 0, 0.3) 0px 32px 68px 0px
- **Borders:** Sharp 1px solid black borders define navigation elements and primary buttons, with occasional 2px variations for emphasis.

## 6. Layout

The layout is a strict, highly structured grid that organizes complex editorial content into distinct columns. Clear horizontal rule dividers act as architectural elements, segmenting the space with precision.

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

**Skeleton:** A strict, highly structured grid layout with clear horizontal rule dividers and distinct content columns.

## 7. Motion & Interaction

Motion is minimal but precise, with subtle opacity and color transitions applied at very fast micro-durations. This creates a clean, efficient feel where interaction is immediate and responsive, without decorative flourish.

- **Durations:** micro 100ms · small 100ms · medium 200ms
- **Easing:** `ease-out`
- **Patterns:**
  - Subtle opacity and color transitions on interactive elements with very fast micro-durations.

- **Hover:** Subtle opacity changes or background-color shifts on interactive elements.
- **Click:** Immediate visual response via background color or opacity adjustments.
- **Transition:** Fast, uniform 0.1s ease-out transitions applied across background, color, border, filter, opacity, and fill properties.
- **Keyboard:** Standard focus states with visible outlines or color shifts.

## 8. Voice & Don'ts

The editorial voice is authoritative, clear, and culturally significant, mirroring the institution's gravitas. Language is direct and bold, focusing on exhibition titles and primary actions without playful embellishment.

- **Tone:** Authoritative, clear, and culturally significant.
- **Headline style:** Bold, often uppercase, and highly descriptive, focusing on exhibition titles and primary actions.
- **CTA style:** Direct, uppercase, and highly visible, utilizing stark color contrasts.
- **Avoid:** playful language / excessive adjectives / decorative typography / complex sentence structures

### Don'ts
- ❌ don't use soft shadows — screenshot shows sharp borders or single deep box shadows instead
- ❌ don't use muted pastel backgrounds — screenshot shows stark white or pure black backgrounds
- ❌ don't use rounded corners broadly — screenshot shows mostly sharp, 0px or 2px corners
- ❌ don't use decorative serif fonts — screenshot shows exclusively geometric and grotesque sans-serifs
- ❌ don't use gradients — screenshot shows flat, solid blocks of color
- ❌ don't hide uppercase transformations — screenshot shows frequent use of uppercase for navigation and CTAs

The system deliberately avoids soft shadows, rounded corners, decorative serif fonts, and pastel backgrounds, committing instead to sharp edges, stark contrast, and structural clarity.

## System Prompt (paste into AI tool)

```
Design a stark, high-contrast editorial interface for a contemporary cultural institution. Use a pure white (#ffffff) background with absolute black (#000000) typography for maximum impact. Employ a bright, high-chroma accent color, specifically lime green (#d7ff2d), strictly for primary calls to action like ticket booking. Typography must rely on geometric and grotesque sans-serif categories, utilizing bold uppercase transformations for navigation and headings to establish a strong hierarchy. Layout should be highly structured, clean, and spacious, utilizing sharp 1px borders and generous white space rather than soft shadows or rounded corners. Maintain an authoritative, direct tone. CRITICAL DONTs: avoid soft drop shadows (use sharp lines), avoid rounded corners (keep edges square), avoid decorative serifs (stick to sans), and avoid pastel backgrounds (keep it strictly monochrome).
```
