Typography
Use rem for measurements that should scale with the root font size, and keep px for intentionally pixel-specific or optical values. Base conversion: 1rem = 16px.
Redis uses two font families, assigned to CSS custom properties.
Font Families
| Variable |
Font Family |
Type |
Weights |
Usage |
--primary-font |
Space Grotesk |
Sans-serif |
400, 500, 700 |
Large display headings (h1, hero text), Body text, smaller headings, buttons, UI |
--secondary-font |
Space Mono |
Monospace |
400, 700 |
Code, eyebrow labels, technical text |
Always include a sans-serif fallback for primary and primary fonts, and monospace for the secondary font.
Heading Scale
Headings use the primary font at large display sizes and transition to the primary font for smaller headings.
| Size Token |
Font |
Desktop Size |
Mobile Size |
Line Height |
Notes |
3xl |
--primary-font |
11.25rem |
5.25rem |
90% |
letter-spacing: -0.01em |
2xl |
--primary-font |
6.25rem |
5rem |
85% |
uppercase, letter-spacing: -1px |
xl |
--primary-font |
7.5rem |
5rem |
82% |
letter-spacing: -0.01em |
lg |
--primary-font |
4rem |
2.5rem |
105% |
|
md |
--primary-font |
3.125rem |
1.875rem |
110% |
letter-spacing: -0.02em |
rg |
--primary-font |
2.5rem |
1.875rem |
105% |
|
sm |
--primary-font |
1.625rem |
1.375rem |
1.9375rem |
|
xs |
--secondary-font |
0.875rem |
0.75rem |
1.05rem |
letter-spacing: 1px |
Body Text Scale
Body text always uses --primary-font (Space Grotesk).
| Size Token |
Desktop Size |
Mobile Size |
Line Height |
3xl |
2rem |
1.5rem |
120% |
2xl |
1.5rem |
— |
120% |
xl |
1.375rem |
— |
— |
lg |
1.25rem |
— |
145% |
md |
1.125rem |
— |
150% |
sm |
1rem |
0.875rem |
160% |
rg |
0.875rem |
0.75rem |
150% |
xs |
0.75rem |
— |
150% |
2xs |
0.625rem |
— |
150% |
Font Weights
| Token |
Weight |
regular |
400 |
medium |
500 |
semibold |
600 |
bold |
700 |
Colors
Brand Core
| Name |
Variable |
Hex |
Usage |
| Primary Color |
--primary-color |
#FF4438 |
Primary brand color |
| Midnight |
--midnight |
#091A23 |
Dark backgrounds, primary text |
| Yellow (Volt) |
--yellow |
#DCFF1E |
Accent on dark, highlights |
| White |
--base-white |
#FFFFFF |
Light backgrounds |
| Black |
--base-black |
#000000 |
— |
Red / Hyper Scale
The primary action color scale, used for buttons, links, and interactive elements.
| Name |
Variable |
Hex |
Usage |
| Hyper 04 |
--hyper-04 |
#FD736A |
Light red, hover accents |
| Hyper 05 |
--hyper-05 |
#FF4438 |
Same as Primary Color |
| Hyper 06 |
--hyper-06 |
#EB352A |
Slightly darker red |
| Hyper 07 |
--hyper-07 |
#E4291E |
Primary button bg, links |
| Hyper 08 |
--hyper-08 |
#D1281E |
Button hover bg |
| Hyper 09 |
--hyper-09 |
#8A221C |
Deep red, active states |
| Hyper 10 |
--hyper-10 |
#351D22 |
Darkest red, dark theme buttons |
Neutrals (Black Scale)
| Name |
Variable |
Hex |
| Black 90 |
--black-90 |
#191919 |
| Black 70 |
--black-70 |
#4C4C4C |
| Black 60 |
--black-60 |
#6D6E71 |
| Black 50 |
--black-50 |
#808080 |
| Black 30 |
--black-30 |
#B2B2B2 |
| Black 10 |
--black-10 |
#E5E5E5 |
Neutrals (Grey Scale)
| Name |
Variable |
Hex |
| Grey 50 |
--grey-50 |
#F9FAFB |
| Grey 20 |
--grey-20 |
#E9E9E9 |
| Grey 10 |
--grey-10 |
#FCFCFC |
| Light Gray |
--light-gray |
#F8F8F8 |
Dusk Scale (Blue-Grey)
Used for dark themes, muted text, borders, and subtle backgrounds.
| Name |
Variable |
Hex |
Usage |
| Dusk |
--dusk |
#163341 |
Dark UI surfaces |
| Dusk 01 |
--dusk-01 |
#F3F3F3 |
Light primary button bg |
| Dusk 09 |
--dusk-09 |
#0D212C |
Deepest dark surface |
| Dusk 90 |
--dusk-90 |
#2D4754 |
Dark surface variant |
| Dusk 50 |
--dusk-50 |
#8A99A0 |
Placeholder text, dividers |
| Dusk 30 |
--dusk-30 |
#B9C2C6 |
Borders, muted text (dark theme) |
| Dusk 10 |
--dusk-10 |
#D9D9D9 |
Borders, body text (dark theme) |
Yellow / Volt Scale
Used as an accent color, especially on dark backgrounds.
| Name |
Variable |
Hex |
| Yellow |
--yellow |
#DCFF1E |
| Yellow 06 |
--yellow-06 |
#D0F41D |
| Yellow 07 |
--yellow-07 |
#BFE112 |
| Yellow 08 |
--yellow-08 |
#A9CA03 |
| Yellow 09 |
--yellow-09 |
#8CAA00 |
| Yellow 11 |
--yellow-11 |
#4E5F02 |
| Yellow 50 |
--yellow-50 |
#F1FFA5 |
| Yellow 10 |
--yellow-10 |
#FBFFE8 |
Purple Scale
| Name |
Variable |
Hex |
| Purple 05 |
--purple-05 |
#B76BE2 |
| Purple 07 |
--purple-07 |
#8F2EC4 |
| Violet |
--violet |
#C795E3 |
| Violet 90 |
--violet-90 |
#5925E8 |
| Violet 50 |
--violet-50 |
#E3CAF1 |
| Violet 10 |
--violet-10 |
#F9F4FC |
| Violet 09 |
--violet-09 |
#592479 |
Sky Blue Scale
| Name |
Variable |
Hex |
| Sky Blue |
--sky-blue |
#80DBFF |
| Sky Blue 50 |
--sky-blue-50 |
#BFEDFF |
| Sky Blue 10 |
--sky-blue-10 |
#F2FBFF |
| Sky Blue 09 |
--sky-blue-09 |
#0477A5 |
| Light Blue |
--light-blue |
#F9FDFF |
Theming
Redis uses a dark theme
Dark Theme
| Semantic Token |
Maps To |
Resolved Value |
--bg-default |
--midnight |
#091A23 |
--fg-default |
--base-white |
#FFFFFF |
--fg-body |
--dusk-10 |
#D9D9D9 |
--fg-muted |
--dusk-30 |
#B9C2C6 |
--fg-brand |
--yellow |
#DCFF1E |
--border |
--dusk |
#163341 |
--stroke-divider |
--dusk-50 |
#8A99A0 |
Buttons
Primary Button (Dark Theme)
| State |
Background |
Border |
Text Color |
| Default |
--hyper-10 |
--hyper-05 |
--base-white |
| Hover |
--hyper-09 |
--hyper-06 |
--base-white |
| Active |
--hyper-09 |
--hyper-06 |
--base-white |
Secondary Button (Dark Theme)
| State |
Background |
Border |
Text Color |
| Default |
--dusk |
--dusk-90 |
--base-white |
| Hover |
--dusk-90 |
--dusk-70 |
--base-white |
| Active |
--dusk-90 |
--dusk-70 |
--base-white |
Button Styling
- Font:
--primary-font (Space Grotesk), 0.875rem, weight 500
- Border: 1px solid
- Variants:
pill (border-radius: 200px), rounded (border-radius: 5px), square (border-radius: 0)
- Size tokens:
xs (0.25rem 0.5rem), sm (0.5rem 0.75rem), md (0.625rem 1.5rem), lg (0.9375rem 2.25rem)
Spacing Tokens
| Token |
Desktop |
Mobile |
xs |
1rem |
1rem |
sm |
1.5rem |
1.5rem |
md |
2.5rem |
2rem |
rg |
3rem |
2.625rem |
lg |
4.5rem |
3.875rem |
xl |
6rem |
3.75rem |
Layout
- Max container width: 86.875rem (80rem below 100rem viewport)
- Container padding: 1.5rem (5rem between 78.75rem–100rem viewport)
- Base font size: 16px (1rem)
- Text rendering:
optimizeLegibility with -webkit-font-smoothing: antialiased
Redis Logo
The official Redis logo is available in four color variants as SVG files.
Directory: assets/Redis Logo/
| Variant |
File |
Usage |
| Red |
Redis_Logo_Red_RGB.svg |
Primary logo on light backgrounds |
| Black |
Redis_Logo_Black_RGB.svg |
Monochrome use on light backgrounds |
| Midnight |
Redis_Logo_Midnight_RGB.svg |
Dark-toned logo for dark-themed contexts |
| White |
Redis_Logo_White_RGB.svg |
Logo for use on dark backgrounds |
Icons
For icon assets (Generic Marketing, Product Feature, Industry, and Redis Proprietary icons), see references/icons.md.
1---2name: redis-visual-guide3description: Use when building frontend apps or UI components.4license: See LICENSE in repository root5---67## Typography89Use `rem` for measurements that should scale with the root font size, and keep `px` for intentionally pixel-specific or optical values. Base conversion: `1rem = 16px`.1011Redis uses two font families, assigned to CSS custom properties.1213### Font Families1415| Variable | Font Family | Type | Weights | Usage |16| ------------------ | ------------- | ---------- | ------------- | -------------------------------------------------------------------------------- |17| `--primary-font` | Space Grotesk | Sans-serif | 400, 500, 700 | Large display headings (h1, hero text), Body text, smaller headings, buttons, UI |18| `--secondary-font` | Space Mono | Monospace | 400, 700 | Code, eyebrow labels, technical text |1920Always include a `sans-serif` fallback for primary and primary fonts, and `monospace` for the secondary font.2122### Heading Scale2324Headings use the primary font at large display sizes and transition to the primary font for smaller headings.2526| Size Token | Font | Desktop Size | Mobile Size | Line Height | Notes |27| ---------- | ------------------ | ------------ | ----------- | ----------- | ------------------------------- |28| `3xl` | `--primary-font` | 11.25rem | 5.25rem | 90% | letter-spacing: -0.01em |29| `2xl` | `--primary-font` | 6.25rem | 5rem | 85% | uppercase, letter-spacing: -1px |30| `xl` | `--primary-font` | 7.5rem | 5rem | 82% | letter-spacing: -0.01em |31| `lg` | `--primary-font` | 4rem | 2.5rem | 105% | |32| `md` | `--primary-font` | 3.125rem | 1.875rem | 110% | letter-spacing: -0.02em |33| `rg` | `--primary-font` | 2.5rem | 1.875rem | 105% | |34| `sm` | `--primary-font` | 1.625rem | 1.375rem | 1.9375rem | |35| `xs` | `--secondary-font` | 0.875rem | 0.75rem | 1.05rem | letter-spacing: 1px |3637### Body Text Scale3839Body text always uses `--primary-font` (Space Grotesk).4041| Size Token | Desktop Size | Mobile Size | Line Height |42| ---------- | ------------ | ----------- | ----------- |43| `3xl` | 2rem | 1.5rem | 120% |44| `2xl` | 1.5rem | — | 120% |45| `xl` | 1.375rem | — | — |46| `lg` | 1.25rem | — | 145% |47| `md` | 1.125rem | — | 150% |48| `sm` | 1rem | 0.875rem | 160% |49| `rg` | 0.875rem | 0.75rem | 150% |50| `xs` | 0.75rem | — | 150% |51| `2xs` | 0.625rem | — | 150% |5253### Font Weights5455| Token | Weight |56| ---------- | ------ |57| `regular` | 400 |58| `medium` | 500 |59| `semibold` | 600 |60| `bold` | 700 |6162## Colors6364### Brand Core6566| Name | Variable | Hex | Usage |67| ------------- | ----------------- | --------- | ------------------------------ |68| Primary Color | `--primary-color` | `#FF4438` | Primary brand color |69| Midnight | `--midnight` | `#091A23` | Dark backgrounds, primary text |70| Yellow (Volt) | `--yellow` | `#DCFF1E` | Accent on dark, highlights |71| White | `--base-white` | `#FFFFFF` | Light backgrounds |72| Black | `--base-black` | `#000000` | — |7374### Red / Hyper Scale7576The primary action color scale, used for buttons, links, and interactive elements.7778| Name | Variable | Hex | Usage |79| -------- | ------------ | --------- | ------------------------------- |80| Hyper 04 | `--hyper-04` | `#FD736A` | Light red, hover accents |81| Hyper 05 | `--hyper-05` | `#FF4438` | Same as Primary Color |82| Hyper 06 | `--hyper-06` | `#EB352A` | Slightly darker red |83| Hyper 07 | `--hyper-07` | `#E4291E` | Primary button bg, links |84| Hyper 08 | `--hyper-08` | `#D1281E` | Button hover bg |85| Hyper 09 | `--hyper-09` | `#8A221C` | Deep red, active states |86| Hyper 10 | `--hyper-10` | `#351D22` | Darkest red, dark theme buttons |8788### Neutrals (Black Scale)8990| Name | Variable | Hex |91| -------- | ------------ | --------- |92| Black 90 | `--black-90` | `#191919` |93| Black 70 | `--black-70` | `#4C4C4C` |94| Black 60 | `--black-60` | `#6D6E71` |95| Black 50 | `--black-50` | `#808080` |96| Black 30 | `--black-30` | `#B2B2B2` |97| Black 10 | `--black-10` | `#E5E5E5` |9899### Neutrals (Grey Scale)100101| Name | Variable | Hex |102| ---------- | -------------- | --------- |103| Grey 50 | `--grey-50` | `#F9FAFB` |104| Grey 20 | `--grey-20` | `#E9E9E9` |105| Grey 10 | `--grey-10` | `#FCFCFC` |106| Light Gray | `--light-gray` | `#F8F8F8` |107108### Dusk Scale (Blue-Grey)109110Used for dark themes, muted text, borders, and subtle backgrounds.111112| Name | Variable | Hex | Usage |113| ------- | ----------- | --------- | -------------------------------- |114| Dusk | `--dusk` | `#163341` | Dark UI surfaces |115| Dusk 01 | `--dusk-01` | `#F3F3F3` | Light primary button bg |116| Dusk 09 | `--dusk-09` | `#0D212C` | Deepest dark surface |117| Dusk 90 | `--dusk-90` | `#2D4754` | Dark surface variant |118| Dusk 50 | `--dusk-50` | `#8A99A0` | Placeholder text, dividers |119| Dusk 30 | `--dusk-30` | `#B9C2C6` | Borders, muted text (dark theme) |120| Dusk 10 | `--dusk-10` | `#D9D9D9` | Borders, body text (dark theme) |121122### Yellow / Volt Scale123124Used as an accent color, especially on dark backgrounds.125126| Name | Variable | Hex |127| --------- | ------------- | --------- |128| Yellow | `--yellow` | `#DCFF1E` |129| Yellow 06 | `--yellow-06` | `#D0F41D` |130| Yellow 07 | `--yellow-07` | `#BFE112` |131| Yellow 08 | `--yellow-08` | `#A9CA03` |132| Yellow 09 | `--yellow-09` | `#8CAA00` |133| Yellow 11 | `--yellow-11` | `#4E5F02` |134| Yellow 50 | `--yellow-50` | `#F1FFA5` |135| Yellow 10 | `--yellow-10` | `#FBFFE8` |136137### Purple Scale138139| Name | Variable | Hex |140| --------- | ------------- | --------- |141| Purple 05 | `--purple-05` | `#B76BE2` |142| Purple 07 | `--purple-07` | `#8F2EC4` |143| Violet | `--violet` | `#C795E3` |144| Violet 90 | `--violet-90` | `#5925E8` |145| Violet 50 | `--violet-50` | `#E3CAF1` |146| Violet 10 | `--violet-10` | `#F9F4FC` |147| Violet 09 | `--violet-09` | `#592479` |148149### Sky Blue Scale150151| Name | Variable | Hex |152| ----------- | --------------- | --------- |153| Sky Blue | `--sky-blue` | `#80DBFF` |154| Sky Blue 50 | `--sky-blue-50` | `#BFEDFF` |155| Sky Blue 10 | `--sky-blue-10` | `#F2FBFF` |156| Sky Blue 09 | `--sky-blue-09` | `#0477A5` |157| Light Blue | `--light-blue` | `#F9FDFF` |158159## Theming160161Redis uses a dark theme162163### Dark Theme164165| Semantic Token | Maps To | Resolved Value |166| ------------------ | -------------- | -------------- |167| `--bg-default` | `--midnight` | `#091A23` |168| `--fg-default` | `--base-white` | `#FFFFFF` |169| `--fg-body` | `--dusk-10` | `#D9D9D9` |170| `--fg-muted` | `--dusk-30` | `#B9C2C6` |171| `--fg-brand` | `--yellow` | `#DCFF1E` |172| `--border` | `--dusk` | `#163341` |173| `--stroke-divider` | `--dusk-50` | `#8A99A0` |174175## Buttons176177### Primary Button (Dark Theme)178179| State | Background | Border | Text Color |180| ------- | ------------ | ------------ | -------------- |181| Default | `--hyper-10` | `--hyper-05` | `--base-white` |182| Hover | `--hyper-09` | `--hyper-06` | `--base-white` |183| Active | `--hyper-09` | `--hyper-06` | `--base-white` |184185### Secondary Button (Dark Theme)186187| State | Background | Border | Text Color |188| ------- | ----------- | ----------- | -------------- |189| Default | `--dusk` | `--dusk-90` | `--base-white` |190| Hover | `--dusk-90` | `--dusk-70` | `--base-white` |191| Active | `--dusk-90` | `--dusk-70` | `--base-white` |192193### Button Styling194195- Font: `--primary-font` (Space Grotesk), 0.875rem, weight 500196- Border: 1px solid197- Variants: `pill` (border-radius: 200px), `rounded` (border-radius: 5px), `square` (border-radius: 0)198- Size tokens: `xs` (0.25rem 0.5rem), `sm` (0.5rem 0.75rem), `md` (0.625rem 1.5rem), `lg` (0.9375rem 2.25rem)199200## Spacing Tokens201202| Token | Desktop | Mobile |203| ----- | ------- | ------ |204| `xs` | 1rem | 1rem |205| `sm` | 1.5rem | 1.5rem |206| `md` | 2.5rem | 2rem |207| `rg` | 3rem | 2.625rem |208| `lg` | 4.5rem | 3.875rem |209| `xl` | 6rem | 3.75rem |210211## Layout212213- Max container width: 86.875rem (80rem below 100rem viewport)214- Container padding: 1.5rem (5rem between 78.75rem–100rem viewport)215- Base font size: 16px (1rem)216- Text rendering: `optimizeLegibility` with `-webkit-font-smoothing: antialiased`217218## Redis Logo219220The official Redis logo is available in four color variants as SVG files.221222Directory: `assets/Redis Logo/`223224| Variant | File | Usage |225| -------- | ----------------------------- | ------------------------------------------ |226| Red | `Redis_Logo_Red_RGB.svg` | Primary logo on light backgrounds |227| Black | `Redis_Logo_Black_RGB.svg` | Monochrome use on light backgrounds |228| Midnight | `Redis_Logo_Midnight_RGB.svg` | Dark-toned logo for dark-themed contexts |229| White | `Redis_Logo_White_RGB.svg` | Logo for use on dark backgrounds |230231## Icons232233For icon assets (Generic Marketing, Product Feature, Industry, and Redis Proprietary icons), see [references/icons.md](references/icons.md).
RedisCode