# Serpentine · Design system migration spec

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

> This site is an excellent example of how bold, architectural typography can drive a high-end cultural brand identity without the need for complex color schemes.

## 1. Identity DNA

The system is modeled as a curated gallery space, where architecture and content exist in deliberate tension. Bold, structural typography forms the load-bearing walls, while photographic backdrops provide serene, expansive surfaces for the artwork itself.

**One-liner:** A refined, editorial museum interface featuring dramatic black-and-white typography and a content-forward layout.
**Keywords:** Cultural · Art · Gallery · Sophisticated · Modern
**Analogy:** A curated gallery space that balances bold architectural typography with serene, photographic backdrops.

## 2. Color

The palette is a strict monochrome, using only black and white to create a high-contrast foundation. This binary choice ensures maximum visual focus on the photographic and artistic content, making color the exception, not the rule.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F2F2F2` | card background |
| `--ink` | `#141414` | body text |
| `--muted` | `#D6D6D6` | placeholder |
| `--line` | `rgba(20,20,20,1)` | divider |

**Color principle:** High-contrast monochrome palette that prioritizes the artwork through stark black and white elements.

The principle is one of reduction; every hue is stripped away to serve the content.

## 3. Typography

The typographic voice is split between two deliberate roles: a bold, uppercase geometric sans-serif for navigation and structural elements, and a refined transitional serif for body copy. This pairing establishes a clear hierarchy, separating the interface's architecture from its narrative text.

- **Display:** geometric-sans
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | Hero headings and logo |
| body | 16px | 1.6 | 400 | 0px | Standard reading text |
| caption | 13px | 1.4 | 700 | 0.1px | Navigation links |

**Type rules:**
- All navigation and UI labels must be set in uppercase geometric sans.
- Article paragraphs must use the transitional serif for readability.
- Maintain tight negative letter-spacing on large display headings.

## 4. Spacing

All spatial relationships derive from a consistent 4px base unit, creating a predictable rhythm that aligns large typographic elements and defines generous gutters.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base unit ensuring clean alignment of large typographic elements.

## 5. Surfaces

Depth is communicated through stark, high-contrast shadows rather than soft gradients. Surfaces are defined by strict 1px solid borders, maintaining sharp, architectural edges throughout the interface.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Shadows:**
  - rgba(0,0,0,0.3) 0px 32px 68px 0px
- **Borders:** Strict 1px solid borders in black or white to maintain sharp edges.

## 6. Layout

The layout skeleton begins with full-bleed photographic hero sections, making an immediate visual statement. Content blocks then follow a wide-margin structure, using generous white space to create a calm, focused reading environment.

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

**Skeleton:** Full-bleed photographic hero sections followed by structured, wide-margin content blocks.

## 7. Motion & Interaction

Motion is treated as a functional refinement rather than a decorative layer. Transitions are smooth and understated, using linear fades and standard easing to maintain a professional, distraction-free experience.

- **Durations:** micro 150ms · small 250ms · medium 500ms
- **Easing:** `cubic-bezier(0.46, 0.03, 0.52, 0.96)`
- **Patterns:**
  - Smooth color and opacity transitions on interactive elements
  - Standard linear fades for modal overlays

- **Hover:** Subtle opacity changes or color inversions on text links.
- **Click:** Immediate visual feedback through standard browser focus states.
- **Transition:** 0.25s ease-in-out for color and background changes.
- **Keyboard:** Standard focus-visible outlines using browser defaults.

## 8. Voice & Don'ts

The editorial voice is authoritative and culturally sophisticated, conveyed through short, punchy all-caps headlines and direct, unadorned calls to action. The system deliberately avoids playful language, vibrant accents, and rounded forms to preserve a serious, curated aesthetic.

- **Tone:** Authoritative, culturally sophisticated, and minimalist.
- **Headline style:** Short, punchy, all-caps commands that grab attention.
- **CTA style:** Direct and unadorned, using plain text buttons or simple arrows.
- **Avoid:** Avoid playful or overly casual language. / Avoid decorative or script-style fonts. / Avoid rounded corners on primary UI elements. / Avoid excessive use of vibrant colors. / Avoid drop shadows on standard buttons. / Avoid cluttered or dense layouts.

### Don'ts
- ❌ don't use rounded corners — screenshot shows strict sharp 0px radius on all containers
- ❌ don't use decorative script fonts — screenshot shows bold geometric sans and transitional serif only
- ❌ don't use playful, vibrant colors — screenshot shows a strict high-contrast black and white palette
- ❌ don't use heavily shadowed buttons — screenshot shows flat, solid-fill buttons with simple borders
- ❌ don't use small, hidden navigation — screenshot shows bold, uppercase text links in the header
- ❌ don't use dense, cluttered grids — screenshot shows generous white space and full-bleed photography

It is defined as much by what it refuses—decorative fonts, vibrant colors, and cluttered layouts—as by what it employs.

## System Prompt (paste into AI tool)

```
Design a premium, editorial art gallery interface that prioritizes visual content and sophisticated typography. Use a high-contrast monochrome palette of deep black (#141414) and stark white (#FFFFFF). The typography must pair a bold, uppercase geometric sans for structural headings and navigation with a refined transitional-serif for body copy. Layouts should be clean, spacious, and content-forward, utilizing large photographic backgrounds. Strictly avoid rounded corners, playful fonts, and vibrant accent colors to maintain a serious, curated aesthetic. All UI elements must be sharp, minimalist, and functional.
```
