---
name: Bond
description: "A strong example of a portfolio-driven agency site that uses bold typography and a vibrant accent to create a memorable, high-energy experience."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#333333"
  tertiary: "#FF5D60"
  neutral: "#555555"
  line: "rgba(0, 0, 0, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 123px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-0.02em"
  heading:
    fontFamily: grotesque-sans
    fontSize: 70px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.02em"
  body:
    fontFamily: grotesque-sans
    fontSize: 18px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0px"
  small:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

A bold, high-energy creative agency website that uses oversized typography and a vibrant coral accent to create a striking, expressive portfolio.

*A bold, high-energy creative studio that uses expressive typography and vibrant color to command attention.*

## Colors

High contrast with a vibrant coral accent and photographic backgrounds.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Accent (`#FF5D60`)** — uses `accent` token
- **Muted (`#555555`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 1)`)** — uses `line` token

## Typography

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

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

## Layout

Full-width image heroes followed by large typography sections.

*Rhythm:* Generous padding around large typography and tight spacing for UI elements.

## Elevation & Depth

- 0 0 10px 0 rgba(0, 0, 0, 0.12)
- 0 0 20px 0 rgba(0, 0, 0, 0.1)
- Borders: 1px solid #000000

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with coral background and white text, or white background with black text and black border.
- **card:** Minimal cards with large typography and photographic elements.
- **chip:** Pill-shaped tags or labels.
- **input:** Minimal form inputs with black borders.
- **hero:** Full-screen photographic hero with overlaid text or minimal header.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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