redis-brand-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Redis Brand UI Guidelines

Redis 品牌UI指南

Actionable rules for implementing the Redis visual identity in frontend applications. All values are derived from the official Redis brand portal (https://brand.redis.io).

在前端应用中实现Redis视觉标识的可操作规则。所有值均源自Redis官方品牌门户(https://brand.redis.io)。

When to Apply

适用场景

Use these guidelines when:

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

在以下场景中使用本指南：

构建任何带有Redis品牌的UI
创建营销页面、落地页或文档站点
为Redis产品设计仪表板、管理面板或开发者工具的样式
在React、Next.js或任何Web框架中实现组件
为Redis项目配置Tailwind CSS或HeroUI/NextUI主题

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.

使用
```
#FF4438
```
（Redis红）作为按钮、链接和CTA的主要操作色。
主文本使用
```
#091A23
```
，次要文本使用
```
#163341
```
。切勿使用纯黑色(
```
#000
```
)。
页面背景使用
```
#FFFFFF
```
。 tertiary背景可少量使用
```
#B9C2C6
```
。
完整调色板、CSS变量和Tailwind配置请查看颜色参考。

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.

导入Space Grotesk（字重300–700）用于所有正文、H2-H3标题和UI标签。
仅在代码块、导航标签和H1标题中导入Space Mono。
在Redis品牌界面中切勿使用系统字体或其他字体。
字体导入、字号和Tailwind配置请查看排版参考。

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.

主按钮：背景色
```
#FF4438
```
，文字白色，圆角
```
5px
```
。
次要按钮：透明背景，边框
```
#163341
```
，文字深色。
所有交互元素：
```
transition: all 0.2s ease-in-out
```
。
所有间距使用
```
8px
```
作为基础网格单位。
完整的按钮/卡片/表单规范和HeroUI主题请查看组件参考。

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.

在深色模式下，仍将Redis红(
```
#FF4438
```
)作为主要强调色。
反转背景/文字关系——深色背景搭配浅色文字。
在深色场景中，切勿降低Redis红品牌色的显眼程度。
完整深色调色板和CSS设置请查看深色模式参考。

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.

从brand.redis.io/document/18下载官方标志。
在网站图标和小图标场景中使用立方体标志（最小尺寸24px）。
在页眉和营销页面中使用完整组合标志（标志+文字标志，最小宽度80px）。
始终在标志四周保留等于标志高度25%的空白区域。
切勿用CSS/HTML重新制作标志——务必使用官方SVG资源。
所有标志变体、尺寸规则和使用示例请查看标志参考。

Anti-Pattern Guardrails

反模式约束

DO NOT:

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.

切勿：

使用任意红色值(
```
#FF0000
```
、
```
#E53E3E
```
、
```
red-500
```
)。请始终使用
```
#FF4438
```
。
为文字或背景使用纯黑色(
```
#000000
```
)。请改用
```
#091A23
```
。
将Space Mono混入正文或长文本中——它仅用于代码和导航。
为代码块使用Space Grotesk——请始终使用Space Mono。
为标准组件使用
```
5px
```
以外的圆角值。
使用非8px倍数的间距值。
省略交互元素的悬停/聚焦状态。
使用Tailwind的默认调色板名称(
```
red-500
```
、
```
gray-900
```
)——请使用自定义的Redis令牌名称。

Reference Files

参考文件

File	Contents
colors	Full palette, CSS custom properties, Tailwind extend config, accessibility notes
typography	Google Fonts imports, heading/body styles, font family config
components	Buttons, cards, forms, React examples, HeroUI/NextUI theme object
dark-mode	Dark palette, prefers-color-scheme setup, Tailwind dark variants
Logos	Logo variants, clear space, sizing, favicon setup

文件	内容
colors	完整调色板、CSS自定义属性、Tailwind扩展配置、无障碍说明
typography	Google Fonts导入、标题/正文样式、字体系列配置
components	按钮、卡片、表单、React示例、HeroUI/NextUI主题对象
dark-mode	深色调色板、prefers-color-scheme设置、Tailwind深色变体
Logos	标志变体、空白区域、尺寸设置、网站图标配置

Quick Start Checklist

快速开始检查清单

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

添加Space Grotesk和Space Mono的Google Fonts导入
从colors配置CSS自定义属性
使用参考文件中的Redis令牌扩展Tailwind主题
应用components中的组件模式
使用dark-mode映射实现深色模式