Pentagram — Editorial Portfolio and Dark Retrospectives

---
version: alpha
name: Pentagram — Editorial Portfolio and Dark Retrospectives
colors:
  primary: '#1A1A1A'
  canvas: '#FFFFFF'
  ink: '#1A1A1A'
  muted: '#767676'
  charcoal: '#222222'
  black: '#000000'
  sample-heading: '#FFFFFF'
  sample-supporting: '#767676'
typography:
  heading:
    fontFamily: Plain, Arial, sans-serif
    fontSize: 52px
    fontWeight: 400
    lineHeight: 54.6px
  supporting:
    fontFamily: Plain, Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20px
---

## Overview
An extensive design-agency portfolio alternating asymmetric project grids with charcoal retrospective carousels, a photographic opening slideshow and a black editorial footer with an oversized wordmark. Inspected on 2026-10-05. This is a complete desktop page capture, not an isolated component crop.

## Colors
Use the observed palette tokens for the corresponding text and surfaces; photographs, artwork and gradients are not reduced to invented solid-color tokens. The interface is intentionally monochrome. Preserve the separation between white project fields, #222222 thematic bands and the true-black footer; project artwork contributes its own colors.

## Typography
The listed font families and sizes are measured CSS samples. The selected heading sample is Plain, Arial, sans-serif at 52px, weight 400, line-height 54.6px. A supporting paragraph sample uses 16px with 20px leading. These local samples are not a universal type scale. Child spans or image artwork can paint differently from inherited container styles.

## Layout
A 60px navigation bar frames a wide photographic slideshow with a compact discipline/sector control floating at its center. Large and small project tiles share a broad editorial grid, interrupted by full-width dark thematic bands. At 390px the navigation reduces to logo and hamburger; the opening image is taller, filter labels wrap, and the first thematic heading changes from 52px to 36px. The full mobile portfolio was not exhaustively interaction-tested. Primary image dimensions are 1440 × 25619px at a 1440px viewport. The mobile evidence is 390 × 844px at a 390px viewport. These two widths do not identify exact breakpoint thresholds.

## Elevation & Depth
Project imagery carries depth while the interface remains predominantly flat. Dark thematic trays, fine rules and changes in image scale organize a very long page without elevated dashboard-style cards.

## Shapes
Rectangular imagery, narrow gutters, small rounded filtering controls and a high-contrast serif logo. The logo is artwork, not evidence that body text uses a serif family.

## Components
Slideshow pagination, discipline and sector filters, project captions, thematic carousel groups, retrospective rows, source designer quotations, project-category labels and an editorial contact footer. Captured slides are individual states; no claim is made that every carousel or filter interaction was tested.

## Do’s and Don’ts
Preserve hierarchy through image scale and whitespace rather than decorative containers. Use genuine project credits and licensed artwork; do not fabricate agency clients or interpret native carousel clipping as a requirement to cut ordinary text. Provide visible focus states, meaningful alternative text and usable touch targets when adapting; no complete accessibility audit was performed.