CURATED · OPEN · FREE

Wieden+Kennedy

A bold, cinematic agency portfolio showcasing high-impact creative work through immersive photography and large-scale typography.

agencyadvertising

↓ Download design system (19 MB)Open in OpenDesign

Visit: https://www.wk.com

📦 Browse pack contents →

Identity DNA

CreativeBoldGlobalArtisticAdvertising

A cinematic film festival program

Color

#FFFFFFInk

#ADB5BDInk soft

#000000BG

#6C757DMuted

rgba(108,117,125,0.3)Line

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

Typography

grotesque-sans

display68px · 300
h232px · 300
body16px · 300

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Asymmetric layout with large padding blocks (75px, 96px) to create open, cinematic breathing room

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

Thin 1px borders used sparingly, mostly for structural separation

rgba(0, 0, 0, 0.25) 0px 0px 5px 0px

Layout

1920container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

250msmicro

500mssmall

750msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Opacity fades (0.75s) for content transitions · Transform movements (0.5s) for scroll-based reveals · Color transitions (0.25s) for interactive states

Cursor changes to pointer on interactive elements; subtle color or opacity shifts · Standard pointer interaction

Components

button Minimal text-based buttons, sometimes uppercase
card Large photographic cards without visible borders, relying on image edges
chip None observed
input None observed
hero Full-viewport cinematic imagery with large, light-weight typography overlaid at the bottom-left

Voice & Don'ts

Tone Confident, understated, and artistic
Headlines Large, light-weight (300), lowercase or title-case with minimal punctuation
CTAs Clean, uppercase text links

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
Avoid: Avoid cluttered layouts or busy background patterns
Avoid: Avoid heavy bold weights (stick to 300-500 range)
Avoid: Avoid bright neon or saturated accent colors
Avoid: Avoid complex navigation menus; keep it minimal
Avoid: Avoid decorative serif fonts
Avoid: Avoid rounded corners on primary UI elements

Inside the pack — real screenshots

Wieden+Kennedy — 桌面首屏（hero） — 桌面首屏（hero）

Wieden+Kennedy — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko