--- 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.