# Bond · Design system migration spec

> Source: https://bond-agency.com  ·  Curated by OpenDesign  ·  en

> A strong example of a portfolio-driven agency site that uses bold typography and a vibrant accent to create a memorable, high-energy experience.

## 1. Identity DNA

The Bond system operates as a high-energy creative studio, where every design decision is a deliberate act of command. Like a bold manifesto pinned to a studio wall, its oversized typography and vibrant coral accent are non-negotiable, setting the tone for a portfolio that demands attention.

**One-liner:** A bold, high-energy creative agency website that uses oversized typography and a vibrant coral accent to create a striking, expressive portfolio.
**Keywords:** Creative Agency · High-Energy · Bold · Playful · Portfolio
**Analogy:** A bold, high-energy creative studio that uses expressive typography and vibrant color to command attention.

## 2. Color

The palette is a study in stark contrast, built on a foundation of absolute black and white. A single, vibrant coral accent punctuates this monochrome field, used with precision to draw the eye and signal interaction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#555555` | placeholder |
| `--accent` | `#FF5D60` | single accent |
| `--line` | `rgba(0, 0, 0, 1)` | divider |

**Color principle:** High contrast with a vibrant coral accent and photographic backgrounds.

The principle is high-energy minimalism: a photographic background or a field of white is activated by a single, powerful hue.

## 3. Typography

Typography is the primary voice of the system, spoken in a bold grotesque sans-serif. Headlines are oversized, often lowercase, and set with tight line heights to create a dense, graphic presence that dominates the visual hierarchy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 123px | 1.0 | 700 | -0.02em | Hero headlines and section titles |
| heading | 70px | 1.1 | 700 | -0.02em | Secondary headlines |
| body | 18px | 1.2 | 700 | 0px | Main body copy |
| small | 12px | 1.6 | 400 | 0px | Captions and small UI text |

**Type rules:**
- Use bold weight (700) for most text elements.
- Use tight line heights for display text.
- Use uppercase for navigation and labels.

## 4. Spacing

Rhythm is established through generous padding that gives large typography room to breathe, contrasted with tighter spacing for functional UI elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 75 / 96 px
- **Rhythm:** Generous padding around large typography and tight spacing for UI elements.

## 5. Surfaces

Depth is suggested through soft, diffused shadows that lift elements like cards and panels from the surface. Borders are minimal and sharp, typically a single black line that defines edges with clarity.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 0 10px 0 rgba(0, 0, 0, 0.12)
  - 0 0 20px 0 rgba(0, 0, 0, 0.1)
- **Borders:** 1px solid #000000

## 6. Layout

The layout skeleton is composed of full-bleed photographic heroes that transition into sections of large-scale typography. Whitespace is a structural element, not an afterthought, framing the bold content blocks.

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

**Skeleton:** Full-width image heroes followed by large typography sections.

## 7. Motion & Interaction

Motion is smooth and purposeful, applied to interactive elements to affirm their state. Subtle parallax and scroll-triggered animations are used to enhance the expressive typography, guiding the user's focus down the page.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.77, 0, 0.175, 1)`
- **Patterns:**
  - Smooth transitions for hover states and menu interactions.
  - Parallax or scroll-triggered animations for typography.

- **Hover:** Color inversion or background color change on buttons.
- **Click:** Subtle scale or opacity change.
- **Transition:** 0.3s to 0.5s transition on all interactive elements.
- **Keyboard:** Focus styles visible on interactive elements.

## 8. Voice & Don'ts

The editorial voice is confident, direct, and slightly playful, matching the boldness of the visual system. It avoids subtlety and complexity, preferring punchy copy and oversized headlines over dense prose.

- **Tone:** Confident, direct, and slightly playful.
- **Headline style:** Oversized, bold, and often lowercase or sentence case.
- **CTA style:** Action-oriented with an arrow icon.
- **Avoid:** Subtle or understated typography. / Muted or pastel color palettes. / Complex grids or layouts without large typography. / Stock photography without a clear, expressive subject. / Serif fonts for headlines. / Small, dense paragraphs of text.

### Don'ts
- ❌ Don't use subtle or understated typography — screenshot shows oversized, bold headlines.
- ❌ Don't use muted or pastel color palettes — screenshot shows a vibrant coral accent (#FF5D60) and high-contrast black and white.
- ❌ Don't use complex grids without large typography — screenshot shows generous whitespace and oversized text.
- ❌ Don't use serif fonts for headlines — screenshot shows a bold grotesque sans-serif.
- ❌ Don't use small, dense paragraphs — screenshot shows short, punchy copy with large line heights.
- ❌ Don't use rounded corners for most elements — screenshot shows sharp edges or pill-shaped buttons.

They deliberately avoid muted palettes, serif fonts, and complex grids, ensuring the high-energy, portfolio-driven identity remains uncompromised.

## System Prompt (paste into AI tool)

```
This is a bold, high-energy creative agency website. Use a vibrant coral accent (#FF5D60) against a stark black and white palette. Typography is the primary design driver, using a bold grotesque sans-serif for oversized headlines and body copy. Layout is generous with whitespace, focusing on large typography and photographic elements. Avoid subtle or understated design choices, muted colors, and complex grids without large typography. Ensure all interactive elements have smooth, visible transitions and a confident, direct tone.
```