Red Hat Design System Deep Dive

1. Brand Overview

Red Hat’s visual language is exactly what you’d expect from an enterprise open-source leader: confident, no-nonsense, and highly functional. This isn’t a brand chasing hyper-stylized gradients or playful rounded blobs. It’s rooted in clarity, with a strong black–white–red foundation and a disciplined use of type and spacing. The site feels like it’s speaking to IT professionals, developers, and decision-makers who value stability and trust over novelty.

The first impression is authority. The primary color is not a cheerful blue or a trendy pastel—it’s black (#151515) paired with Red Hat’s signature red (#ee0000 in tokens). Black backgrounds are common in hero sections, making the red accents pop hard. Typography is utilitarian but with personality: the custom Red Hat Display and Red Hat Text families carry the brand voice—technical but human.

Navigation and component styling reinforce this seriousness. You see minimal border radii (3px), almost no drop shadows, and a strong 8px spacing grid. This is industrial-grade design—think of it like the UI equivalent of a well-engineered server rack. It’s not trying to “delight” with frills; it’s trying to deliver information cleanly.

The design philosophy:

• Consistency over experimentation — every element feels part of the same system.
• Function before form — clarity in link states, predictable typography hierarchy.
• Minimal ornamentation — borders and dashed underlines replace shadows.
• High-contrast communication — black surfaces, white text, and red accents meet accessibility requirements.

The audience is technical and business-savvy. The UX reduces cognitive load; colors and typography act as signposts rather than decoration. The alignment with open-source ethos is clear: it’s about transparency, control, and reliability.

2. Color System

2.1 Primary Colors

Red Hat’s semantic primary is rgb(21, 21, 21) → #151515. This is unusual—most brands define their primary as their logo color. Here, black is the “primary” surface and text color in dark mode contexts. The actual brand red (#ee0000) exists in tokens (--pfe-theme--color--ui-accent, --rh-color-text-brand) and is used as an accent and brand identifier.

Why black works here:
Black conveys authority, stability, and seriousness. Paired with white text, it’s highly readable. In enterprise software, black backgrounds can help highlight code, diagrams, and product imagery without distraction.

Competitor comparison:

• IBM leans on blue (#003d73) — more corporate, less aggressive.
• Oracle uses red heavily in both backgrounds and typography — bolder but riskier for readability.
• Red Hat’s black base avoids red overload and lets the logo stand out.

2.2 Complete Palette

2.3 Color Relationships

There’s a clear separation between functional colors (status, interactive) and brand colors (red accent, black surface). Blue (#0066cc) is the workhorse for links and CTAs. Red is reserved for branding and critical accents. Status colors are consistent with PatternFly standards (since Red Hat contributes to PatternFly).

Contrast: White text (#ffffff) on black (#151515) gives a 15.5:1 ratio—well above WCAG AAA. Blue links on white (~8.6:1) are also safe. The dashed link style in light blue (#92c5f9) on white is borderline for small text—it’s decorative, not primary.

Dark mode: Tokens use light-dark() syntax for surfaces and borders, meaning colors adapt for dark/light themes without separate classes.

2.4 Usage Guide

• Use #0066cc for all primary interactive elements—buttons, links, focus states.
• Reserve #ee0000 for brand identity: logos, key headings, critical alerts.
• Avoid using red for links—it’s reserved for brand and destructive actions.
• For success/warning/error states, stick to tokenized greens, yellows, and reds from pf-global values.
• On dark surfaces (#151515), ensure text is white or light gray for readability.
• Never mix #92c5f9 dashed underline style with solid link styles—it breaks consistency.

3. Typography

3.1 Font Families

Red Hat uses RedHatDisplay for headings and prominent UI text, and RedHatText for body copy. Both have Helvetica and Arial fallbacks. Some headings also use Overpass in specific contexts.

Sources:

• No Google Fonts or Adobe Fonts—these are custom, likely self-hosted.
• No variable fonts detected.

3.2 Type Scale

3.3 Hierarchy

Large headings (48px, 36px) are rare—used in hero and major section titles. Mid-range (28px, 24px) handle most subheadings. Body text sits at 16–18px with generous line height (1.5), optimizing readability for technical content.

Weights are mostly 400, with occasional 500/600 for emphasis—never extreme bold. The absence of italics keeps the tone factual. Link sizes vary from 12px to 24px depending on context—navigation vs in-body links.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. All spacing values are multiples of 8 or their halves.

4.2 Layout

Breakpoints are granular: from 404px up to 1920px, with common device widths covered (576px, 768px, 992px, 1200px, 1440px). This suggests a responsive grid that adapts at both small and large increments—likely to optimize for complex dashboards and marketing pages.

5. Visual Elements

• Border Radius: Minimal. Common is 3px. Used on cards, inputs. Search fields split radius (0px 3px 3px 0px etc.).
• Shadows: One detected shadow (rgba(0,0,0,0.2) 0px 5px 15px), rarely used. Flat design dominates.
• Borders: Heavy use of 1px solid borders in grays (#c7c7c7, #707070) and dashed underlines for links.

6. Components

6.1 Buttons

No explicit button styles extracted—likely styled via Vuetify components. Given the palette, expect blue (#0066cc) or red (#ee0000) for primary, with 3px radius and 8–16px padding.

6.2 Links

Four styles:

1. Blue (#0066cc), underline default, hover black (#000000) no underline.
2. Black (#151515), no underline default, hover black (#000000) with normal text decoration.
3. White (#ffffff), bold (600), no underline default, hover black (#000000).
4. Light blue (#92c5f9), dashed underline default, hover black (#000000).

6.3 Forms

Select-one example:

• Default: transparent background, white text, 1px solid gray (#707070) border, 3px radius, padding 6px 38px.
• Outline: white, no shadow.
• Focus state not defined in extract—likely via token.

6.4 Cards

Card borders: 1px solid #c7c7c7 or #707070. Radius: 3px. No shadows. Padding likely 16–24px based on spacing scale.

7. Design Tokens

:root {
  /* Colors */
  --color-primary-surface: #151515;
  --color-secondary-surface: transparent;
  --color-white: #ffffff;
  --color-blue-primary: #0066cc;
  --color-black: #000000;
  --color-light-gray: #c7c7c7;
  --color-light-blue: #92c5f9;
  --color-dark-blue-hover: #004d99;
  --color-accent-red: #ee0000;
  --color-success-green: #3e8635;
  --color-success-green-dark: #1e4f18;
  --color-warning-yellow: #f0ab00;
  --color-warning-yellow-dark: #795600;
  --color-danger-red: #c9190b;
  --color-danger-red-dark: #a30000;
  --color-info-blue-dark: #002952;
  --color-info-purple: #5e40be;
  --color-disabled-gray: #d2d2d2;
  --color-disabled-text-gray: #707070;

  /* Typography */
  --font-redhat-display: "RedHatDisplay", "Red Hat Display", Helvetica, Arial, sans-serif;
  --font-redhat-text: "RedHatText", "Red Hat Text", Helvetica, Arial, sans-serif;
  --font-overpass: "Overpass", Helvetica, Arial, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* Radius */
  --radius-sm: 3px;

  /* Shadows */
  --shadow-default: rgba(0,0,0,0.2) 0px 5px 15px;
}

8. AI Coding Assistant Prompt

# Red Hat Design System Specification

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

## Brand Context
Red Hat’s design is authoritative, minimal, and functional. Black surfaces, white text, and red accents define the brand. Components are flat with minimal radius and clear typography hierarchy. The audience is technical—clarity and consistency are more important than decoration.

## Color Palette
- Primary Surface: #151515 — Dark backgrounds, headings
- Secondary Surface: transparent — Overlay backgrounds
- White: #ffffff — Text on dark surfaces, card backgrounds
- Blue Primary: #0066cc — Links, primary actions, focus borders
- Black: #000000 — Hover states, high-contrast text
- Light Gray: #c7c7c7 — Neutral borders, disabled states
- Light Blue: #92c5f9 — Secondary interactive link underline
- Dark Blue Hover: #004d99 — Link hover/focus
- Accent Red: #ee0000 — Brand identity, critical accents
- Success Green: #3e8635 — Success messages
- Success Green Dark: #1e4f18 — Dark mode success
- Warning Yellow: #f0ab00 — Warnings
- Warning Yellow Dark: #795600 — Dark mode warning
- Danger Red: #c9190b — Errors
- Danger Red Dark: #a30000 — Dark mode errors
- Info Blue Dark: #002952 — Info state backgrounds
- Info Purple: #5e40be — Info icons
- Disabled Gray: #d2d2d2 — Disabled UI
- Disabled Text Gray: #707070 — Disabled text

## Typography
Font Families:
- Headings: "RedHatDisplay", "Red Hat Display", Helvetica, Arial, sans-serif
- Body: "RedHatText", "Red Hat Text", Helvetica, Arial, sans-serif
- Alternate: "Overpass", Helvetica, Arial, sans-serif

Sizes:
| Level | Size | Weight | Line Height | Use |
| H1 | 48px | 400 | 1.30 | Page titles |
| H2 | 36px | 400 | 1.30 | Section titles |
| H3 | 28px | 500 | 1.30 | Subheadings |
| Body Large | 18px | 400 | 1.50 | Paragraphs |
| Body | 16px | 400 | 1.50 | Standard text |
| Caption | 14px | 400 | 1.50 | Small labels |
| Caption Small | 12px | 400 | 1.50 | Metadata |

## Spacing & Grid
Base: 8px grid.
Scale: 1px, 3px, 4px, 6px, 8px, 10px, 16px, 24px, 32px, 48px, 56px, 64px, 80px, 96px.
Use multiples of 8px for layout gaps, padding, margins.

## Border Radius
- sm: 3px — Inputs, cards
- split: 0px 3px 3px 0px — Search field halves

## Shadows & Depth
Flat design. Avoid shadows. Use 1px solid or dashed borders for separation.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #0066cc;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 3px;
  font-weight: 500;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #004d99; }
.btn-primary:focus { outline: 2px solid #004d99; outline-offset: 2px; }
.btn-primary:disabled { background: #d2d2d2; color: #707070; cursor: not-allowed; }
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #0066cc;
  padding: 8px 16px;
  border: 1px solid #0066cc;
  border-radius: 3px;
}
.btn-secondary:hover { color: #000000; border-color: #000000; }
```

### Navigation Links
```css
.nav-link {
  color: #0066cc;
  text-decoration: underline;
}
.nav-link:hover {
  color: #000000;
  text-decoration: none;
}
```

### Input Fields
```css
.select-one {
  background: transparent;
  color: #ffffff;
  border: 1px solid #707070;
  border-radius: 3px;
  padding: 6px 38px;
}
.select-one:focus {
  border-color: #0066cc;
  outline: none;
}
```

### Card
```css
.card {
  background: #ffffff;
  border: 1px solid #c7c7c7;
  border-radius: 3px;
  padding: 16px;
}
```

## Layout & Responsive Rules
Max content width: fluid up to 1920px.
Breakpoints: 404px, 420px, 480px, 575px, 576px, 767px, 768px, 856px, 860px, 991px, 992px, 1199px, 1200px, 1439px, 1440px, 1679px, 1680px, 1919px, 1920px.

## Interaction Rules
- Transition timing: 150ms ease for hover/focus changes.
- Focus indicators: 2px solid border in interactive color.
- No animation frills—functional feedback only.

## DO
- Use ONLY colors from the palette.
- Maintain 8px grid.
- Use RedHatDisplay for headings, RedHatText for body.
- Keep border radius consistent at 3px.
- Use dashed underline style only for secondary links.

## DON'T
- Add drop shadows to components.
- Mix rounded and sharp corners.
- Use colors outside the token set.
- Use red for non-brand interactive elements.

## Code Examples

Primary Button:
```css
<button class="btn-primary">Submit</button>
```

Card:
```css
<div class="card">Content here</div>
```

Form Input:
```css
<select class="select-one"><option>Option</option></select>
```

9. Summary

TL;DR: Red Hat’s design system is black, white, and red with disciplined use of blue for interaction. Typography is custom, functional, and consistent. Components stick to a flat, 3px radius style on an 8px grid. Everything is built for clarity and authority—perfect for enterprise open-source.

Brand Keywords:

• enterprise-minimalist
• tech-authoritative
• high-contrast
• function-first
• open-source-consistent