--- version: alpha name: "Redis" website: "https://redis.io" description: >- An in-memory database brand whose marketing site pairs a midnight-navy canvas with a monumental 120px Space Grotesk display headline rendered in white uppercase weight 500 with -1.2px tracking, a Redis-red 5px-rounded CTA button anchored beneath, and an isometric 3D illustration of stacked yellow, magenta, and cyan blocks dominating the lower hero. Below the fold the page returns to the same midnight floor and renders feature cards as hairline-outlined dark tiles with an electric lime-yellow accent reserved for inline highlights and the brand's signature voltage. Space Mono carries every uppercase small-caps label and code strip across the surface; the system runs a two-typeface split (display sans + mono labels) closer to a print magazine than to a database vendor marketing page. seo: title: "Redis Design System for React — Redis Red, Space Grotesk, lime accents, 14 components" metaDescription: "Redis's marketing site as a DESIGN.md. Midnight canvas, 120px Space Grotesk display, lime-yellow voltage, Space Mono labels. Tokens for React, Next.js, and AI coding tools." highlights: - "Monumental display — 120px Space Grotesk h1 in uppercase weight 500 with -1.2px tracking, the largest hero type tier in the dev-infra category" - "Two voltages — Redis 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 cards — page floor at near-black midnight, feature tiles outlined in dusk-blue hairlines rather than filled with a second surface tone" - "Type as two-voice split — Space Grotesk carries display and body, Space Mono carries every uppercase small-caps label and code strip" - "Tight 5px button radius — the primary CTA uses a sharp 5px corner rather than the pill the dev-infra category defaults to" tags: - "Backend, Database & DevOps" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://redis.io" title: "Redis — official site" description: "Redis's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Redis's primary brand color?" answer: "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." - id: "typography" title: "What typeface does Redis use, and what should I use as a substitute?" answer: "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." - id: "canvas-color" title: "Why does Redis use midnight navy instead of pure black?" answer: "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." - id: "rounded-style" title: "What is Redis's corner-radius philosophy?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own database-vendor marketing site?" answer: "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." mockups: - "marketing-hero" - "dashboard-card-grid" colors: primary: "#e4291e" primary-hover: "#d1281e" primary-fill: "#351d22" redis-red: "#ff4438" yellow-voltage: "#dcff1e" ink: "#ffffff" ink-muted: "#b9c2c6" ink-dim: "#8a99a0" canvas: "#091a23" surface-1: "#163341" surface-2: "#2d4754" hairline: "#163341" link-blue: "#0073e6" accent-violet: "#c795e3" accent-amber: "#f8c555" shadow: "#000000" typography: display-xl: fontFamily: "primaryFont, \"primaryFont Fallback\", \"Space Grotesk\", sans-serif" fontSize: 120px fontWeight: 500 lineHeight: 98.4px letterSpacing: "-1.2px" display-md: fontFamily: "\"Space Grotesk\", \"Space Grotesk Fallback\", sans-serif" fontSize: 32px fontWeight: 500 lineHeight: 38.4px letterSpacing: 0 heading-md: fontFamily: "\"Space Grotesk\", \"Space Grotesk Fallback\", sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 28.8px letterSpacing: 0 heading-sm: fontFamily: "\"Space Grotesk\", \"Space Grotesk Fallback\", sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 27px letterSpacing: 0 body-lg: fontFamily: "\"Space Grotesk\", \"Space Grotesk Fallback\", sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 27px letterSpacing: 0 body-md: fontFamily: "\"Space Grotesk\", \"Space Grotesk Fallback\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 25.6px letterSpacing: 0 body-sm: fontFamily: "\"Space Grotesk\", \"Space Grotesk Fallback\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 21px letterSpacing: 0 button-md: fontFamily: "\"Space Grotesk\", \"Space Grotesk Fallback\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 21px letterSpacing: 0 mono-label: fontFamily: "\"Space Mono\", \"Space Mono Fallback\", monospace" fontSize: 12px fontWeight: 400 lineHeight: 14.4px letterSpacing: "1.5px" mono-code: fontFamily: "\"Space Mono\", \"Space Mono Fallback\", monospace" fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: 0 rounded: none: "0px" xs: "4px" sm: "5px" md: "10px" lg: "14px" pill: "200px" full: "9999px" spacing: xs: "8px" sm: "10px" md: "12px" base: "14px" lg: "16px" xl: "20px" 2xl: "24px" 3xl: "32px" 4xl: "72px" components: button-primary: backgroundColor: "{colors.primary-fill}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "10px 24px" height: "43px" borderColor: "{colors.redis-red}" button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "10px 24px" height: "43px" borderColor: "{colors.primary-hover}" button-secondary: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "10px 24px" height: "43px" borderColor: "{colors.primary}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "0px 80px" height: "70px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "5px 10px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" body-paragraph-bright: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" mono-caption: backgroundColor: "transparent" textColor: "{colors.yellow-voltage}" typography: "{typography.mono-label}" card-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "24px" borderColor: "{colors.surface-1}" card-elevated: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "24px" code-block: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.mono-code}" rounded: "{rounded.md}" padding: "16px" borderColor: "{colors.surface-1}" category-tab: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" rounded: "{rounded.pill}" padding: "5px 10px" height: "32px" borderColor: "{colors.surface-1}" category-tab-active: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.pill}" padding: "5px 10px" height: "32px" --- ## 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 | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 120px | 500 | 98.4px | -1.2px | Hero h1 ("YOUR AGENT WITH REAL-TIME CONTEXT") — uppercase | | `{typography.display-md}` | 32px | 500 | 38.4px | 0 | Section h2 ("Start building in minutes", "Join the Redis community") | | `{typography.heading-md}` | 24px | 500 | 28.8px | 0 | Sub-section titles | | `{typography.heading-sm}` | 18px | 500 | 27px | 0 | Feature-card titles | | `{typography.body-lg}` | 18px | 400 | 27px | 0 | Lead paragraph beneath the hero | | `{typography.body-md}` | 16px | 400 | 25.6px | 0 | Default running text | | `{typography.body-sm}` | 14px | 400 | 21px | 0 | Caption rows, button labels, nav text | | `{typography.button-md}` | 14px | 500 | 21px | 0 | Primary and secondary button labels | | `{typography.mono-label}` | 12px | 400 | 14.4px | 1.5px | Uppercase small-caps labels above sections | | `{typography.mono-code}` | 12px | 400 | 18px | 0 | Code blocks, inline `kbd` strips | ### 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.