# Pentagram — Marketing site Design Spec

> Source: pentagram.com (live DOM, computed styles), 2026-07-31.
> Coverage: logged-out homepage (the work grid). All stylesheets readable
> (sheetsBlocked:0). No login surface exists — Pentagram is a portfolio site.
> Reality check: the queue hint ("design studio — editorial print-derived
> work-grid; under-represented Design category; no portfolio-grid in Done") is
> accurate. The site is a strictly monochrome, image-led catalogue of the firm's
> projects set in ONE neutral grotesque (Plain), with the famous serif Pentagram
> logotype as the only serif and a single red used solely as a link-hover
> underline. It is print-editorial in restraint: zero shadows, flat colour,
> hierarchy from scale and position.

## 1. Visual Theme & Atmosphere

Pentagram's site is a gallery wall: near-black type on white, alternating with
light-grey and occasional full-black bands, every section handing the stage to a
full-bleed project image or video. The chrome recedes to almost nothing — one
grotesque, no shadows, no gradients, hairline borders — so the work reads loudly.
The only colour is a single red that appears only when you hover a link, where an
animated underline fills from grey to red. It is unmistakably a design studio's
own site: confident, editorial, and disciplined to the point of austerity, with
the classic serif Pentagram logotype as the one nod to the printed page. It
deliberately avoids decoration, colour accents in the chrome, rounded softness,
and any sense of a "product". Feels: austere, editorial, monochrome, curatorial.

## 2. Color Palette & Roles

No published `:root` token set — palette read from the census. Strictly
monochrome plus one red.

| Token | Hex | Role / usage |
|---|---|---|
| ink | #1a1a1a | primary text (3119×) |
| grey | #767676 | secondary text / labels |
| faint | #8c8c8c | tertiary / muted |
| on-dark | #ffffff | text on black bands |
| muted-alpha | rgba(0,0,0,.56) | dimmed text over imagery |

| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | primary canvas |
| grey-band | #e3e4e5 | alternate section fill (29×) |
| dark-band | #222222 | dark project band |
| black | #000000 | full-black project band |
| chip-well | rgba(0,0,0,.07) | tag chip fill (220×) |
| button-well | #e8e8e8 (rgba(232,232,232,.8)) | "About the project" button fill |

| Token | Hex | Role / usage |
|---|---|---|
| border-strong | #333333 | 1px control borders |
| border-hair | #e3e4e5 | 1px light hairlines |

| Token | Hex | Role / usage |
|---|---|---|
| accent-red | #e61428 | **link-hover underline only** (never chrome) |

Rules: the chrome is monochrome. Red #e61428 is allowed in exactly one place —
the animated underline that fills on link hover. Never use it as a fill, button
or icon colour.

## 3. Typography Rules

One workhorse family: **Plain** (Optimo's neutral Swiss grotesque, 3990×; open
stand-in Inter/Helvetica Neue). The visible **Pentagram wordmark is a serif
logotype** (the firm's mark). Times appears only 24× as a fallback/italic. There
is no display face — scale and the -1.04px tracking on large titles do the work.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Project title | 52px / 54.6px | 400 | -1.04px |
| Wordmark / nav | 19px / 25px | 500 | normal |
| Section head h2 | 16px / 20px | 500 | normal |
| Body / description | 16–19px / 20px | 400 | normal |
| Search overlay | 32px / 38.4px | 400 | normal |
| Tag / label | 16px | 400 | normal |

Note: weight never exceeds 500; project titles are the only place tracking goes
negative (-1.04px). Everything else is set at normal tracking, weight 400/500.

## 4. Component Stylings

Most "buttons" are plain text links (0px radius, transparent). The two real
control fills are the tag chips and the "About the project" button.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Text link | #1a1a1a, grey underline | underline fills **red #e61428** (animated gradient) | outline transparent 2px¹ | — | — |
| About-the-project | #e8e8e8 fill / #1a1a1a, 4px radius, 36px | bg → rgba(0,0,0,.14) | outline transparent 2px¹ | — | — |
| Tag chip | rgba(0,0,0,.07) fill, ~pill | darkens | — | — | — |
| Filter toggle | grey / #1a1a1a on hover, ::before border | color → #1a1a1a | outline:0¹ | — | — |
| Search field | 1px border, white | — | border → #cccccc, box-shadow none, outline 0¹ | — | — |

¹ Anti-pattern: focus is suppressed everywhere — `a:focus`/`input:focus` set
`outline: transparent solid 2px` and the search field zeroes its outline.
Recommended replacement: a visible 2px `#1a1a1a` (or red #e61428) ring at 2px
offset.

Footer links use the same animated-underline mechanic but fill **#1a1a1a**
rather than red. Nav is a minimal top bar (Work / About / News / Contact /
Archive + search) with the serif logotype at left.

## 5. Layout Principles

The homepage is a single vertical stream of project cards: a text block
(title + description + tags + "About the project") followed by a full-bleed
image or video, alternating white and #e3e4e5 (and occasional black) bands. No
narrow max-width — imagery runs edge to edge. Tag chips sit under each title.
Spacing is generous and print-like; the grid is essentially one column of large
cases with occasional split rows.

## 6. Depth & Elevation

Radius scale is minimal: **4px dominant (233×)**, 8px (11×), and 9999px pills
(13×, for tag toggles). **Zero box-shadows on the entire page** — depth is
refused completely. Structure is 1px borders only: `#333333` (5×) and light
`#e3e4e5` hairlines. Elevation philosophy: flat colour blocks and hairlines,
never a shadow; overlays use backdrop-blur instead (§8).

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| all | 0.3s | cubic-bezier(0.4,0,0.2,1) | house transition (161×) |
| all | 0.4s | cubic-bezier(0.4,0,0.2,1) | larger reveals (56×) |
| all | 0.15s | cubic-bezier(0.4,0,0.2,1) | small controls (40×) |
| opacity | 0.25s | ease | fades (29×) |
| background-color | 0.2s | cubic-bezier(0.25,0.46,0.45,0.94) | hover fills |

House transition: **`all 0.3s cubic-bezier(0.4,0,0.2,1)`**. **GSAP** drives the
scroll/reveal motion. Keyframes: `fadeIn`, `slideInTop`, `scaleIn`, `fadeinout`,
`updown` + `updownNumber1/2/3` (animated stat counters), `swiper-preloader-spin`
(Swiper carousels). **Anti-pattern: no `prefers-reduced-motion` block** despite
GSAP, 24 videos and animated counters — recommend adding one.

## 8. Backgrounds, Effects & WebGL

Image- and video-led: **243 raster background layers** and **24 videos** (project
reels) carry the entire page. **No CSS gradients at all** and no grain/canvas/
WebGL. The only effects are **backdrop-blur** on overlays — `blur(7.5px)`,
`blur(15px)`, `blur(50px)` (sticky nav / search / modal glass). Atmosphere is
100% the work imagery over flat colour bands.

## 9. Do's and Don'ts

### Do
- Keep the chrome strictly monochrome — ink #1a1a1a on white/grey/black bands.
- Set everything in one neutral grotesque (Plain) at weight 400/500.
- Reserve red #e61428 for the link-hover underline only.
- Let full-bleed project images and video carry every section.
- Use 4px radii, hairline borders, and no shadows at all.

### Don't
- Don't add colour to the chrome or use red as a fill/button/icon.
- Don't introduce a second typeface (the serif is the logotype, not a font role).
- Don't use shadows or gradients — the page is deliberately flat.
- Don't exceed weight 500 or add positive tracking to titles.
- Don't copy the suppressed focus outline — give links a visible ring.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| 599 / 600px | phone → small tablet |
| 666 / 755 / 799 / 800px | tablet nav + card reflow |
| 980 / 1039 / 1040px | desktop layout |
| 1599 / 1600 / 1728 / 1800 / 1920px | large-desktop widening / image scale |

A dense, bespoke device-targeted ladder (16 seams, min+max pairs from 599 to
1920). `darkSchemeBlocks: 1` (a single dark-scheme block; the black bands are
content, not a theme). 0 container queries. No user-facing dark toggle.

## 11. Agent Prompt Guide

- Canvas `#ffffff` / grey band `#e3e4e5` · Text `#1a1a1a` · Muted `#767676` · Border `#333333` · Accent (hover only) `#e61428`
- Font: Plain grotesque (stand-in Inter), serif logotype for the mark · Body: 16–19px · Radius: 4px / pill tags · Control height: 36px
- Focus: site suppresses it — use a 2px `#1a1a1a` ring at 2px offset · Hover: link underline fills red #e61428

<pentagram_design_language>
Pentagram's site is an austere, monochrome design-studio work-grid: near-black
ink #1a1a1a on a white canvas that alternates with light-grey #e3e4e5 and
occasional full-black #222222/#000000 bands, every section handing the stage to a
full-bleed project image or video (243 rasters, 24 videos, zero CSS gradients).
The whole page is set in one neutral grotesque, Plain, at weight 400/500 — the
serif Pentagram logotype is the only serif — with hierarchy from scale and a
-1.04px tracking on 52px project titles, not from weight or colour. The single
accent is red #e61428, used ONLY as the animated underline that fills on link
hover; the chrome is otherwise strictly monochrome. Depth is refused entirely:
zero box-shadows, flat colour blocks, 1px #333333/#e3e4e5 hairlines, a 4px
dominant radius with pill tag-toggles, and backdrop-blur (7.5/15/50px) on
overlays instead of shadows. GSAP drives calm all-0.3s cubic-bezier(0.4,0,0.2,1)
reveals plus animated stat counters. Feels: austere, editorial, curatorial.
Avoid: colour in the chrome, red as a fill/button, a second typeface, any shadow
or gradient, weights above 500, or the site's own suppressed (transparent) focus
outline.
</pentagram_design_language>