# Pentagram · Design system migration spec

> Source: https://pentagram.com  ·  Curated by OpenDesign  ·  en

> This site is a benchmark for premium agency portfolio design, demonstrating how extreme restraint and high-quality photography can create a powerful and sophisticated visual identity.

## 1. Identity DNA

Pentagram's design system operates like a curated gallery: the architecture of the space recedes, allowing the work itself to command the viewer's full attention. Every decision, from the scale of a headline to the width of a margin, is calibrated to serve the portfolio content. The result is a framework of extreme restraint, where the studio's identity is defined not by its own ornamentation, but by the clarity with which it presents others.

**One-liner:** A premium design agency portfolio showcasing a diverse range of multi-disciplinary work.
**Keywords:** high-end design · portfolio · minimalist · editorial
**Analogy:** A curated gallery of high-end design projects.

## 2. Color

The color system is a disciplined monochromatic foundation, built on a high-contrast axis of near-black and white. Intermediary grays provide necessary hierarchy without introducing competing chromatic interest.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#1a1a1a` | body text |
| `--ink-soft` | `#767676` | secondary text |
| `--muted` | `#8c8c8c` | placeholder |
| `--line` | `rgba(26, 26, 26, 1.0)` | divider |

**Color principle:** High-contrast black and white foundation with grayscale intermediaries.

The principle is absolute: photographic content provides all the color, while the interface remains a neutral, supportive stage.

## 3. Typography

Typography is split between two functional roles: a clean grotesque-sans for display purposes and a humanist-sans for body text, both selected for clarity over personality. The scale is expansive, creating a clear editorial hierarchy from main project titles down to metadata.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 52px | 1.0 | 500 | -1px | Main project titles and headlines |
| heading | 32px | 1.2 | 400 | -0.32px | Secondary section titles |
| body | 19px | 1.32 | 400 | normal | Primary body text and project descriptions |
| small | 16px | 1.25 | 400 | normal | Secondary text and captions |
| tiny | 13px | 1.25 | 400 | normal | Navigation and metadata |

## 4. Spacing

A consistent 4px base unit underpins all spacing decisions, creating a reliable vertical rhythm that structures the generous whitespace throughout the page.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base with generous whitespace between sections.

## 5. Surfaces

Surfaces are defined by absence rather than addition. Depth is communicated through the strategic use of whitespace and changes in background color, not through borders or shadows.

- **Radius:** sm 4px · md 8px · lg 0px · pill 9999px
- **Borders:** No visible borders; separation is achieved through spacing and background color changes.

## 6. Layout

The layout skeleton begins with full-bleed photographic heroes that establish immediate visual impact. Subsequent content flows into structured grid sections, creating a rhythm between immersive imagery and organized information.

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

**Skeleton:** Full-bleed hero images followed by structured grid sections.

## 7. Motion & Interaction

Motion philosophy is one of purposeful subtlety, with all transitions governed by a single, smooth cubic-bezier curve. Interactivity is acknowledged through smooth state changes, but never becomes the focus, ensuring the user's attention remains on the portfolio work.

- **Durations:** micro 150ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions for UI elements.
  - Subtle scaling or fading on hover.

- **Hover:** Subtle color changes or underlines for text links; slight scaling or focus for interactive elements.
- **Click:** Immediate response with smooth transitions.
- **Transition:** All 0.3s cubic-bezier(0.4, 0, 0.2, 1)
- **Keyboard:** Standard focusable elements with visible focus indicators.

## 8. Voice & Don'ts

The editorial voice is authoritative and confident, mirroring the studio's professional stature. Language is direct and descriptive, using large typographic statements and subtle, integrated calls to action.

- **Tone:** Authoritative, professional, and confident.
- **Headline style:** Large, clean, and direct typographic statements.
- **CTA style:** Subtle text-based calls to action, often integrated into navigation or descriptive blocks.
- **Avoid:** Playful language / Loud colors / Decorative elements

### Don'ts
- ❌ Don't use a multi-color palette — the screenshot shows a strict monochromatic scheme with photography providing color.
- ❌ Don't use decorative or script fonts — the screenshot shows a clean, functional grotesque-sans typography.
- ❌ Don't use drop shadows or complex gradients — the screenshot shows flat design with clear separation through space.
- ❌ Don't use crowded layouts with small spacing — the screenshot shows generous whitespace and a clear hierarchy.
- ❌ Don't use rounded corners on primary containers — the screenshot shows sharp, rectangular project cards.
- ❌ Don't use bold, saturated accent colors — the screenshot shows that all chromatic interest comes from the photographic content.

The system deliberately excludes playful language, loud colors, and decorative elements, refusing to let the interface compete with the work it presents.

## System Prompt (paste into AI tool)

```
Pentagram is a high-end multi-disciplinary design studio portfolio. The design is characterized by extreme restraint, using a monochromatic color palette (ink: #1a1a1a, bg: #ffffff, muted: #767676) to let photographic project work be the focal point. Typography is clean and functional, using a humanist-sans for body text and a grotesque-sans for display, with sizes ranging from 13px to 52px. Key characteristics include generous whitespace, full-bleed imagery, and minimal UI chrome. Critical design constraints: never use decorative fonts, avoid loud accent colors, maintain large typographic scales, and preserve significant vertical rhythm between content blocks.
```
