---
name: AREA 17
description: "An excellent reference for minimalist, type-driven agency portfolios that prioritize content and whitespace over decorative elements."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1A1A1A"
  secondary: "#949495"
  neutral: "#757575"
  bg-quiet: "#F2F2F2"
  line: "rgba(230, 230, 230, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 55px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.825px"
  headline:
    fontFamily: grotesque-sans
    fontSize: 42px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.588px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A sophisticated, type-driven agency portfolio with a monochromatic palette and expansive whitespace.

*A high-end architectural journal meets a global strategy firm.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1A1A1A`)** — uses `ink` token
- **Secondary text (`#949495`)** — uses `ink-soft` token
- **Muted (`#757575`)** — uses `muted` token
- **Borders (`rgba(230, 230, 230, 1)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* Generous, asymmetric spacing with large empty sections and padded text blocks

## Elevation & Depth

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

## Shapes

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

## Components

- **button:** Minimalist flat or outlined buttons, often featuring small rounded corners and relying on thin borders for definition.
- **card:** Not prominently featured, suggesting a focus on continuous scroll and large imagery over grid-based card layouts.
- **chip:** Not present, favoring clean navigation links and simple text categorizations.
- **input:** Not visible in the primary UI, standard text fields implied for form contexts.
- **hero:** Monumental left-aligned text statements dominating the viewport with significant negative space above and below.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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