pentagram.com Designsystem

---
version: alpha
name: "pentagram.com"
description: "Design system extracted from https://www.pentagram.com/ on 2026-09-28"
colors:
  background: "#222222"
  foreground: "#ffffff"
  muted-foreground: "#767676"
  primary: "#ededed"
  on-primary: "#111111"
  border: "#333333"
typography:
  headline-display:
    fontFamily: "Plain"
    fontSize: "19px"
    fontWeight: 500
    lineHeight: "1.32"
  headline-lg:
    fontFamily: "Plain"
    fontSize: "19px"
    fontWeight: 500
    lineHeight: "1.32"
  headline-md:
    fontFamily: "Plain"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.25"
  body-md:
    fontFamily: "Plain"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.25"
  label-md:
    fontFamily: "Plain"
    fontSize: "13px"
    fontWeight: 500
    lineHeight: "1.4"
  button:
    fontFamily: "Plain"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.25"
rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "24px"
  5: "32px"
  6: "48px"
  7: "64px"
  8: "96px"
components:
  button-ghost:
    backgroundColor: "#e8e8e8cc"
    textColor: "#1a1a1a"
    typography: "{typography.button}"
    rounded: "0px"
    height: "44px"
    padding: "0px 0px"
  button-primary:
    backgroundColor: "#ffffff1f"
    textColor: "#ffffff"
    typography: "{typography.button}"
    rounded: "4px"
    height: "34px"
    padding: "7px 8px"
  input:
    backgroundColor: "#222222"
    rounded: "0px"
    height: "60px"
---

# pentagram.com

## Overview

Pentagram — The world’s largest independent design consultancy: Pentagram is the world’s largest independent design consultancy. The firm is owned and run by 24 partners, each of whom are leaders in their individual fields.

Sharp, squared-off controls, flat surfaces separated by hairlines, restrained display type at 19px / 500, a single neutral accent on neutrals. The site ships in dark mode by default (dark surfaces, light type). Measured from 3839 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#222222` | Page background |
| foreground | `#ffffff` | Primary text |
| muted-foreground | `#767676` | Secondary text, captions |
| primary | `#ededed` | Accent: primary buttons, links, focus |
| on-primary | `#111111` | Text on the accent |
| border | `#333333` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#222222`, `#ffffff`, `#000000`, `#e3e4e5`.

The accent `#ededed` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Plain** for h1, h2, h3, body, button: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Plain | 19px | 500 | 1.32 | normal |
| headline-lg | Plain | 19px | 500 | 1.32 | normal |
| headline-md | Plain | 16px | 400 | 1.25 | normal |
| body-md | Plain | 16px | 400 | 1.25 | normal |
| label-md | Plain | 13px | 500 | 1.4 | normal |
| button | Plain | 16px | 400 | 1.25 | normal |

Type scale in use: 13px, 16px, 19px, 32px, 52px. Base body size 16px.

The H1 renders at 19px / 500, start aligned, up to 103px wide. Sample: "Pentagram".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 24, 32, 48, 64, 96 (px).
- Flex and grid gaps: 8, 12, 16, 24, 32, 48, 96 px.
- Content max width: 1392px, centred.
- Breakpoints: 600px, 799px, 800px, 1039px, 1040px.
- Header: 60px tall, static, background `rgba(0, 0, 0, 0)`; 6 nav links at 19px / 500 (Pentagram · Work · About · News · Contact · Archive).

## Elevation & Depth

No box shadows in use; depth comes from hairline borders and surface tints (flat design).

## Shapes

- Buttons: 4px
- Inputs: 0px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, sm 4px, md 8px, full 9999px

## Components

### Button, ghost

Background transparent (it sits on `#e8e8e8cc`, so place it on that colour), text `#1a1a1a`, border none, radius 0px, height 44px, padding 0px 0px, 16px / 400. Sample label: "Everything Books Brand I".

### Button, primary

Background `#ffffff1f`, text `#ffffff`, border none, radius 4px, height 34px, padding 7px 8px, 16px / 400. Sample label: "Show more".

### Input

Height 60px, background `#222222`, border 0px solid #ffffff, radius 0px, 32px text, padding 0px 0px.

### Link

Colour `#1a1a1a`, no underline at rest, weight 500.

## Dark Mode

The site is dark by default and no light mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 456px | 24px | 19px | 19px, 1 line, start | 60px, 6 links | media behind/overlapping text | 4→4 col; 2→2 col; 6→3 col | content-width |
| laptop 1024px | 323px | 16px | 19px | 19px, 1 line, start | 60px, 6 links | media behind/overlapping text | 4→4 col; 2→2 col; 6→3 col | content-width |
| tablet 768px | 744px | 12px | 17px | 17px, 1 line, start | 60px, hamburger (Toggle menu) | media behind/overlapping text | 4→4 col; 4→4 col; 4→4 col | content-width |
| phone 390px | 366px | 12px | 17px | 17px, 1 line, start | 60px, hamburger (Toggle menu) | media behind/overlapping text | 4→4 col; 4→4 col; 4→4 col | content-width |

- H1 goes 19px → 17px (89%), 1 → 1 lines.
- Nav collapses to a hamburger by 390px (first seen at 768px); header 60px → 60px.
- Card grids: 4 columns → 4 columns on phones (gap 12px → 12px).
- Body text 19px → 17px.
- Phone side gutter 12px.
- Section top padding 24px → 24px.

## Interaction & Motion

292 elements carry transitions; typical 0.3s with cubic-bezier(0.4, 0, 0.2, 1), mostly on all, opacity, transform. No running keyframe animations at rest.

- Hover on nav-link ("Pentagram"): no visible change; cursor pointer.
- Tooltip triggers exist (1 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- 1 aria-haspopup triggers exist; none opened on hover (click-to-open menus).
- 67 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#ededed` for actions and focus; never paint large areas with it.
- Do keep body text at 16px in Plain.
- Do match corner radii per element class (buttons 4px, cards 0px); do not pick one radius for everything.
- Don't add drop shadows; this design is flat.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.