# Redis Agency · Design system migration spec

> Source: https://www.redis.agency  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in using extreme typography and limited color to create a powerful, memorable agency brand.

## 1. Identity DNA

Redis Agency presents its digital presence as a high-end design gallery, where each element is curated with the precision of an exhibition. The system is built on a stark, monochromatic canvas, punctuated by a single, deliberate accent.

**One-liner:** A visually striking design agency site leveraging oversized typography and organic 3D elements against a deep black canvas.
**Keywords:** Creative Agency · Digital Studio · Modern · Bold · Minimalist
**Analogy:** A high-end design gallery that blends raw organic textures with sharp, modern typography.

## 2. Color

The palette is a study in maximum contrast, built upon pure black and white. A single, vibrant pink accent is reserved for moments of critical emphasis, creating immediate visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#808080` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--accent` | `#EB516D` | single accent |
| `--line` | `rgba(255,255,255,1.0)` | divider |

**Color principle:** High-contrast monochromatic base with a single, vibrant pink accent for maximum impact.

This strict limitation to a high-chroma accent ensures every use is purposeful and commanding.

## 3. Typography

Typographic voice is defined by a dramatic pairing: a tall, elegant didone serif for monumental headlines and a clean grotesque sans for all body and interface text. This hierarchy creates a clear distinction between expressive statement and functional communication.

- **Display:** didone-serif
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 90px | 0.82 | 400 | -1.8px | Hero headline text |
| heading | 36px | 1.2 | 400 | normal | Subheadings and section titles |
| body | 18px | 1.4 | 400 | normal | Body copy and navigation links |

**Type rules:**
- Use the grotesque sans for all UI elements and body copy.
- Use the didone serif exclusively for massive, impactful headlines.
- Maintain tight letter-spacing for display text to enhance its editorial feel.

## 4. Spacing

Generous whitespace and wide gaps establish a generous rhythm, allowing the oversized typography and singular compositions ample room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace and wide gaps are used to separate sections and let the large typography breathe.

## 5. Surfaces

Depth is communicated through deep, defined shadows that lift elements from the black canvas. White borders, applied with crisp precision, provide structural definition where needed.

- **Radius:** sm 4px · md 24px · lg 40px · pill 999px
- **Shadows:**
  - 0px 8px 24px rgba(0,0,0,0.5)
- **Borders:** 1px solid rgba(255,255,255,1.0)

## 6. Layout

The layout skeleton is expansive and edge-to-edge, rejecting rigid grids in favor of massive, centered compositions. It prioritizes singular, hero-driven sections that command the full viewport.

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

**Skeleton:** A full-width, edge-to-edge layout dominated by massive centered elements.

## 7. Motion & Interaction

Motion philosophy favors restraint, utilizing smooth opacity and transform transitions to guide focus without distraction. Interactivity is refined through subtle hover effects and consistent, responsive feedback.

- **Durations:** micro 220ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Smooth opacity and transform transitions on interactive elements.
  - Hover effects on buttons and links.

- **Hover:** Subtle color shifts or opacity changes on interactive elements.
- **Click:** Standard pointer interactions with immediate visual feedback.
- **Transition:** Consistent 0.3s transitions across most elements.
- **Keyboard:** Standard focus states using the primary accent or white outlines.

## 8. Voice & Don'ts

Editorial voice is sophisticated, direct, and slightly avant-garde, matching the visual boldness. Headlines are minimalist and expressive, while calls to action are simple, contained within distinct pill-shaped forms.

- **Tone:** Sophisticated, direct, and slightly avant-garde.
- **Headline style:** Minimalist and highly expressive, using large, evocative words.
- **CTA style:** Simple, action-oriented text enclosed in distinct pill shapes.
- **Avoid:** Overly friendly jargon / Excessive punctuation / Generic corporate language

### Don'ts
- ❌ Don't use rounded, friendly shapes — screenshot shows sharp, tall serifs and pill-shaped buttons.
- ❌ Don't use a light or colorful background — screenshot shows a dominant black background (#000000).
- ❌ Don't use a multi-color palette — screenshot shows a strict white, black, and grey scheme with a single pink accent.
- ❌ Don't use small, understated typography — screenshot shows massive, oversized display text.
- ❌ Don't use complex, cluttered layouts — screenshot shows vast empty spaces and focused, singular elements.
- ❌ Don't use soft, pastel accent colors — screenshot shows a vibrant, high-chroma pink (#EB516D).

The system deliberately rejects overly friendly jargon, corporate language, and any visual softness that would dilute its sharp, premium impact.

## System Prompt (paste into AI tool)

```
Redis Agency is a bold, modern creative agency site. Its design DNA is built on a strict, high-contrast palette of pure black (#000000) and white (#FFFFFF), anchored by a single, vibrant pink accent (#EB516D). The typography is a dramatic pairing of a tall, elegant didone-serif for massive headlines and a clean grotesque-sans for all body and UI text. The layout is expansive, edge-to-edge, and dominated by oversized, expressive typography paired with organic 3D imagery. Critical design rules: Never use multiple accent colors; keep the palette strictly monochromatic with one pop. Never use small or subtle typography; display text must be oversized and impactful. Never use complex or cluttered grids; favor a minimal, spacious approach that lets the hero elements command attention. The overall tone is sophisticated and avant-garde, avoiding anything playful or generic.
```