# R/GA · Design system migration spec

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

> A quintessential example of bold, typography-driven agency design that uses extreme contrast to project authority.

## 1. Identity DNA

Like a precision-engineered industrial design firm, this system is built on a foundation of absolute clarity. Every element serves a structural purpose, resulting in a bold, high-contrast visual language that projects creative authority and technological confidence.

**One-liner:** A bold, high-contrast agency site that uses massive typography and a strict monochrome palette to project creative authority and technological confidence.
**Keywords:** innovation · technology · systems · brand · creative
**Analogy:** A precision-engineered industrial design firm

## 2. Color

The palette is a study in extreme contrast: absolute black and white dominate, with a single, sharp red accent applied with surgical precision. This strict monochrome scheme eliminates ambiguity and directs focus to content and structure.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#3C3B3B` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--accent` | `#FF0000` | single accent |
| `--line` | `rgba(230, 230, 230, 1)` | divider |

**Color principle:** Extreme contrast between absolute black and white, with a single sharp red accent.

Color is used not for decoration, but for definition and emphasis.

## 3. Typography

Typography is the primary visual element, employing a bold, tight-tracked grotesque-sans for commanding headlines and a clean sans-serif for readable body text. The system creates a distinct hierarchy, from massive all-caps statements to comfortable, functional prose.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 0.95 | 700 | -2px | Primary hero headline |
| heading | 27px | 1.2 | 700 | -0.5px | Section headings |
| body | 16px | 1.5 | 400 | 0px | Main body text |

**Type rules:**
- 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.

## 4. Spacing

Vertical rhythm is defined by generous spacing between major sections, creating clear, breathable landmarks on the page.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing between major sections and tight grouping within content blocks.

## 5. Surfaces

Surfaces are defined by sharp edges and clean lines, not soft effects. Depth is communicated through contrast and structure, with minimal 1px dividers and a complete absence of shadows or rounded corners.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Minimal, typically 1px lines in light gray (#E6E6E6) for dividers.

## 6. Layout

The layout is spacious and section-based, built on a white canvas. Full-viewport black hero sections give way to clean, left-aligned content blocks that let massive typography dominate the visual field.

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

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

## 7. Motion & Interaction

Motion is functional and restrained, focused on smooth state changes for interactive elements. Color and opacity transitions provide clear feedback without distracting from the core content.

- **Durations:** micro 250ms · small 300ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0.0, 0.2, 1)`
- **Patterns:**
  - Color and opacity transitions on interactive elements.

- **Hover:** Color transitions (0.3s ease-in-out) on navigation links.
- **Click:** Standard pointer cursor on all interactive elements.
- **Transition:** Smooth color changes for links and buttons.
- **Keyboard:** Standard focus management for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, authoritative, and forward-looking. Headlines are declarative, all-caps statements about capability, while calls to action remain direct and simple.

- **Tone:** Confident, authoritative, and forward-looking.
- **Headline style:** Declarative, all-caps statements about capability and purpose.
- **CTA style:** Simple, direct invitations like 'See how we can help'.
- **Avoid:** Cutesy or overly casual language. / Decorative or overly complex visual elements. / Cluttered layouts or low-contrast text.

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

The system deliberately avoids cutesy language, decorative illustrations, cluttered layouts, and any low-contrast or muted color combinations.

## System Prompt (paste into AI tool)

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