Pentagram — Compact Wordmark and Portfolio Navigation

---
version: alpha
name: Pentagram — Compact Wordmark and Portfolio Navigation
colors:
  primary: '#1A1A1A'
  canvas: '#FFFFFF'
  ink: '#1A1A1A'
  muted: '#767676'
  charcoal: '#222222'
  black: '#000000'
  sample-heading: '#1A1A1A'
  sample-supporting: '#1A1A1A'
typography:
  heading:
    fontFamily: Plain, Arial, sans-serif
    fontSize: 19px
    fontWeight: 500
    lineHeight: 25px
  supporting:
    fontFamily: Plain, Arial, sans-serif
    fontSize: 19px
    fontWeight: 500
    lineHeight: 25px
---

## Overview
A 60px white navigation bar balancing the small black Pentagram wordmark with restrained text links and search, reducing to logo and hamburger on mobile. Inspected on 2026-10-05. The exact isolated element is `body > header`; a warm full-page render preceded measurement and a fresh image was cropped to its current document bounds.

## 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 19px, weight 500, line-height 25px. A supporting link/container sample uses 19px with 25px leading. These local samples are not a universal type scale. Child spans or image artwork can paint differently from inherited container styles. The Pentagram wordmark is SVG artwork; do not infer its typeface from the surrounding CSS.

## Layout
Both measured widths retain a 60px bar height. At 1440px the wordmark sits left while Work, About, News, Contact, search and Archive align right. At 390px only the wordmark and hamburger remain, with narrow outer margins. This crop excludes the photographic hero and all open-menu states. Primary image dimensions are 1440 × 60px at a 1440px viewport. The mobile evidence is 390 × 60px at a 390px viewport. These two widths do not identify exact breakpoint thresholds.

## Elevation & Depth
No pronounced shadow or elevated menu panel is visible in the closed state. White canvas and black labels define the bar.

## Shapes
The serif wordmark is a vector graphic; link text uses the measured Plain/Arial sans stack. The search glyph and two-line hamburger are sparse line icons, not filled circular buttons.

## Components
Logo home link, five portfolio/company destinations, search control and mobile menu trigger. The mobile drawer, search overlay, hover and keyboard focus states were not opened or audited.

## Do’s and Don’ts
Keep the visual weight of navigation lower than the portfolio artwork. Preserve accessible names when replacing text with icons; do not claim the closed-bar screenshot demonstrates the mobile drawer's interaction design. Provide visible focus states, meaningful alternative text and usable touch targets when adapting; no complete accessibility audit was performed.