CURATED · OPEN · FREE

Pentagram

A premium design agency portfolio showcasing a diverse range of multi-disciplinary work.

studiobrandingeditorial

Pentagram screenshot

↓ Download design system (40 MB)Open in OpenDesign

Visit: https://pentagram.com

📦 Browse pack contents →

01

Identity DNA

high-end designportfoliominimalisteditorial

A curated gallery of high-end design projects.

02

Color

#1a1a1aInk

#767676Ink soft

#ffffffBG

#8c8c8cMuted

rgba(26, 26, 26, 1.0)Line

High-contrast black and white foundation with grayscale intermediaries.

03

Typography

grotesque-sans · humanist-sans

display52px · 500
heading32px · 400
body19px · 400
small16px · 400
tiny13px · 400

04

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Consistent 4px base with generous whitespace between sections.

05

Surfaces

sm · 4px

md · 8px

lg · 0px

pill · 9999px

No visible borders; separation is achieved through spacing and background color changes.

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-bleed hero images followed by structured grid sections.

07

Motion & Interaction

150msmicro

300mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth opacity and transform transitions for UI elements. · Subtle scaling or fading on hover.

Subtle color changes or underlines for text links; slight scaling or focus for interactive elements. · Immediate response with smooth transitions.

08

Components

button Minimal text-based navigation links with underline hover effects.
card Large photographic project cards with minimal text overlays.
hero Full-width photographic slideshows with large typographic overlays and descriptive metadata.

09

Voice & Don'ts

Tone Authoritative, professional, and confident.
Headlines Large, clean, and direct typographic statements.
CTAs Subtle text-based calls to action, often integrated into navigation or descriptive blocks.

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.
Avoid: Playful language
Avoid: Loud colors
Avoid: Decorative elements

10

Inside the pack — real screenshots

Pentagram — 桌面首屏（hero） — 桌面首屏（hero）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Pentagram — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

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