# AREA 17 · Design system migration spec

> Source: https://area17.com  ·  Curated by OpenDesign  ·  en

> An excellent reference for minimalist, type-driven agency portfolios that prioritize content and whitespace over decorative elements.

## 1. Identity DNA

The design system for AREA 17 operates with the structural clarity of a high-end architectural journal, married to the strategic rigor of a global consulting firm. Its identity is built on a framework of partnership and impact, expressed through a meticulously controlled, type-driven aesthetic. Every element is a deliberate component in a larger, sophisticated machine.

**One-liner:** A sophisticated, type-driven agency portfolio with a monochromatic palette and expansive whitespace.
**Keywords:** partnership · impact · strategic · premium · design-led
**Analogy:** A high-end architectural journal meets a global strategy firm.

## 2. Color

The color palette is a study in restraint, functioning as a strict monochromatic foundation. Stark black and pure white form the high-contrast core, with light grays providing the only subtle tonal variation for background fields and muted text.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F2F2F2` | quiet area |
| `--ink` | `#1A1A1A` | body text |
| `--ink-soft` | `#949495` | secondary text |
| `--muted` | `#757575` | placeholder |
| `--line` | `rgba(230, 230, 230, 1)` | divider |

**Color principle:** Strictly monochromatic, using high-contrast typography and expansive whitespace to establish a premium, editorial feel.

The governing principle is to let the architecture of the page—its typography and whitespace—do all the communicative work, rendering color decorative and unnecessary.

## 3. Typography

The typographic voice is delivered exclusively through modern grotesque-sans families, chosen for their geometric clarity and neutral authority. Display sizes are monumental and left-aligned, with tight negative letter-spacing creating dense, impactful headlines against the expansive canvas.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 55px | 1.1 | 400 | -0.825px | Hero headlines and primary section statements |
| headline | 42px | 1.1 | 400 | -0.588px | Section headers and prominent category listings |
| body | 16px | 1.5 | 400 | 0px | General body copy, navigation, and cookie notice text |

**Type rules:**
- Tight negative letter-spacing for large display sizes
- Medium weight (500) reserved exclusively for logo mark and specific UI emphasis
- Left-aligned typography with generous vertical whitespace between blocks

## 4. Spacing

Vertical rhythm is established through generous, asymmetric spacing, where large empty sections are as active as the content blocks they separate.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 118 px
- **Rhythm:** Generous, asymmetric spacing with large empty sections and padded text blocks

## 5. Surfaces

Surfaces are rendered with profound minimalism, avoiding depth cues like drop shadows in favor of a flat, graphic plane. Definition comes almost exclusively from the stark contrast of type on background, and where necessary, from precise, single-pixel borders.

- **Radius:** sm 4px · md 8px · lg 16px · pill 9999px
- **Shadows:**
  - rgb(0, 0, 0) 0px 0px 0px 1px
  - rgba(0, 0, 0, 0) 0px 0px 0px 0px
- **Borders:** Subtle 1px borders used primarily for cookie consent actions and specific dividers.

## 6. Layout

The layout skeleton is an asymmetric grid, with content gravitating heavily to the left edge of the viewport. Massive padding and vast stretches of whitespace are the primary structural elements, defining sections and creating a calm, ordered reading path.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric grid with content heavily weighted to the left, using massive padding and whitespace to define structure.

## 7. Motion & Interaction

Motion is philosophy-driven, serving reveal and state change, not decoration. Large imagery and page loads are unveiled through slow, deliberate opacity transitions, while interactive elements respond with quicker, subtle shifts.

- **Durations:** micro 150ms · small 300ms · medium 1000ms
- **Easing:** `cubic-bezier(0.33, 1, 0.68, 1)`
- **Patterns:**
  - Slow, smooth opacity and transform transitions (1s) for large imagery and page load reveals
  - Faster, subtle color and background transitions (0.3s) for interactive elements like buttons

- **Hover:** Subtle color shifts or slight opacity changes on interactive text and buttons.
- **Click:** No aggressive visual feedback, maintaining the calm, editorial atmosphere.
- **Transition:** Consistent use of ease-out cubic-bezier curves for smooth, refined state changes.
- **Keyboard:** Standard sequential focus order implied by the clean structural layout.

## 8. Voice & Don'ts

The editorial voice is authoritative and confident, built from declarative, first-person plural statements that assert expertise. It is a voice stripped of playful jargon, promotional urgency, and syntactical excess, valuing directness and clarity above all.

- **Tone:** Authoritative, confident, and highly professional.
- **Headline style:** Declarative, first-person plural ('We partner...') statements that establish agency and expertise.
- **CTA style:** Minimal and functional ('Accept', 'Decline', 'Contact'), lacking aggressive promotional language.
- **Avoid:** Playful jargon / Exclamation points / Overly complex sentence structures / Filler words

### Don'ts
- ❌ don't use vibrant accent colors — screenshot shows a strictly monochromatic palette of black, white, and grays
- ❌ don't use decorative serifs — screenshot shows clean, geometric grotesque-sans typography throughout
- ❌ don't crowd elements together — screenshot shows expansive whitespace and generous padding between text blocks
- ❌ don't use heavy drop shadows — screenshot shows minimal, flat surfaces with subtle 1px borders where needed
- ❌ don't use playful or rounded display fonts — screenshot shows serious, modern sans-serifs for headlines
- ❌ don't center-align primary text blocks — screenshot shows strong left-alignment for all hero and body content

The system deliberately avoids visual noise—no vibrant accents, no decorative serifs, no crowded compositions—to ensure the integrity of its minimalist, type-led expression.

## System Prompt (paste into AI tool)

```
This is a premium agency website characterized by an ultra-clean, minimalist aesthetic and expansive whitespace. The primary colors are stark white (#FFFFFF) and near-black ink (#1A1A1A), with light grays (#F2F2F2, #949495) used for subtle background contrast and muted text. The typography is strictly modern grotesque-sans, featuring very large, left-aligned display headings (55px) with tight negative letter-spacing (-0.825px). Critical design rules include: avoid any use of vibrant accent colors (the palette is strictly monochromatic), avoid decorative serifs or playful fonts, avoid cluttered grids or heavy drop shadows, and maintain generous, asymmetric vertical rhythm. Use slow, smooth (1s) opacity transitions for reveals and faster (0.3s) transitions for interactive states.
```
