Redis Design System

Overview

Redis's marketing site does something rare in the dev-infrastructure category. Monumental display. The hero h1 ("YOUR AGENT WITH REAL-TIME CONTEXT") fills the screen at 120px in Space Grotesk uppercase weight 500 with -1.2px tracking — two lines of text are the entire above-fold composition, large enough that the words read as image rather than as copy. Where Vercel keeps its hero h1 at ~56px and Supabase at ~64px, Redis pushes display to 120px and trusts a single sentence to carry the whole brand statement. Beneath, a Redis-red 5px-rounded CTA button labelled "Try Redis" anchors the next vertical tier, and below the fold an isometric 3D illustration of stacked yellow, magenta, and cyan blocks decorates the lower hero.

The chromatic system runs two voltages, two roles. Redis Red ({colors.redis-red} — #ff4438) is the action color, carried by the CTA button's border and by the iconic Redis cube logo. An electric lime-yellow ({colors.yellow-voltage} — #dcff1e) is the brand-decoration color, carried by inline highlights, the cube-logo highlight stripe, and the brand-coded illustration accents. Neither voltage competes with the other — the red lives on buttons and logos, the lime on labels and decorations. Where Stripe holds one indigo and Cloudflare holds one orange, Redis splits the work across two colors with strict role separation.

Typography is a two-voice split: Space Grotesk for everything spoken (display, heading, body, button) and Space Mono for everything annotated (uppercase small-caps labels with 1.5px tracking, code blocks, metadata strips). 52 monospace samples appear in the captured render. The pairing — contemporary grotesk display + mono labels — is closer to a print magazine or a documentation site than to a typical database-vendor marketing page.

Key Characteristics:

• Midnight canvas ({colors.canvas} — #091a23), a near-black with a faint blue undertone — frequency 98, wired as --midnight and --dusk-09.
• Two-voltage split: Redis Red ({colors.redis-red} — #ff4438) on CTAs and the cube logo, electric lime ({colors.yellow-voltage} — #dcff1e) on inline highlights and decorations.
• Monumental hero display: 120px Space Grotesk uppercase weight 500 with -1.2px tracking — the largest type tier in the dev-infra category.
• Two-voice typographic system: Space Grotesk for everything spoken, Space Mono for every uppercase label and code strip.
• Tight 5px button radius — the CTA is angular where Vercel, Linear, and Supabase default to pills or 12-16px rounding.
• Hairline-outlined feature cards: dark {colors.canvas} fill with a 1px {colors.surface-1} border rather than a second surface tone — elevation by border, not by tonal lift.
• Isometric 3D illustration in the lower hero — yellow, magenta, and cyan stacked-block decorations doing the brand-decoration job that gradients do elsewhere.

Colors

Brand

• Primary ({colors.primary} — #e4291e): wired as --primary-button-bg, --primary-button-border, --secondary-button-fg, --tertiary-button-fg. The system's button-action voltage — drives both the primary CTA border and the secondary-button text. Distinct from the Redis Red logo color, slightly more saturated.
• Primary Hover ({colors.primary-hover} — #d1281e): wired as --primary-button-bg-hover and --hyper-08. The on-hover shift for the primary CTA fill.
• Primary Fill ({colors.primary-fill} — #351d22): frequency 7 as background — the resting fill of the primary CTA before hover. A deep maroon that pairs the {colors.primary} border to create a dark-button-with-red-ring composition.
• Redis Red ({colors.redis-red} — #ff4438): frequency 10, wired as --redis-red and --hyper-05. The iconic logo color — used 7 times as border, 2 as text, 1 in gradient. Reserved for the Redis cube logo and brand decorations; does not appear on buttons.
• Yellow Voltage ({colors.yellow-voltage} — #dcff1e): frequency 69, wired as --yellow. The electric lime that does the brand-decoration work — 34 as text, 35 as border. Inline highlights, the cube-logo accent stripe, label voltage in section headers.

Surface

• Canvas ({colors.canvas} — #091a23): frequency 98 — 47 as background, 25 as text, 25 as border. The midnight floor. Wired as --midnight, --bg-default-hover, --dusk-09. Pure black appears separately ({colors.shadow}) but is reserved for secondary-button fills and code-block backgrounds.
• Surface-1 ({colors.surface-1} — #163341): frequency 70 — 8 as background, 13 as text, 48 as border. The first elevation tier above midnight, wired as --dusk. Carries elevated card fills and the dominant border tone on dark surfaces.
• Surface-2 ({colors.surface-2} — #2d4754): frequency 8 — used as background on certain elevated card variants, wired as --dusk-90. The deepest elevation tier short of going to a lighter neutral.

Text

• Ink ({colors.ink} — #ffffff): frequency 1085 — 578 as text, 507 as border. Pure white, the dominant text color on the dark canvas. Wired as --base-white, --primary-button-fg, and the entire white spectrum of the CSS variable system.
• Ink Muted ({colors.ink-muted} — #b9c2c6): frequency 70 — 35 as text, 35 as border. The secondary running-text tone on dark surfaces, wired as --dusk-30. Carries body paragraphs and caption rows.
• Ink Dim ({colors.ink-dim} — #8a99a0): frequency 102 — 51 as text, 51 as border. The tertiary muted tone, wired as --dusk-50. Used for the dimmest metadata and inactive nav labels.

Hairline

• Hairline ({colors.hairline} — #163341): shares the hex with surface-1 but functions as the border-only tone, wired through --dusk. The dominant border across feature cards, dropdowns, and dividers on the dark canvas.

Accent

• Accent Violet ({colors.accent-violet} — #c795e3): frequency 24 — 12 as text, 12 as border. Wired as --violet. Used in the isometric 3D illustration and in occasional inline highlights.
• Accent Amber ({colors.accent-amber} — #f8c555): frequency 18 — 9 as text, 9 as border. The amber tier of the illustration palette and category-chip accents.

Semantic

• Link Blue ({colors.link-blue} — #0073e6): frequency 3 as text. The footer-link tone, used on inline anchor text in legal copy.
• Shadow ({colors.shadow} — #000000): frequency 155 — 100 as text, 55 as border. Pure black, wired as --base-black, --secondary-button-bg, --tertiary-button-bg. Used as the resting fill of secondary and tertiary buttons; the canvas is the slightly-blue midnight, not pure black.

Typography

Font Families

The system runs two voices: Space Grotesk for every spoken surface (display, heading, body, button, nav) and Space Mono for every annotated surface (uppercase small-caps labels with 1.5px tracking, code blocks, metadata strips). Fallbacks walk to a primaryFont Fallback and Space Grotesk Fallback declared in the CSS, then to system sans-serif and monospace. Both Space Grotesk and Space Mono are open-source from Google Fonts; no proprietary licensing.

The pairing is the distinguishing typographic move. Contemporary grotesk display + mono labels reads closer to a print magazine or a docs site (Stripe Docs, MDN) than to a typical SaaS database-vendor marketing page.

Hierarchy

Principles

The 120px hero h1 is the system's signature typographic moment. Uppercase with -1.2px tracking at weight 500 — confidence through scale and tracking rather than weight. The same weight 500 carries every other display tier; there is no weight 700 anywhere on the page even though the 120px display would conventionally invite it.

The monospace voice does the labor an uppercase-tracked sans label would normally do. Space Mono at 12px with 1.5px letter-spacing and uppercase transform carries every section label — "WORKS WITH", "BLOCKS WITH YOUR TECH STACK", "START BUILDING IN MINUTES". The result reads quietly technical without ever shouting in sans-caps.

Note on Font Substitutes

Both Space Grotesk and Space Mono are open-source from Google Fonts and can be embedded directly. If you must swap: Inter at the same weights is the closest Space Grotesk substitute; JetBrains Mono or IBM Plex Mono transfer cleanly for Space Mono at the 12-14px label tier.

Layout

Spacing System

• Base unit: 8px (with 24px and 16px as the dominant section modules).
• Tokens: {spacing.xs} 8px · {spacing.sm} 10px · {spacing.md} 12px · {spacing.base} 14px · {spacing.lg} 16px · {spacing.xl} 20px · {spacing.2xl} 24px · {spacing.3xl} 32px · {spacing.4xl} 72px.
• Section padding (vertical): ~72px between major bands below the fold; the hero band sits considerably taller because of the 120px display.
• Card internal padding: 24px on feature cards, 16px on smaller chip rows.
• Top-nav padding: 0 80px — the nav sits flush at 80px horizontal margins, with no vertical padding shifting the header height beyond the declared 70px.

Grid & Container

• Max content width: ~1280px on the hero, ~1080px on the feature-card sections below the fold.
• Hero: centered headline at 120px, with the lead paragraph and CTA stacked vertically at ~720px max-width. The isometric 3D illustration overflows the hero container at the bottom edge.
• Feature grid: 3-column grid for the "Bring engineers" / "Builds with your tech stack" feature rows.
• Logo wall: monochrome customer logos (Coinbase, Mediafly, Anthropic, etc.) rendered at uniform tint against the midnight canvas.
• Code-block tier: the "Start building in minutes" section anchors a full-width dark code panel showing CLI usage.

Rhythm

The page alternates between edge-to-edge display (the 120px hero) and densely-packed feature bands (the 3-up feature rows, the logo wall). There is no atmospheric gradient between sections — every band terminates on the same midnight canvas, with depth coming from hairline-outlined cards rather than from background-color shifts.

Elevation

The system has essentially no shadow tier. Elevation comes from hairline borders and from the modest tonal lift between the midnight canvas and the surface-1 elevated tier.

• Flat (no shadow): the entire hero, body bands, logo wall — 99% of surfaces.
• Hairline outlines: {colors.surface-1} (#163341) carries 48 border occurrences on the dark canvas — the dominant border tone. Feature cards, dropdowns, and dividers all use the same hairline.
• Tonal lift: {colors.surface-1} cards sit on {colors.canvas} (midnight) — the contrast is small but readable.
• Inline-highlight glow: none rendered; the lime-yellow voltage does the work an emphasis glow would do on other dark-canvas systems.

Shapes

The radius scale is small-step with one outlier pill.

• {rounded.none} 0px — only on display headlines and inline text.
• {rounded.xs} 4px — small chips and the nav-link hover background.
• {rounded.sm} 5px — frequency 14. The primary CTA, secondary CTA, and most button surfaces. The signature sharp-rounded corner that distinguishes Redis from pill-defaulting peers (Vercel, Supabase).
• {rounded.md} 10px — frequency 10. Mid-size UI surfaces, dropdown items, code-block edges.
• {rounded.lg} 14px — frequency 25. The default card radius, used on feature cards and elevated tiles.
• {rounded.pill} 200px — used on category-tab chips that need a pill silhouette.
• {rounded.full} 9999px — frequency 1. Reserved for circular avatars and the smallest icon containers.

The 5px CTA radius is the system's distinguishing geometric move. Pills and 12-16px softness are the dev-infra default; Redis's 5px reads as angular by contrast.

Components

button-primary — The signature CTA. Deep-maroon {colors.primary-fill} (#351d22) fill, white text, 1px {colors.redis-red} border, {rounded.sm} 5px radius, 10x24 padding, 43px height. "Try Redis" is the canonical instance. The dark-button-with-red-ring composition is the system's CTA signature — distinct from the all-red fill most database-vendor buttons take.

button-primary-hover — Fill shifts to {colors.primary-hover} (#d1281e) — a pure red — and the border drops. The hover state inverts the figure-ground: the resting state is "dark with red ring," the hover state is "pure red with no ring."

button-secondary — Transparent fill, {colors.primary} text, 1px {colors.primary} border, same 5px radius. Used for "View docs" / "Learn more" tertiary actions.

top-nav — Midnight {colors.canvas} surface, 70px height, 0x80 padding. Carries the Redis cube logo flush-left, product-nav links center, and "Try Redis" CTA flush right. No bottom border — the nav and the page floor share a surface color.

nav-link — Transparent fill, white text in {typography.body-sm} (14px / 400), 5x10 padding. No hover background visible in the captured surface.

hero-heading — White text on the transparent canvas, {typography.display-xl} (120px / 500) with -1.2px tracking and uppercase transform. 0 padding — the headline overflows to the container edges.

section-heading — White text, {typography.display-md} (32px / 500). Used for "Bring engineers" and "Join the Redis community" section h2s below the fold.

body-paragraph — {colors.ink-muted} running-text at {typography.body-sm} (14px / 400). The workhorse paragraph style on the dark canvas.

body-paragraph-bright — White text at {typography.body-md} (16px / 400). Used for the hero lead paragraph and for emphasis copy.

mono-caption — Lime-yellow {colors.yellow-voltage} text at {typography.mono-label} (12px / 400 / 1.5px tracking / uppercase). The signature small-caps label tier — "WORKS WITH", "BLOCKS WITH YOUR TECH STACK". The combination of monospace + lime voltage + uppercase + tight tracking is the system's section-header signature.

card-dark — Midnight {colors.canvas} fill, white text, 1px {colors.surface-1} border, {rounded.lg} 14px radius, 24px internal padding. The default feature-card on the dark canvas; depth comes from the border rather than a fill shift.

card-elevated — {colors.surface-1} fill, white text, same 14px radius and 24px padding. The variant used when a card needs to read as more lifted than the hairline-bordered default.

code-block — Midnight fill, white text, 1px {colors.surface-1} border, {rounded.md} 10px radius, 16px padding. Uses {typography.mono-code} for syntax content. The "Start building in minutes" section anchors on a full-width code panel showing CLI usage.

category-tab — Transparent fill, {colors.ink-muted} text, 1px {colors.surface-1} border, {rounded.pill} 200px radius, 5x10 padding, 32px height. The inactive category chip in the product-tab strip.

category-tab-active — {colors.primary} fill, white text, same pill geometry. The active tab — the brand-red voltage carries the fill.

Do's and Don'ts

Do split the brand chromatically between Redis Red (CTAs and the cube logo) and lime-yellow (decorations and section labels). The two-voltage system has strict role separation — putting the lime on a button or the red on a label collapses the discipline into a generic two-color palette.

Do use {colors.canvas} (#091a23) — the slightly-blue midnight — as the page floor, not pure #000000. The dusk-tinted floor pairs with the dusk grey scale to keep the system monochromatic-with-warmth rather than truly black-and-white.

Do render the primary CTA as a dark-button-with-red-ring. The {colors.primary-fill} (#351d22) maroon body paired with the {colors.redis-red} (#ff4438) border is the system's CTA signature — an all-red fill would read as a generic primary button.

Do carry every uppercase small-caps label in Space Mono at 12px with 1.5px tracking. The mono-label tier is the system's section-header device; substituting a sans uppercase tracking treatment loses the magazine-style two-voice split.

Don't soften the primary-button radius to a pill or to 12-16px. The 5px corner is the system's geometric signature in a category (dev-infra) where pills are the default. Replacing it with a pill makes Redis look like Supabase.

Don't render display headlines at weight 700 or above. The system holds display at weight 500 even at the 120px hero scale; bumping to 700 turns the magazine-style display into a generic SaaS shout and loses the confidence-through-tracking-and-scale principle.

Don't use the lime-yellow {colors.yellow-voltage} (#dcff1e) on button fills or on body-text emphasis. It is reserved for the small-caps mono-label tier, inline highlights, and the Redis cube logo's accent stripe. Spreading it to button surfaces collapses it into a second action color and breaks the role split with the red voltage.

Don't render the Redis cube logo in a single flat color. The canonical mark pairs the red body with a lime-yellow highlight stripe — flattening to one color loses the brand's chromatic memory.

Known Gaps

• Light mode: the captured marketing surface is dark-only. A light variant exists in the Redis Cloud product dashboard but is not represented here.
• Hover and focus states: documented for {component.button-primary-hover} only; the full state matrix (focus rings, active press, disabled tints, error states) was not visible on the captured marketing surface.
• Form input error states: the text-input component is not exposed in the captured marketing chrome and is not declared in this spec; input styling lives inside the Redis Cloud product surfaces.
• Motion: the isometric 3D illustration animates on scroll and the hero text auto-animates between alternate phrasings; the spec captures end-state values only. Easing curves and rotation timing live in the live page runtime.
• Product surfaces: this DESIGN.md captures the marketing site only. The Redis Cloud Console (cloud.redis.io) and Redis Insight desktop app ship their own token systems — panel layouts, query-result tables, latency-graph colors — that are not represented here.
• Logo wall variants: the marketing site renders customer logos in monochrome white; the brand kit also includes a multi-color variant set used in case-study materials that does not appear in the captured chrome.
• Subscription-tier accents: Redis Open Source / Redis Cloud / Redis Enterprise tiers carry their own badge colors inside the product; none appear in the marketing chrome captured here.