Rackspace Brand Design System Deep Dive

1. Brand Overview

Rackspace's visual language is exactly what you'd expect from a cloud technology company with enterprise clients: sharp, confident, and functional. This is not playful SaaS branding. It's serious. The design system leans on high-contrast colors, bold typography weights, and tight spacing—clear signals of a brand that wants to feel reliable, performance-oriented, and enterprise-grade.

The vibe is tech authority meets accessibility. Rackspace isn’t chasing trendy gradients or overly soft UI. Instead, they’ve doubled down on high saturation reds (their signature), deep navy blues, and a strict typographic system based on Open Sans. This keeps everything predictable and easy to read at scale, across devices.

The philosophy here is consistency over novelty. Every interactive element has an opinionated state change—hover colors, active borders, focus outlines—so the user always knows what’s clickable. Buttons are unapologetically rectangular with zero corner rounding in primary variants. That sharpness reinforces their no-nonsense approach.

Audience-wise, this system is built for IT decision-makers, engineers, and enterprise buyers. The tone says: “We’re solid. We’re here to solve problems, not entertain you.” The design does not try to seduce with visual flourishes—its job is clarity and trust.

They nailed the alignment between brand voice and design mechanics. The site feels like an enterprise dashboard scaled up for marketing: grid-based, color-coded, and structured for scanning.

2. Color System

2.1 Primary Colors

The hero color is Rackspace Red—#eb0000. This is the CTA workhorse. It shows up on primary buttons, banners, and key callouts. It’s aggressive, which works. Red signals urgency, action, and energy. In enterprise tech, this can be risky (red is also a warning color), but Rackspace leans into it as a brand signature.

This red is paired with deep navy (rgb(22, 19, 72)), which is used as the semantic secondary color. Navy grounds the palette, balancing the high-energy red with stability.

Competitor comparison: AWS leans orange, Azure leans blue. Rackspace’s red makes them instantly distinct in the cloud space.

2.2 Complete Palette

2.3 Color Relationships

