---
name: Collins
description: "Excellent example of restrained premium agency design where typography and whitespace do all the heavy lifting without decorative elements."
version: alpha

colors:
  background: "#f8f8f7"
  primary: "#140700"
  secondary: "#d0d0c8"
  neutral: "#514c49"
  bg-soft: "#ffffff"
  bg-quiet: "#efefef"
  line: "rgba(208, 208, 200, 0.5)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.44px"
  heading:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.64px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.16px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.16px"

rounded:
  sm: 4px
  md: 16px
  lg: 96px
  pill: 999px

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

---

## Overview

A premium design agency site that balances bold editorial typography with restrained, sophisticated minimalism.

*High-end design agency studio*

## Colors

Near-monochrome with subtle warm grays and high-contrast black ink for maximum editorial impact.

- **Background (`#f8f8f7`)** — uses `bg` token
- **Primary text (`#140700`)** — uses `ink` token
- **Secondary text (`#d0d0c8`)** — uses `ink-soft` token
- **Muted (`#514c49`)** — uses `muted` token
- **Borders (`rgba(208, 208, 200, 0.5)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** humanist-sans

## Layout

Centered hero with generous vertical padding, followed by asymmetric content sections

*Rhythm:* generous whitespace with tight letter-spacing creates a breathing, editorial rhythm

## Elevation & Depth

- Borders: subtle 1px borders using muted warm grays

## Shapes

- `sm`: 4px
- `md`: 16px
- `lg`: 96px
- `pill`: 999px

## Components

- **button:** Minimal pill-shaped buttons with dark ink fill and white text
- **card:** Large image-forward cards with rounded corners (16px) showcasing case studies
- **chip:** Laurel-framed award badges arranged in a horizontal flex layout
- **input:** Minimal inline text fields with subtle borders
- **hero:** Full-viewport centered headline with substantial vertical breathing room

## Do's and Don'ts

**Don't:**
- Don't use bright accent colors — the site relies on near-monochrome palette with no dominant accent
- Don't use heavy drop shadows — the surface design is flat and clean
- Don't use tight line-spacing on headlines — generous vertical rhythm is maintained throughout
- Don't use sans-serif for display text — hero headlines use serif typeface exclusively
- Don't clutter layouts with multiple elements — maximum whitespace with single focal points per section
- Don't use decorative borders — the only visible borders are 1px subtle dividers

---

## System Prompt (paste into AI agent)

```
This is a premium design agency website for Collins, featuring an editorial, restrained aesthetic. The palette is near-monochrome: off-white background (#f8f8f7), near-black ink (#140700), and subtle warm grays (#d0d0c8, #514c49). No dominant accent color exists. Typography alternates between a transitional serif for display headlines (tight negative letter-spacing) and a humanist sans-serif for body text. Generous whitespace creates a breathing, editorial rhythm. Critical constraints: never add colorful accents, never use tight spacing on large text, never clutter layouts, never use sans-serif for hero display type, always maintain the restrained premium tone, and always prioritize image-forward case study presentations over text-heavy sections.
```