---
name: Redis
description: "This site is an excellent example of a modern, developer-oriented dark mode design that balances technical authority with clear, high-impact visual communication."
version: alpha

colors:
  background: "#0D212C"
  primary: "#FFFFFF"
  secondary: "#B9C2C6"
  tertiary: "#FF4438"
  neutral: "#8A99A0"
  bg-soft: "#163341"
  bg-quiet: "#091A23"
  muted-soft: "#5C707A"
  line: "rgba(255,255,255,0.15)"

typography:
  display:
    fontFamily: condensed-sans
    fontSize: 80px
    lineHeight: 0.95
    fontWeight: 700
    letterSpacing: "-1px"
  headline:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 600
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 500
    letterSpacing: "1.5px"

rounded:
  sm: 4px
  md: 8px
  lg: 10px
  pill: 999px

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

---

## Overview

Redis provides the real-time context layer for building reliable AI agents in production.

*A high-performance data backbone for modern AI applications*

## Colors

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

- **Background (`#0D212C`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#B9C2C6`)** — uses `ink-soft` token
- **Accent (`#FF4438`)** — uses `accent` token
- **Muted (`#8A99A0`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.15)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Consistent 4px grid with generous vertical padding for section separation.

## Elevation & Depth

- rgba(0,0,0,0.1) 0px 0px 20px 0px
- Borders: 1px solid rgba(255,255,255,0.15)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 10px
- `pill`: 999px

## Components

- **button:** Primary buttons are filled with the accent color and white text; secondary buttons are outlined with white text.
- **card:** Dark cards with subtle borders and rounded corners, often containing technical prompts or feature descriptions.
- **chip:** Pill-shaped tags for categorization, using muted backgrounds and light text.
- **input:** Dark input fields with subtle borders, designed for high contrast with light text.
- **hero:** Large, bold condensed headline on a dark background, centered above a technical prompt display and call-to-action buttons.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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