Redis DESIGN.md

Brands

Fast data-platform design with bold red identity, black technical contrast, and performance-first product framing.

Raw DESIGN.md

At a glance

Group: Brands
Main color: #dc382dRed design systems
Fonts: Inter SF Mono

Colors in this file

#ffffff
background
#dc382d
background
#e2e8f0
Unnamed
#111111
background
#b91c1c
Unnamed
#171717
Unnamed
#64748b
Unnamed
#f8fafc
Unnamed
#16a34a
Unnamed
#f59e0b
Unnamed

Fast data-platform design with bold red identity, black technical contrast, and performance-first product framing.

1. Visual Theme & Atmosphere

Redis should feel extremely fast, direct, and infrastructure-ready. The design language needs to connect open source origins, cloud data products, caching, vector search, and real-time app performance.

Mood: fast, bold, technical, reliable, direct
Density: medium, with product cards, metrics, and architecture diagrams
Character: red brand energy, black technical framing, white docs clarity

2. Color Palette & Roles

Token	Hex	Role
`--redis-red`	`#DC382D`	Primary brand and action
`--redis-red-dark`	`#B91C1C`	Hover / pressed state
`--redis-black`	`#111111`	Dark technical surface
`--ink-strong`	`#171717`	Primary text
`--ink-muted`	`#64748B`	Secondary text
`--surface-page`	`#F8FAFC`	Page background
`--surface-card`	`#FFFFFF`	Cards and docs surfaces
`--border-default`	`#E2E8F0`	Dividers and inputs
`--success`	`#16A34A`	Healthy state
`--warning`	`#F59E0B`	Caution state

Use red for brand and primary action. Use black for technical gravity and code/architecture surfaces.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;

Element	Size	Weight	Line Height
Hero Display	60px	800	1.04
Page Title	42px	750	1.1
Section Title	30px	700	1.2
Card Title	22px	700	1.3
Body	16px	400	1.6
Small	14px	400	1.45
Code	13px	500	1.55

4. Component Stylings

css.button-primary {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #DC382D;
  border-radius: 999px;
  background: #DC382D;
  color: #FFFFFF;
  font: 700 14px/1 Inter, sans-serif;
}

.data-card {
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  background: #FFFFFF;
  padding: 20px;
}

.code-panel {
  border-radius: 18px;
  background: #111111;
  color: #FFFFFF;
  padding: 20px;
}

.input {
  min-height: 44px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 0 14px;
}

5. Layout Principles

Token	Value	Usage
`--space-2`	`8px`	Metric spacing
`--space-4`	`16px`	Core rhythm
`--space-5`	`24px`	Card padding
`--space-8`	`48px`	Major sections

Lead with speed and operational proof. Use metrics, architecture blocks, and use-case cards.

6. Depth & Elevation

css.shadow-card { box-shadow: 0 8px 18px rgba(17, 17, 17, 0.07); }
.shadow-panel { box-shadow: 0 18px 42px rgba(17, 17, 17, 0.14); }

Use stronger contrast on dark panels and subtle elevation on white product cards.

7. Do's and Don'ts

Do communicate speed, reliability, and scale. Do use red with discipline. Do not turn every component red. Do not make database concepts overly abstract.

8. Responsive Behavior

Breakpoint	Min Width	Behavior
Mobile	`0px`	Stack metrics and product cards
Tablet	`768px`	Two-column technical/product sections
Desktop	`1200px`	Full architecture and comparison layouts

Code and architecture panels must scroll or wrap cleanly on mobile.

9. Agent Prompt Guide

Design like Redis: bold red data-platform identity, black technical panels, white modular product cards, speed metrics, caching/vector-search language, and a sharp infrastructure feel.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/redis.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "redis" })

McDonald

Brands · Speedee

Fast-food commerce with strong red-and-yellow branding, friendly utility, and mainstream consumer accessibility. McDonald's public site uses bright brand color, white space, large food imagery, and clear app/deal CTAs.

Capital One

Brands · Optimist

National bank design with bold red identity, confident card surfaces, clean Sans typography, and accessible financial clarity.

Lenovo

Brands · Lato

Computing and device retail with black-red branding, practical hierarchy, and broad catalog structure. Lenovo's public site uses a black-white base, red brand accents, and hardware-forward merchandising.

Mistral

Brands · Arial

Frontier AI platform design with sharp black foundations, a warm orange-to-yellow signature spectrum, and highly controlled enterprise product framing. Mistral combines open-model energy with direct, no-frills…

Gusto

Brands · Tiempos Text

Payroll and HR platform with a warm, people-first aesthetic — coral-orange brand accents, generous whitespace, and human-centered data UI.

Fastly

Brands · Inter

Edge cloud design with bold red identity, performance-metric surfaces, developer-focused configuration UX, and global CDN clarity.

All Design.md files Browse by font