A high-performance data backbone for modern AI applications
02
Color
#FF4438Accent
#FFFFFFInk
#B9C2C6Ink soft
#0D212CBG
#163341BG soft
#091A23BG quiet
#8A99A0Muted
rgba(255,255,255,0.15)Line
Deep, dark backgrounds provide a high-contrast canvas for vibrant brand accents and clear, legible white text.
03
Typography
condensed-sans · geometric-sans · monospace
display80px · 700
headline40px · 600
body16px · 400
caption14px · 500
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.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent 4px grid with generous vertical padding for section separation.
05
Surfaces
sm · 4px
md · 8px
lg · 10px
pill · 999px
1px solid rgba(255,255,255,0.15)
rgba(0,0,0,0.1) 0px 0px 20px 0px
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Centered layout with a prominent hero, followed by feature sections and technical diagrams.
07
Motion & Interaction
200msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Subtle fade-ins for content blocks. · Smooth color and opacity transitions on interactive elements. · Hover states that slightly brighten or elevate components.
Subtle background color changes or brightness adjustments on buttons and links. · Immediate feedback with a slight depression or opacity change.
08
Components
buttonPrimary buttons are filled with the accent color and white text; secondary buttons are outlined with white text.
cardDark cards with subtle borders and rounded corners, often containing technical prompts or feature descriptions.
chipPill-shaped tags for categorization, using muted backgrounds and light text.
inputDark input fields with subtle borders, designed for high contrast with light text.
heroLarge, bold condensed headline on a dark background, centered above a technical prompt display and call-to-action buttons.
09
Voice & Don'ts
ToneAuthoritative, technical, and direct.
HeadlinesBold, condensed, and action-oriented, often framing problems or solutions.
CTAsClear and direct, using verbs like 'Try', 'Get', and 'Book'.
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.
Avoid: Avoid overly casual or playful language.
Avoid: Avoid complex jargon that obscures the core technical value.
Captured from the live site · real computed styles
11
System prompt
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.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
