# AKQA — Design System

## North Star
> An agency portfolio that lets the work breathe — quiet chrome, big imagery, every grid cell a story.

**Theme:** light
**Category:** agency
**Tags:** `achromatic` · `monochrome` · `square` · `minimal` · `editorial` · `spacious` · `agency` · `premium` · `asymmetric`

## Description
AKQA's site is almost all photography and case-study tiles with the absolute minimum of chrome. A near-white canvas, a slim sans-serif logo and nav at the top, and a varied-cell grid below that mixes phone mockups, on-set photography, brand films, and motion poster art. Typography stays understated — labels and titles in a small editorial sans — letting each project's imagery dominate. The voice is confident, premium, restrained.

## Colors
| Name | Hex | Group | Role | Tailwind |
|---|---|---|---|---|
| neutral-700 | `#414141` | neutral | neutral step 700 | `neutral-700` (Δ0.004) |
| neutral-900 | `#121212` | neutral | neutral step 900 | `neutral-900` (Δ0.022) |
| neutral-50-1 | `#ffffff` | neutral | neutral step 50 | `zinc-50` (Δ0.015) |
| neutral-500 | `#717171` | neutral | neutral step 500 | `neutral-500` (Δ0.007) |
| neutral-400 | `#989898` | neutral | neutral step 400 | — |
| neutral-800 | `#222222` | neutral | neutral step 800 | `neutral-800` (Δ0.017) |
| neutral-950 | `#000000` | neutral | neutral step 950 | — |
| neutral-50-2 | `#f8f8f8` | neutral | neutral step 50 | `gray-50` (Δ0.006) |

## Surfaces (Elevation)
| Level | Name | Hex | Purpose |
|---|---|---|---|
| 0 | background | `#ffffff` | Page background |
| 1 | surface-1 | `#989898` | Cards / elevated panels |
| 2 | surface-2 | `#717171` | Elevation tier 2 |
| 3 | surface-3 | `#414141` | Elevation tier 3 |
| 4 | surface-floor | `#222222` | Elevation tier 4 |

**Elevation philosophy.** Almost completely flat. The grid relies on white-space gutters and the imagery itself to imply layering. Hover states subtly lift and zoom but the rest of the time the canvas reads like a printed page.

## Typography

### goudy-old-style — weight 400
*body*

### Times New Roman — weight 400
*serif*

### akzidenz-grotesk-pro — weight 400
*h4*

## Type Scale
| Role | Size | Line-height | Tracking |
|---|---|---|---|
| `h3` | 38px | 1.21 | -1 |
| `body` | 16px | 1.63 |  |
| `link` | 16px | 1.63 |  |
| `h4` | 14px | 1 | -0.2 |
| `ui-action` | 14px | 1.29 | -0.2 |

## Spacing & Radius

**Radius**
- `none`: 0

**Spacing**
- `base`: 2px

## Layout
A varied-cell grid (mosaic-style) — large feature cells next to smaller ones, mixing aspect ratios. Top has a three-item primary nav. Bottom is a small, dense footer with utility links.

## Imagery
A constant rotation of project work: phone mockups, on-set photography, motion film stills, brand identity boards. Each tile is a different aspect ratio, building a visual rhythm. People, products, places — all premium, all on-brand for the client.

## Do
- Let project imagery occupy the largest cells — chrome plays second to the work
- Use varied-size grid cells; uniform grids feel too clinical for creative work
- Set labels and titles in a small editorial sans, kept low-contrast
- Reserve color for the work itself; the canvas should stay near-white or near-black

## Don't
- Don't overlay heavy chrome on imagery — captions sit BELOW each cell, not on top
- Don't use a uniform grid; vary cell heights and widths to create rhythm
- Don't introduce loud accent colors; the imagery already brings color in
- Don't crowd the nav — three or four items max, top-aligned, always thin