# Wieden+Kennedy · Design system migration spec

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

> Wieden+Kennedy's site is a masterclass in letting creative work speak for itself through a restrained, high-impact UI framework.

## 1. Identity DNA

The design system operates like a cinematic film festival program: a stark, high-contrast framework that frames the featured work without overshadowing it. Its identity is built on a foundation of bold, global advertising artistry, channeled through an immersive and understated UI.

**One-liner:** A bold, cinematic agency portfolio showcasing high-impact creative work through immersive photography and large-scale typography.
**Keywords:** Creative · Bold · Global · Artistic · Advertising
**Analogy:** A cinematic film festival program

## 2. Color

The palette is a deliberate monochrome, a stark binary of pure black and white. This restraint ensures the only color and emotional weight comes from the cinematic photography itself.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#ADB5BD` | secondary text |
| `--muted` | `#6C757D` | placeholder |
| `--line` | `rgba(108,117,125,0.3)` | divider |

**Color principle:** High-contrast cinematic palette, relying on stark white text over deep blacks and rich photographic backgrounds

The principle is absolute: the interface is a neutral vessel for the work, never a competing element.

## 3. Typography

The typographic voice is exclusively a clean grotesque-sans, Univers LT Std, used predominantly at a light weight of 300 for a refined, airy feel. This choice prioritizes scale and negative space over weight, creating impact through size and precise spacing.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 68px | 1.2 | 300 | -0.5px | Primary hero headlines |
| h2 | 32px | 1.5 | 300 | 0 | Subheadings and project titles |
| body | 16px | 1.5 | 300 | 0 | Body text and UI elements |

**Type rules:**
- Font weight is predominantly 300 (light) for a refined, airy feel
- Large display sizes (68px) used for impact
- Tight letter-spacing on display headlines

## 4. Spacing

Rhythm is asymmetrical and expansive, governed by large padding blocks that create a cinematic sense of breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Asymmetric layout with large padding blocks (75px, 96px) to create open, cinematic breathing room

## 5. Surfaces

Depth is conveyed through stark separation rather than layering; a single, subtle shadow exists for minimal lift. Structural boundaries are defined by thin 1px borders used sparingly, with primary containers relying on the sharp edges of imagery.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.25) 0px 0px 5px 0px
- **Borders:** Thin 1px borders used sparingly, mostly for structural separation

## 6. Layout

The layout skeleton is full-bleed and immersive, with large photographic heroes overlaid by light-weight text at the bottom-left. This cinematic introduction transitions into a more structured grid for showcasing individual projects, maintaining generous padding throughout.

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

**Skeleton:** Full-bleed photographic heroes with overlaid text, transitioning into structured grid layouts for work showcases

## 7. Motion & Interaction

Motion is deliberate and filmic, focused on content revelation rather than flashy effects. Opacity fades and transform movements are timed to feel polished and smooth, enhancing the narrative flow of the portfolio.

- **Durations:** micro 250ms · small 500ms · medium 750ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Opacity fades (0.75s) for content transitions
  - Transform movements (0.5s) for scroll-based reveals
  - Color transitions (0.25s) for interactive states

- **Hover:** Cursor changes to pointer on interactive elements; subtle color or opacity shifts
- **Click:** Standard pointer interaction
- **Transition:** Smooth opacity and transform animations on scroll and hover
- **Keyboard:** Standard focus management implied by accessible link structures

## 8. Voice & Don'ts

The editorial voice is confident and understated, mirroring the visual system's restraint. Headlines are large, light-weight, and minimally punctuated, while calls to action are clean, uppercase text links.

- **Tone:** Confident, understated, and artistic
- **Headline style:** Large, light-weight (300), lowercase or title-case with minimal punctuation
- **CTA style:** Clean, uppercase text links
- **Avoid:** Avoid cluttered layouts or busy background patterns / Avoid heavy bold weights (stick to 300-500 range) / Avoid bright neon or saturated accent colors / Avoid complex navigation menus; keep it minimal / Avoid decorative serif fonts / Avoid rounded corners on primary UI elements

### Don'ts
- ❌ Don't use heavy font weights — screenshot shows light (300) weights dominating
- ❌ Don't apply bright saturated accent colors — screenshot shows monochromatic/photographic palette
- ❌ Don't use rounded corners on cards or containers — screenshot shows sharp, square edges
- ❌ Don't crowd elements with tight spacing — screenshot shows large padding and whitespace (75px-96px)
- ❌ Don't use decorative or serif typefaces — screenshot shows clean grotesque-sans
- ❌ Don't rely on complex background textures — screenshot shows solid blacks or photographic fills

The system deliberately avoids decorative serifs, rounded corners, and saturated accent colors, ensuring nothing distracts from the work.

## System Prompt (paste into AI tool)

```
This is the Wieden+Kennedy agency website, a portfolio-driven site positioning the agency as a premium, cinematic creative powerhouse. The design relies on a monochromatic base of deep black (#000000) and stark white (#FFFFFF) for UI text, allowing large photographic imagery to provide all color and emotion. The typography is exclusively a clean grotesque-sans (Univers LT Std) set almost entirely at a light weight of 300, with display sizes reaching 68px for maximum impact. The layout is full-bleed and immersive, with generous padding (up to 96px) creating a refined, breathable rhythm. Critical donts: never use bold font weights above 500, never add bright accent colors that compete with the photography, and never use rounded corners on structural components.
```
