What is Redis's primary brand color?

Redis runs two brand voltages, each scoped to a different role. The first is Redis Red (`#ff4438`, wired as `--redis-red` and `--hyper-05`), used as the border ring on the primary CTA button and as the rendered color of the iconic Redis cube logo. The second is an electric lime-yellow (`#dcff1e`, wired as `--yellow`), used as the inline-highlight accent and as the brand-decoration color in feature illustrations. The CTA button itself fills with a deep maroon (`#351d22`, wired as `--hyper-10`) and pairs the Redis Red border; clicking it shifts to a pure red fill on hover. Neither voltage competes with the other — the red is the action color, the lime is the brand-coded decoration color.

What typeface does Redis use, and what should I use as a substitute?

Redis runs a two-voice typographic system: Space Grotesk for every display, heading, body, and button surface, and Space Mono for every uppercase small-caps label, code block, and metadata strip. Display headlines sit at 120px in uppercase weight 500 with -1.2px tracking — the largest hero tier in the dev-infra category. Body sits at 14-16px in weight 400 with the same Space Grotesk family. Monospace labels at 12px / weight 400 with 1.5px tracking and uppercase transform carry every section label. Both families are open-source from Google Fonts and can be used directly; there is no substitute needed. If you must swap, Inter at the same weights is the closest sans-substitute and JetBrains Mono is the closest mono-substitute.

Why does Redis use midnight navy instead of pure black?

The page floor is midnight (`#091a23`, wired as `--midnight` and `--dusk-09`), a near-black with a faint blue undertone — frequency 98 in the captured render. Pure black (`#000000`) appears as well but is reserved for the secondary-button background and the deepest text-on-light surfaces. The midnight floor's slight blue undertone reads as more atmospheric than a pure black canvas would; it pairs with the dusk grey scale (`--dusk-30`, `--dusk-50`, `--dusk-90`) that carries every hairline and muted text tone on the dark surface. The system is monochromatic-with-a-tint rather than truly black-and-white.

What is Redis's corner-radius philosophy?

The system runs a small-step radius scale, with a tight 5px on the primary CTA being the distinguishing move. 14px appears 25 times across feature cards and large surfaces, 5px appears 14 times across buttons and chips, 10px appears 10 times on small UI surfaces. There is no pill tier on primary buttons — the CTA's 5px radius reads as deliberate angularity in a category (dev-infra) where Vercel, Linear, and Supabase all default to pills or generous 12-16px rounding. The 50% radius (24 occurrences) is used only on circular avatar chips and icon buttons.

Can I use this DESIGN.md to build my own database-vendor marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Redis's specific moves: midnight canvas instead of charcoal, two-voltage chromatic split (red CTA + lime brand accents), Space Grotesk uppercase display at weight 500, Space Mono labels, and the sharp 5px CTA radius. You can also reference values directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the 120px hero display tier only works if your single-sentence positioning is strong enough to carry words-as-image scale; most products need 56-72px and one explanatory line beneath.

Redis Design System

Redis's marketing site as a DESIGN.md.

About Redis DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source redis.io

Backend, Database & DevOps

Redis's marketing site does something rare in the dev-infrastructure category: it gives the brand the entire upper half of the hero. A 120px Space Grotesk display headline ("YOUR AGENT WITH REAL-TIME CONTEXT") fills the screen in uppercase, weight 500, with -1.2px tracking — large enough that two lines of text are the entire above-fold composition. Beneath, a Redis-red CTA button labelled "Try Redis" sits at a sharp 5px radius (no pill, no soft 12px), and below that, an isometric 3D illustration of stacked yellow, magenta, and cyan blocks anchors the lower hero. The brand's iconic red cube logo and an electric lime-yellow accent (`#dcff1e`) decorate the page chrome at small scale; the canvas itself is a near-black midnight (`#091a23`).

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 18 color tokens drawn from the brand's CSS custom-property system (`--midnight`, `--dusk`, `--yellow`, `--hyper-05` for Redis Red, plus dusk-tier grey scale and accent purples), 10 typography tokens running Space Grotesk for display and body and Space Mono for every uppercase label and code strip (52 monospace samples in the captured render), 6 corner-radius tokens centered on a 14px default with a tight 5px on the primary CTA, 8 spacing values on a 24px-dominant scale, and 14 component definitions covering the red CTA button, hairline-outlined feature cards, the dark dropdown surface, and the monospace caption strip.

Feed this file to an AI coding tool and it reproduces Redis's specific moves: midnight canvas instead of charcoal, two-voltage chromatic split (red CTA + lime accents), Space Grotesk uppercase display at modest weight 500, Space Mono labels, and the sharp 5px CTA radius. One thing worth borrowing only if your product has decades of brand equity: the willingness to render the hero headline at 120px. At that size the words become an image, and most products do not have a single sentence confident enough to carry that scale.

What makes it distinct

Monumental display120px Space Grotesk h1 in uppercase weight 500 with -1.2px tracking, the largest hero type tier in the dev-infra category
Two voltagesRedis Red for the primary CTA, electric lime-yellow for inline highlights and the iconic cube logo, with neither competing with the other
Midnight canvas, hairline cardspage floor at near-black midnight, feature tiles outlined in dusk-blue hairlines rather than filled with a second surface tone
Type as two-voice splitSpace Grotesk carries display and body, Space Mono carries every uppercase small-caps label and code strip
Tight 5px button radiusthe primary CTA uses a sharp 5px corner rather than the pill the dev-infra category defaults to

Live at redis.io

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

redis.io

Explore Redis

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Redis design system FAQ

Common questions about Redis's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Redis — official site

Redis's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.