---
name: R/GA
description: "A quintessential example of bold, typography-driven agency design that uses extreme contrast to project authority."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#3C3B3B"
  tertiary: "#FF0000"
  neutral: "#999999"
  bg-soft: "#FFFFFF"
  line: "rgba(230, 230, 230, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 120px
    lineHeight: 0.95
    fontWeight: 700
    letterSpacing: "-2px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 27px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

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

---

## Overview

A bold, high-contrast agency site that uses massive typography and a strict monochrome palette to project creative authority and technological confidence.

*A precision-engineered industrial design firm*

## Colors

Extreme contrast between absolute black and white, with a single sharp red accent.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#3C3B3B`)** — uses `ink-soft` token
- **Accent (`#FF0000`)** — uses `accent` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(230, 230, 230, 1)`)** — uses `line` token

## Typography

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

- Hero text is set in all-caps with tight tracking and heavy weight.
- Body text uses a clean, readable grotesque-sans.
- Line heights are tight on large display type, comfortable on body text.

## Layout

Full-width hero sections followed by clean, left-aligned content blocks on a white background.

*Rhythm:* Generous vertical spacing between major sections and tight grouping within content blocks.

## Elevation & Depth

- Borders: Minimal, typically 1px lines in light gray (#E6E6E6) for dividers.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Clean text-based navigation links, uppercase in header.
- **card:** None visible, layout is section-based.
- **chip:** None visible.
- **input:** None visible.
- **hero:** Massive, full-viewport black section with dominant all-caps white typography.

## Do's and Don'ts

**Don't:**
- Don't use gradients — the design uses solid, flat blocks of color.
- Don't use soft shadows — surfaces are defined by contrast and clean lines.
- Don't use rounded corners on major containers — the aesthetic is sharp and rectangular.
- Don't use muted, low-contrast colors — the palette is strictly black, white, and a single red accent.
- Don't use decorative illustrations in the main layout — typography is the primary visual element.
- Don't use center-aligned text — headlines and body text are left-aligned.

---

## System Prompt (paste into AI agent)

```
A high-end digital agency website for R/GA. It positions itself as a creative innovation company for the intelligence age. The visual system is built on extreme contrast: a solid black (#000000) background for hero sections and crisp white (#FFFFFF) for content areas. The primary typography is a bold, tight-tracked grotesque-sans (Helvetica variable) in all-caps for headlines, with a clean sans-serif for body text. A single, sharp red (#FF0000) accent is used sparingly in the logo. Critical donts: never use gradients or drop shadows, never round major corners, and avoid any low-contrast or muted color combinations. The layout is spacious and left-aligned, emphasizing the massive, dominant typography.
```