High contrast across the board. White (#ffffff) over Rackspace Red (#eb0000) is WCAG AA compliant. Black (#000000) over white is AAA. The link blue (#0000ee) is the old-school HTML anchor color—readable but slightly dated.

Dark mode? Not implemented here. The palette is tuned for light backgrounds. Navy and dark grays would adapt well, but red-on-dark would need careful contrast management.

2.4 Usage Guide

• Do pair: Rackspace Red with white text for CTAs. Navy backgrounds with white or light gray text for hero sections.
• Avoid: Red text on white for body copy—it reads as an error state.
• Links: Keep link blue underlined by default. The hover removes the underline, which is fine here because color change is strong enough.
• Secondary accents: Purple is rare—use sparingly in diagrams or infographics.

3. Typography

3.1 Font Families

Everything is Open Sans. No fallbacks listed, but standard would be Open Sans, sans-serif. There’s no custom or variable font here—pure static weights.

Notably, they use a wide range of weights: 300 (light) up to 900 (black). This allows clear hierarchy without changing font family.

3.2 Type Scale

3.3 Hierarchy

Huge jumps in size for headings—42px, 36px, 34px—give flexibility depending on viewport and section importance. The heavy weights (700–900) on links and buttons make them stand out against body copy (400). Uppercase transforms are reserved for selected headings and buttons, reinforcing emphasis.

4. Spacing & Layout

4.1 Spacing Scale

Base grid is 8px—confirmed in scaleType.

Common values:

4.2 Layout

Breakpoints span mobile (360px) to ultra-wide (2140px). This is a true responsive system with dozens of breakpoints—probably to handle precise component reflows.

5. Visual Elements

• Border radius: Mostly sharp. Primary buttons have 0px radius. Small UI elements get 2px radius. Circular elements use 50%. One oddball: 100px for pill-like buttons or avatars.
• Shadows: Rare. Some buttons use subtle shadows (rgba(0, 0, 0, 0.14) 0px 1px 3px) but overall the system prefers borders for separation.
• Borders: Heavy use of 1px solid in greys and reds. Dividers are often 0px 0px 1px solid #333333.

6. Components

6.1 Buttons

Primary CTA (button_slick button--border button--border-banner):

• Default: bg #eb0000, text #ffffff, padding 15px 40px, border radius 0px, border 0px none #ffffff.
• Hover: bg #ffffff, text #2285f7, border 2px solid #ffffff, box-shadow 0px -1px 4px #000.
• Active: bg #007fff, text #333333, border 1px solid #003eff.
• Focus: bg #1eaedb, text #ffffff, border 1px solid #000, outline 1px solid #000, opacity 0.7.

Secondary CTA (ctaRiverButton):

• Default: transparent bg, text #ffffff, border 2px solid #ffffff.
• Hover: bg #ffffff, text #2285f7, border 2px solid #eb0000.

Back to Top button:

• Default: bg #000000, text #ffffff, padding 1px 6px, box-shadow #c9c9c9 0px 0px 2px.
• Hover: bg #1eaedb, border 2px solid #ffffff.

Gray utility button:

• Default: bg #616161, text #e2e2e2, border 1px solid #ffffff.

6.2 Links

Multiple link styles:

• Old-school blue (#0000ee), underlined by default, hover removes underline and changes to #3860be.
• White links (#ffffff) in nav, underlined default, hover removes underline and changes to #3860be.
• Dark red (#9e0000) text links.

6.3 Forms

No custom inputs in data—likely consistent with border-radius 2px, 1px solid gray borders.

6.4 Cards

No explicit card component in data, but shadows include a rgb(153, 153, 153) 0px 2px 10px -3px—likely for cards.

7. Design Tokens

:root {
  /* Colors */
  --color-text: #333333;
  --color-link-blue: #0000ee;
  --color-dark-red: #9e0000;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-medium: #636363;
  --color-brand-red: #eb0000;
  --color-light-gray: #c9c9c9;
  --color-purple: #95098a;
  --color-dark-gray: #555555;
  --color-lightest-gray: #efefef;
  --color-red-mid: #cd0808;
  --color-secondary-navy: #161348;

  /* Typography */
  --font-family-base: "Open Sans", sans-serif;

  /* Spacing */
  --space-2: 2px;
  --space-5: 5px;
  --space-7: 7px;
  --space-9_59: 9.59375px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-21: 21px;
  --space-25: 25px;
  --space-29_2: 29.2px;
  --space-30: 30px;
  --space-38_39: 38.3906px;
  --space-43_39: 43.3906px;
  --space-50: 50px;
  --space-60: 60px;
  --space-100: 100px;
  --space-192: 192px;
  --space-1104: 1104px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.14) 0px 1px 3px 0px;
  --shadow-md: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
}

8. AI Coding Assistant Prompt

# Rackspace Design System Specification

You are a Rackspace design expert. Build UIs matching their visual language exactly.

## Brand Context
Rackspace's design is sharp, enterprise-focused, and high-contrast. No playful elements—everything is functional and clear. The brand relies on bold reds, deep blues, and Open Sans typography to signal reliability and authority.

## Color Palette
- Text Gray: #333333 — Body text
- Link Blue: #0000ee — Default links
- Dark Red: #9e0000 — Secondary emphasis
- White: #ffffff — Backgrounds, text
- Black: #000000 — UI accents
- Gray Medium: #636363 — Secondary text
- Brand Red: #eb0000 — Primary CTAs
- Light Gray: #c9c9c9 — Dividers
- Purple: #95098a — Accent
- Dark Gray: #555555 — UI controls
- Lightest Gray: #efefef — Backgrounds
- Red Mid: #cd0808 — Hover/focus states
- Secondary Navy: #161348 — Secondary brand color

## Typography
Font: "Open Sans", sans-serif  
Use weights: 300–900

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 42px | 400 | 1.20 | Page titles |
| H1 | 36px | 400 | 1.20 | Section titles |
| H1 | 34px | 600 | 1.20 | Subtitles |
| Link | 30px | 300 | 0.73 | Hero links |
| Body | 16px | 400 | 1.38 | Paragraphs |
| Button | 16px | 700 | 1.00 | CTAs |

## Spacing & Grid
Base: 8px  
Tokens: 2px, 5px, 7px, 10px, 12px, 15px, 16px, 20px, 25px, 30px, 38.39px, 43.39px, 50px, 60px, 100px, 192px

## Border Radius
- none: 0px — Primary buttons
- sm: 2px — Inputs
- full: 50% — Circular elements

## Shadows & Depth
- shadow-sm: rgba(0,0,0,0.14) 0px 1px 3px
- shadow-md: rgba(0,0,0,0.2) 0px 4px 8px

## Components

### Primary Button
Default: bg #eb0000, color #ffffff, padding 15px 40px, radius 0px, border none  
Hover: bg #ffffff, color #2285f7, border 2px solid #ffffff  
Active: bg #007fff, color #333333, border 1px solid #003eff  
Focus: bg #1eaedb, color #ffffff, border 1px solid #000000, outline 1px solid #000000  

### Secondary Button
Default: transparent bg, color #ffffff, border 2px solid #ffffff  
Hover: bg #ffffff, color #2285f7, border 2px solid #eb0000  

### Navigation Links
Default: color #0000ee, underline  
Hover: color #3860be, no underline

## Layout & Responsive Rules
Max content width: 1104px  
Breakpoints: 360px, 768px, 1024px, 1440px, 1920px, 2140px

## Interaction Rules
Transitions: 150ms ease for state changes  
Focus: Always visible outline in brand colors  

## DO List
- Use only palette colors  
- Maintain 8px spacing grid  
- Keep primary buttons sharp corners  
- Use Open Sans for all text  
- Keep hover/focus clearly distinct  

## DON'T List
- Don't invent new colors  
- Don't mix rounded and sharp within same element  
- Don't remove focus outlines  
- Don't use shadows outside defined tokens  

## Code Examples

```css
.btn-primary {
  background: #eb0000;
  color: #ffffff;
  padding: 15px 40px;
  border-radius: 0px;
  font-weight: 900;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  color: #2285f7;
  border: 2px solid #ffffff;
}
```

```css
.card {
  background: #ffffff;
  border-radius: 2px;
  padding: 25px;
  box-shadow: rgba(0,0,0,0.14) 0px 1px 3px;
}
```

```css
.input {
  border: 1px solid #c9c9c9;
  border-radius: 2px;
  padding: 10px;
  font-size: 16px;
  background: #ffffff;
}
.input:focus {
  border-color: #eb0000;
  outline: none;
}
```

9. Summary

TL;DR — Rackspace’s design system is enterprise-first: bold red CTAs, sharp corners, Open Sans everywhere, and a strict spacing grid. It’s a functional, high-contrast system that prioritizes clarity over decoration.

Brand Keywords:

• enterprise-sharp
• red-driven
• grid-disciplined
• high-contrast-tech
• no-nonsense