# Collins · Design system migration spec

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

> Excellent example of restrained premium agency design where typography and whitespace do all the heavy lifting without decorative elements.

## 1. Identity DNA

The Collins site operates as a high-end design studio made digital: a space where every element is placed with the precision of a well-curated exhibition. Its identity is built on refined authority, editorial clarity, and a premium sensibility that values restraint over ornamentation. The result is a system that feels both confidently modern and timelessly sophisticated.

**One-liner:** A premium design agency site that balances bold editorial typography with restrained, sophisticated minimalism.
**Keywords:** refined · authoritative · editorial · premium
**Analogy:** High-end design agency studio

## 2. Color

The color system is a study in near-monochrome restraint, built on an off-white field, near-black ink, and a supporting cast of muted warm grays. This palette eschews any dominant accent, relying instead on stark value contrast to create focus and hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f8f8f7` | main background |
| `--bg-soft` | `#ffffff` | card background |
| `--bg-quiet` | `#efefef` | quiet area |
| `--ink` | `#140700` | body text |
| `--ink-soft` | `#d0d0c8` | secondary text |
| `--muted` | `#514c49` | placeholder |
| `--line` | `rgba(208, 208, 200, 0.5)` | divider |

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

The principle is maximum editorial impact through minimal chromatic means, where absence of color becomes the most powerful tool for directing attention.

## 3. Typography

Typography alternates between two distinct voices: a transitional serif for commanding display headlines and a humanist sans-serif for clear body text. The pairing creates a deliberate tension between classical authority and contemporary approachability, with scale used to define visual hierarchy across four distinct levels.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 400 | -1.44px | Hero headline and major section titles |
| heading | 36px | 1.1 | 400 | -0.64px | Section subheadings and case study titles |
| body | 16px | 1.2 | 400 | -0.16px | Primary body text and navigation |
| caption | 14px | 1.2 | 400 | -0.16px | Captions, labels, and small print |

## 4. Spacing

Spacing follows a generous, breathing rhythm where whitespace is treated as an active design element rather than empty background. Tight letter-spacing on headlines contrasts with expansive vertical padding to create a dynamic, editorial flow.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous whitespace with tight letter-spacing creates a breathing, editorial rhythm

## 5. Surfaces

Surfaces are defined by flatness and subtlety, with depth communicated through generous whitespace rather than shadows. The only visible borders are delicate 1px dividers in muted warm grays, maintaining the system's clean, unadorned aesthetic.

- **Radius:** sm 4px · md 16px · lg 96px · pill 999px
- **Borders:** subtle 1px borders using muted warm grays

## 6. Layout

The layout skeleton begins with a centered, full-viewport hero that establishes generous vertical breathing room before transitioning to asymmetric content sections. This structure prioritizes singular focal points per section, allowing large image-forward case study cards to command attention without competition.

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

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

## 7. Motion & Interaction

Motion is treated with deliberate precision, using extended duration animations up to 800ms with custom cubic-bezier easing curves. The philosophy favors smooth, premium-feeling transitions—clip-path reveals, transforms, and opacity fades—over rapid, utilitarian feedback.

- **Durations:** micro 250ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - clip-path reveal
  - transform slide
  - opacity fade

- **Hover:** Subtle color transitions with 0.7s easing
- **Click:** Immediate feedback with no bounce
- **Transition:** Smooth 0.25s to 0.8s transitions using custom cubic-bezier curves
- **Keyboard:** Standard focus indicators

## 8. Voice & Don'ts

The editorial voice is authoritative yet inviting, characterized by short, punchy imperative statements and simple single-word actions. It deliberately avoids technical jargon, overly casual language, and generic marketing speak in favor of clear, confident communication.

- **Tone:** Authoritative yet inviting
- **Headline style:** Short, punchy imperative statements with periods
- **CTA style:** Simple single-word actions (Explore)
- **Avoid:** Technical jargon / Overly casual language / Generic marketing speak

### Don'ts
- ❌ 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

The system deliberately omits bright accents, heavy shadows, decorative borders, and cluttered layouts—understanding that premium authority emerges from what is intentionally left out.

## System Prompt (paste into AI tool)

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