# Redis · Design system migration spec

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

> This site is an excellent example of a modern, developer-oriented dark mode design that balances technical authority with clear, high-impact visual communication.

## 1. Identity DNA

Redis operates as the high-performance data backbone for modern AI applications, and its design system reflects that architectural role with mechanical precision. The visual identity is built on the principle of a robust, dark foundation supporting vibrant, critical signals—a system where every element has a clear structural purpose.

**One-liner:** Redis provides the real-time context layer for building reliable AI agents in production.
**Keywords:** infrastructure · AI agents · context engine · performance · developer-first
**Analogy:** A high-performance data backbone for modern AI applications

## 2. Color

The color palette is defined by its deep, dark backgrounds, which create a high-contrast canvas. Vibrant red accents and crisp white text are deployed strategically for maximum legibility and focal points.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0D212C` | main background |
| `--bg-soft` | `#163341` | card background |
| `--bg-quiet` | `#091A23` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#B9C2C6` | secondary text |
| `--muted` | `#8A99A0` | placeholder |
| `--muted-soft` | `#5C707A` | weak hint |
| `--accent` | `#FF4438` | single accent |
| `--line` | `rgba(255,255,255,0.15)` | divider |

**Color principle:** Deep, dark backgrounds provide a high-contrast canvas for vibrant brand accents and clear, legible white text.

The guiding principle is high-contrast function over decorative color, ensuring clarity for technical content.

## 3. Typography

The typographic voice is split between two distinct roles: condensed sans-serifs carry the bold, technical authority for headlines, while geometric sans-serifs provide clear, neutral body text. This division creates a hierarchy that is both impactful and immediately readable.

- **Display:** condensed-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 0.95 | 700 | -1px | Hero headlines |
| headline | 40px | 1.1 | 600 | -0.5px | Section headers |
| body | 16px | 1.5 | 400 | 0px | General text |
| caption | 14px | 1.4 | 500 | 1.5px | Labels and navigation |

**Type rules:**
- Use condensed sans for high-impact, large-scale headlines.
- Use geometric sans for body text and UI elements.
- Use monospace for technical prompts and code snippets.

## 4. Spacing

Spacing follows a strict 4px grid, creating a consistent and predictable rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid with generous vertical padding for section separation.

## 5. Surfaces

Surfaces are defined by deep, dark tones and subtle, low-opacity borders that create clear separation without visual noise. The depth is implied through shadow and contrast, not heavy elevation.

- **Radius:** sm 4px · md 8px · lg 10px · pill 999px
- **Shadows:**
  - rgba(0,0,0,0.1) 0px 0px 20px 0px
- **Borders:** 1px solid rgba(255,255,255,0.15)

## 6. Layout

The layout skeleton is centered and section-based, prioritizing a dominant hero area for immediate context. Subsequent sections for features and technical details follow in a clean, vertical progression.

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

**Skeleton:** Centered layout with a prominent hero, followed by feature sections and technical diagrams.

## 7. Motion & Interaction

Motion is minimal and strictly functional, applied only to clarify UI state changes. Smooth, quick transitions on buttons and links provide immediate feedback without interrupting the developer's focus.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle fade-ins for content blocks.
  - Smooth color and opacity transitions on interactive elements.
  - Hover states that slightly brighten or elevate components.

- **Hover:** Subtle background color changes or brightness adjustments on buttons and links.
- **Click:** Immediate feedback with a slight depression or opacity change.
- **Transition:** Smooth 0.2s to 0.3s transitions for color and background properties.
- **Keyboard:** Focusable elements should have visible outlines matching the accent color.

## 8. Voice & Don'ts

The editorial voice is authoritative, technical, and direct, matching the system's performance-oriented nature. Language is clear and action-oriented, avoiding any ambiguity or casual flourish.

- **Tone:** Authoritative, technical, and direct.
- **Headline style:** Bold, condensed, and action-oriented, often framing problems or solutions.
- **CTA style:** Clear and direct, using verbs like 'Try', 'Get', and 'Book'.
- **Avoid:** Avoid overly casual or playful language. / Avoid complex jargon that obscures the core technical value. / Avoid weak or hesitant phrasing.

### Don'ts
- ❌ Don't use a light background — the screenshot shows a deep dark theme for developer focus.
- ❌ Don't use decorative or script fonts — the screenshot shows condensed and geometric sans-serifs.
- ❌ Don't use subtle or pastel colors — the screenshot shows high-contrast white and vibrant red accents.
- ❌ Don't use wide, extended typography — the screenshot shows tall, condensed headlines.
- ❌ Don't use generic rounded buttons — the screenshot shows slightly rounded, pill-shaped, or squared buttons.
- ❌ Don't use thin, low-contrast borders — the screenshot shows clear, visible borders for separation.

The system deliberately avoids decorative or playful elements that would compromise its focus on technical infrastructure.

## System Prompt (paste into AI tool)

```
The Redis website is a developer-focused platform using a deep dark background (#0D212C) with high-contrast white text (#FFFFFF) and vibrant red accents (#FF4438). Typography combines condensed sans-serifs for bold, impactful headlines with geometric sans-serifs for clear body text and monospace for technical prompts. The layout is clean and centered, featuring large hero sections, technical diagrams, and clear call-to-action buttons. Critical design rules: never use light backgrounds, avoid decorative fonts, maintain high contrast, use condensed type for headlines, and ensure clear component separation with visible borders. This design effectively communicates technical authority and modern infrastructure for AI development.
```