---
name: Pentagram
description: "This site is a benchmark for premium agency portfolio design, demonstrating how extreme restraint and high-quality photography can create a powerful and sophisticated visual identity."
version: alpha

colors:
  background: "#ffffff"
  primary: "#1a1a1a"
  secondary: "#767676"
  neutral: "#8c8c8c"
  line: "rgba(26, 26, 26, 1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 52px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.32px"
  body:
    fontFamily: humanist-sans
    fontSize: 19px
    lineHeight: 1.32
    fontWeight: 400
    letterSpacing: "normal"
  small:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "normal"
  tiny:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 0px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A premium design agency portfolio showcasing a diverse range of multi-disciplinary work.

*A curated gallery of high-end design projects.*

## Colors

High-contrast black and white foundation with grayscale intermediaries.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#1a1a1a`)** — uses `ink` token
- **Secondary text (`#767676`)** — uses `ink-soft` token
- **Muted (`#8c8c8c`)** — uses `muted` token
- **Borders (`rgba(26, 26, 26, 1.0)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans

## Layout

Full-bleed hero images followed by structured grid sections.

*Rhythm:* Consistent 4px base with generous whitespace between sections.

## Elevation & Depth

- Borders: No visible borders; separation is achieved through spacing and background color changes.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 0px
- `pill`: 9999px

## Components

- **button:** Minimal text-based navigation links with underline hover effects.
- **card:** Large photographic project cards with minimal text overlays.
- **hero:** Full-width photographic slideshows with large typographic overlays and descriptive metadata.

## Do's and Don'ts

**Don't:**
- Don't use a multi-color palette — the screenshot shows a strict monochromatic scheme with photography providing color.
- Don't use decorative or script fonts — the screenshot shows a clean, functional grotesque-sans typography.
- Don't use drop shadows or complex gradients — the screenshot shows flat design with clear separation through space.
- Don't use crowded layouts with small spacing — the screenshot shows generous whitespace and a clear hierarchy.
- Don't use rounded corners on primary containers — the screenshot shows sharp, rectangular project cards.
- Don't use bold, saturated accent colors — the screenshot shows that all chromatic interest comes from the photographic content.

---

## System Prompt (paste into AI agent)

```
Pentagram is a high-end multi-disciplinary design studio portfolio. The design is characterized by extreme restraint, using a monochromatic color palette (ink: #1a1a1a, bg: #ffffff, muted: #767676) to let photographic project work be the focal point. Typography is clean and functional, using a humanist-sans for body text and a grotesque-sans for display, with sizes ranging from 13px to 52px. Key characteristics include generous whitespace, full-bleed imagery, and minimal UI chrome. Critical design constraints: never use decorative fonts, avoid loud accent colors, maintain large typographic scales, and preserve significant vertical rhythm between content blocks.
```