# Agency51 Design System

> High-contrast monochrome foundation punctuated by a singular, high-energy red accent and heavy geometric typography.

**Source:** https://agency51.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Agency51 utilizes a strict monochrome palette of pure black (#000000) and white (#ffffff), using a vibrant red (#ed4444) as the exclusive functional accent for CTAs and links. The system is anchored by the **Satoshi** typeface, which is deployed at extreme weights (800) and tight negative letter-spacing for headings, creating a "brutalist-lite" aesthetic. Layouts favor generous white space and large-radius containers (30px to 100px), balancing the aggressive typography with soft, pill-shaped UI elements.

## Signature DNA
1. **Aggressive Satoshi Headings:** Headlines use Satoshi at weight 800 with significant negative tracking (up to -1.984px), creating a dense, high-impact typographic block that dominates the viewport.
2. **The Red Punctuation:** A single hex (#ed4444) carries all interactive intent, appearing as button backgrounds, text links, and borders against an otherwise achromatic canvas.
3. **Hyper-Rounded Geometry:** A consistent use of 30px card radii and 999px pill shapes for buttons and badges softens the high-contrast black-and-white color scheme.

## Family Map
Not captured in source (no sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--wp--preset--color--black` | `#000000` | Primary text, headings, dark surfaces | 138 | 1 | `--gcid-heading-color` |
| `--wp--preset--color--white` | `#ffffff` | Page background, button text, borders | 40 | 1 | `--color-bg` |
| `--gcid-body-color` | `#4d4d4d` | Secondary body text | 41 | 1 | Computed style |
| `--color-text-body` | `#3d3d3d` | Form labels, primary body text | 10 | 1 | Computed style |
| `--gcid-vuloetj4rf` | `#f9f9f9` | Card and section backgrounds | 11 | 1 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-accent` | `#ed4444` | Primary CTA background, links, active borders | 56 | 1 | `--gcid-primary-color` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Satoshi | 500, 600, 800 | All headings, body, and UI | Inter or General Sans | Proprietary (Fontshare) |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 50px | 49.6px | -1.984px | 800 | Hero H2 | `h2.et_pb_module_header` |
| `{type.h3}` | 38px | 41.36px | -1.504px | 800 | Section Headings | `h3.et_pb_module_header` |
| `{type.h3-sm}` | 22px | 24.2px | -0.88px | 800 | Grid Item Titles | `h3.dipi-grid-item-title` |
| `{type.label}` | 20px | 22px | -0.6px | 600 | Pretitles | `span.pretitle` |
| `{type.button}` | 20px | 34px | -0.6px | 800 | Header CTA | `a.et_pb_button` |
| `{type.body-lg}` | 20px | 27px | -0.28px | 500 | Intro Paragraphs | `p` |
| `{type.body}` | 16px | 21.6px | -0.28px | 500 | Standard Body | `p:nth-of-type(1)` |
| `{type.nav}` | 14px | 14px | -0.28px | 500 | Menu Items | `li.menu-item` |
| `{type.caption}` | 12px | 12px | -0.28px | 500 | Category Badges | `a.dipi-grid-item-category` |

### Principles
1. **Negative Tracking on Display:** All Satoshi headings above 20px must use negative letter-spacing (approx. -4% of font size) to maintain the brand's dense visual weight.
2. **Extreme Weight Contrast:** Headings are strictly 800 weight, while body text remains at 500. Avoid 600/700 weights for standard prose.
3. **Achromatic Hierarchy:** Use #000000 for headings and #4d4d4d or #3d3d3d for body text to create a subtle depth on the white canvas.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 311 |
| `{space.sm}` | 12px | 35 |
| `{space.md}` | 15px | 57 |
| `{space.lg}` | 30px | 29 |
| `{space.xl}` | 57px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Default containers | 541 occurrences |
| `{radius.md}` | 30px | Content cards, service blocks | Card component |
| `{radius.lg}` | 100px | Primary buttons, inputs | Rounded Button component |
| `{radius.pill}` | 999px | Badges, category tags | Pill / Badge component |

## Elevation
Not captured in source. The system is flat, relying on borders and background color shifts (#f9f9f9) for depth.

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary action (Get in touch)
**Pages observed:** agency51.com
**Spec:** Background: `#ed4444` | Text: `#ffffff` | Radius: `100px` | Padding: `6px 20px` | Typography: `Satoshi 800 20px`
**States observed:** Default: captured | Hover: not captured

#### Text Input
**Role:** Newsletter signup and forms
**Pages observed:** agency51.com
**Spec:** Background: `#ffffff` | Text: `#666666` | Border: `0px` | Radius: `100px` | Padding: `14px 21.5px`
**States observed:** Default: captured

### Tier 2: Patterns
#### Pill / Badge
**Role:** Category labels and tags
**Pages observed:** agency51.com
**Spec:** Background: `transparent` | Text: `#ed4444` | Border: `1px solid #ed4444` | Radius: `999px` | Padding: `4px 12px`
**States observed:** Default: captured

#### Card
**Role:** Service and content grouping
**Pages observed:** agency51.com
**Spec:** Background: `#f9f9f9` | Text: `#4d4d4d` | Radius: `30px` | Padding: `30px 30px 18px`
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Footer Surface
**Role:** Global site footer
**Pages observed:** agency51.com
**Spec:** Background: `#000000` | Text: `#ffffff` | Radius: `30px 30px 0 0` (Top-only) | Padding: `57px 0px`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1080px (approx) |
| Section Padding | 57px (vertical) |
| Grid Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 15px |
| Desktop | 1440px | Multi-column grid (3-up or 4-up) |

## Imagery & decoration
Agency51 uses grayscale partner logos (BigCommerce, Google Partner) to maintain the monochrome aesthetic. The primary decorative element is the use of large, bold typography as a visual anchor.

## Do's
- Use `#ed4444` for all primary call-to-action buttons.
- Apply Satoshi 800 with negative letter-spacing for all H1-H3 headings.
- Use `30px` border-radius for content cards.
- Maintain a white background (#ffffff) for the main content area.
- Use grayscale or monochromatic treatments for third-party logos.

## Don'ts
- **Wrong:** Using `#ed4444` for body text. **Right:** Use `#4d4d4d`. **Reason:** Red is reserved for interactive accents only.
- **Wrong:** Using standard letter-spacing for large headings. **Right:** Use `-1.5px` to `-2px`. **Reason:** Tight tracking is a core brand identifier.
- **Wrong:** Introducing secondary brand colors like blue or green. **Right:** Stick to the monochrome + red palette. **Reason:** Agency51 is a single-brand monochrome system.
- Do not use sharp corners for buttons; always use `100px` or `999px` radii.

## Similar brands
- Metalab (Typography-heavy, high contrast)
- Huge Inc (Bold monochrome foundation)
- Work & Co (Systematic, grid-based, limited palette)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #ed4444;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-text-body: #4d4d4d;
  --font-main: 'Satoshi', sans-serif;
  --radius-card: 30px;
  --radius-pill: 999px;
}
```

```json
/* Style Dictionary */
{
  "color": {
    "brand": { "primary": { "value": "#ed4444" } },
    "neutral": {
      "black": { "value": "#000000" },
      "white": { "value": "#ffffff" },
      "gray": { "value": "#4d4d4d" }
    }
  }
}
```

## Agent prompt examples
- "Generate a primary CTA button using Satoshi 800, 20px font size, #ed4444 background, and a 100px border radius."
- "Create a content card with a #f9f9f9 background, 30px border radius, and 30px internal padding."
- "Style an H2 heading with Satoshi 800, 50px size, and -1.98px letter spacing."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Shadow tokens were not present in the CSS variables or computed styles.
- Multi-step form validation colors (Success/Error) were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://agency51.com | 1440x900 | 2026-06-06 |
| Mobile Home | https://agency51.com | 390x844 | 2026-06-06 |