Redis Brand UI Guidelines

When to Apply

• Building any UI that carries the Redis brand
• Creating marketing pages, landing pages, or documentation sites
• Styling dashboards, admin panels, or developer tools for Redis products
• Implementing components in React, Next.js, or any web framework
• Configuring Tailwind CSS or HeroUI/NextUI themes for Redis projects

Core Rules

Colors

• Use

  #FF4438

  (Redis Red) as the primary action color for buttons, links, and CTAs.
• Use

  #091A23

  for primary text and

  #163341

  for secondary text. Never use pure black (

  #000

  ).
• Use

  #FFFFFF

  for page backgrounds. Use

  #B9C2C6

  sparingly for tertiary backgrounds.
• See colors reference for the full palette, CSS variables, and Tailwind config.

Typography

• Import Space Grotesk (weights 300–700) for all body text, headings H2–H3, and UI labels.
• Import Space Mono for code blocks, navigation labels, and H1 headings only.
• Never use system fonts or other typefaces in Redis-branded interfaces.
• See typography reference for font imports, sizes, and Tailwind config.

Components

• Primary buttons:

  #FF4438

  background, white text,

  5px

  border-radius.
• Secondary buttons: transparent background,

  #163341

  border, dark text.
• All interactive elements:

  transition: all 0.2s ease-in-out

  .
• Use

  8px

  as the base grid unit for all spacing.
• See components reference for full button/card/form specs and HeroUI theme.

Dark Mode

• Maintain Redis Red (

  #FF4438

  ) as the primary accent in dark mode.
• Invert background/text relationships — dark backgrounds with light text.
• Never reduce the prominence of the Redis Red brand color in dark contexts.
• See dark mode reference for the full dark palette and CSS setup.

Logos

• Download official logos from brand.redis.io/document/18.
• Use the cube mark for favicons and small icon contexts (minimum 24px).
• Use the full lockup (mark + wordmark) for headers and marketing pages (minimum 80px wide).
• Always maintain clear space equal to 25% of the logo height on all sides.
• NEVER recreate the logo in CSS/HTML — always use the official SVG asset.
• See logos reference for all variants, sizing rules, and usage examples.

Anti-Pattern Guardrails

• Use arbitrary red values (

  #FF0000

  ,

  #E53E3E

  ,

  red-500

  ). Always use

  #FF4438

  .
• Use pure black (

  #000000

  ) for text or backgrounds. Use

  #091A23

  instead.
• Mix Space Mono into body copy or long-form text — it is for code and nav only.
• Use Space Grotesk for code blocks — always use Space Mono.
• Use border-radius values other than

  5px

  for standard components.
• Use spacing values that aren't multiples of

  8px

  .
• Omit hover/focus states on interactive elements.
• Use Tailwind's default color palette names (

  red-500

  ,

  gray-900

  ) — use the custom Redis token names.

Reference Files

Quick Start Checklist

1. Add Google Fonts imports for Space Grotesk and Space Mono
2. Configure CSS custom properties from colors
3. Extend Tailwind theme with Redis tokens from reference files
4. Apply component patterns from components
5. Implement dark mode using dark-mode mappings