---
title: "Redis Agency design system"
variant: extended
source: https://redis.agency/en
captured_at: 2026-10-12
theme: dark
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/redis-agency)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Redis Agency · Design System

> A stark monochrome canvas for design work

**Theme:** dark · **Industry:** agency · **Source:** https://redis.agency/en · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Redis Agency presents its design practice through an almost entirely black canvas punctuated by crisp white marks. The restrained palette and spacious composition make the identity feel direct, confident, and gallery-like.

## North star

Let the black canvas carry the page, and use crisp white identity and content as deliberate, high-contrast signals.

## Overview

The measured page is defined by a near-total black canvas (#000000) and white elements (#ffffff), with no additional brand accent colours. In the supplied viewport, the black field dominates; a small, centered white Redis mark is the only visible focal point. Treat white as a high-contrast functional colour for identity, text, navigation, and pill-shaped CTA surfaces rather than as a decorative accent. Typography uses Suisseintl WebM in a regular weight, with measured headings and navigation set at 18px and body text at 14px. Keep type understated and unembellished. The measured content uses a 660px maximum width, left-aligned headings, and a 12-column structure; preserve generous open canvas around content instead of filling every area. Imagery is numerous across the full page, but the screenshots show no photographic treatment to imitate: prioritize the stark logo-on-black opening and keep any later media distinct from the brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#000000` | `--color-studio-black` | brand | Dominant page canvas and dark text; fills the opening viewport and frames the white identity mark. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Logo, text, navigation, and white pill CTA surfaces against the black canvas. |

### Semantic aliases

`--color-canvas` → `#000000` (Studio Black) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#000000` (Studio Black) · `--color-border` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Suisseintl WebM | `--font-body` | webfont | 400 | Measured family for headings, body copy, and navigation. | Inter |

- **Suisseintl WebM:** Regular weight, unembellished sans serif; measured headings and navigation are 18px, body is 14px.

### Type scale — Major Third (ratio ≈ 1.286, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 18px | 400 | 1.4 | 0 | — | Suisseintl WebM | Primary agency introduction and section headings. |
| body | 14px | 400 | normal | 0 | — | Suisseintl WebM | Supporting agency description and page copy. |
| nav | 18px | 400 | 1.4 | 0 | — | Suisseintl WebM | Primary navigation links and menu labels. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 9, 15, 16, 25, 40 px.
- Section rhythm — · element gap 4px · card padding — · max content width 660px.

The measured layout uses a 12-column structure and a 660px maximum content width. Headings align to the start rather than being centered. Keep the opening mark visually centered within a broad, uninterrupted black field, with ample negative space around it. Across content sections, use a comfortable density and measured spacing scale; avoid crowding the canvas. The screenshot only reveals a minimal opening state, so do not infer a detailed section rhythm from it.

## Shape & elevation

- Radius: button `9999px` · nav `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The visible composition is flat, with no measured shadows or gradients. White borders are present in the measured palette and component data, but the screenshot is dominated by an uninterrupted black field. Prefer clear contrast and simple outlines over layered cards or decorative elevation.

## Imagery

The full-page measurement reports many image elements, but the supplied viewport and scaled page view show only the white Redis symbol against black. Use the mark as a clean, isolated focal point without texture or effects. Do not infer a specific photography or illustration style from the unseen image elements; keep supporting media subordinate to the stark identity treatment.

## Components

### Redis mark

A compact white brand symbol centered in the black opening field; preserve its clean silhouette and isolation.

### Primary CTA

Measured button uses a white fill, black text, white border, and fully pill-shaped radius.

### Navigation

Measured navigation includes white text on the dark canvas, set in regular Suisseintl WebM.

### Cases control

A white pill button labeled Cases appears in the measured component data; use black text for contrast.

### Measured component styles

- **Primary button** (“Cases”): background #ffffff · text #000000 · border 1px solid #ffffff · radius 40px · padding 9px 25px · 400 1px Suisseintl WebM
- **Navigation item** (“Cases Services”): transparent background · text #ffffff · radius 0px · padding 0px · 400 1px Suisseintl WebM

## Do

- Use #000000 as the dominant canvas.
- Reserve #ffffff for crisp contrast and identity.
- Keep the opening mark isolated in generous negative space.
- Use regular, unembellished sans-serif typography.
- Keep headings left-aligned in content areas.
- Use fully rounded pill shapes for measured buttons.

## Don't

- Do not introduce unmeasured brand colours.
- Do not add gradients or shadows.
- Do not crowd the dark canvas with decoration.
- Do not use heavy or condensed type styles.
- Do not invent a photographic style from unseen media.
- Do not replace the flat presentation with layered cards.

## Agent prompt

Build a new Redis Agency page with the same stark, gallery-like restraint. Use Studio Black (#000000) as the dominant canvas and Gallery White (#ffffff) for the logo, navigation, copy, and high-contrast CTA surfaces. Set text in Suisseintl WebM or a close sans-serif substitute such as Inter, regular weight, with understated hierarchy. Keep content in a measured 660px maximum-width area within a 12-column layout; align headings to the start and leave generous negative space. Use simple flat surfaces without shadows or gradients. When creating buttons, use a white fill, black text, white border, and fully pill-shaped corners. Make the identity mark crisp and isolated; do not add decorative colours or invent an image treatment unsupported by the reference.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Black full-screen opening with a small white symbol centered in generous negative space. | High-contrast brand introduction, Primary Cases action | Black canvas, Isolated white mark, White pill button |

## Source CSS custom properties (selected)

```css
--bg: black;
--text-gray: #cfcfcf;
--font-serif: "Redis Serif",Georgia,serif;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/redis-agency