The world’s largest independent design consultancy renders its own site as an austere, strictly monochrome 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 raster layers, 24 videos, zero CSS gradients). The whole page is set in one neutral Swiss grotesque, Plain, at weight 400 to 500 — the famous serif Pentagram logotype is the only serif on the page — with hierarchy coming from scale and a -1.04px tracking on 52px project titles rather than from weight or colour. The single accent is a red #e61428 used ONLY as the animated underline that fills from grey to red when you hover a link; the chrome is otherwise entirely monochrome, with footer links using the same mechanic but filling black. Depth is refused completely: zero box-shadows anywhere, flat colour blocks, 1px #333333 and #e3e4e5 hairlines, a 4px dominant radius with 9999px 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 and Swiper carousels over a dense bespoke breakpoint ladder from 599 to 1920. One captured anti-pattern: focus is suppressed site-wide (a:focus sets a transparent 2px outline), for which a visible 2px ink ring is the recommended replacement.
Browse Pentagram in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
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.
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.