What is Red Hat's primary brand color?

Red Hat's primary interactive color is cobalt blue (#0066cc), wired in the CSS as --pf-global--primary-color--100, --pf-global--link--Color, and --pfe-theme--color--link. It appears 48 times in the captured page — 24 as text (links and nav items) and 24 as border (interactive element outlines). The brand identity color is red (#ee0000, wired as --pfe-theme--color--ui-accent and --rh-color-accent-brand), but this appears zero times in the captured marketing render — it is a CSS-declared token that the marketing surface does not actively apply. The working brand voltage is cobalt blue.

What typefaces does Red Hat use, and what should I use as substitutes?

Red Hat runs two proprietary families developed in partnership with the same foundry: RedHatDisplay (wired as --rh-font-family-heading, --pf-global--FontFamily--heading--sans-serif) for headings and navigation CTAs, and RedHatText (wired as --rh-font-family-body-text, --pf-global--FontFamily--sans-serif) for body paragraphs, captions, and small UI labels. RedHatMono appears in the CSS variable --rh-font-family-code but is not rendered on the captured marketing surface. Both RedHatDisplay and RedHatText are open-source and available from Google Fonts. If they are unavailable, Overpass (which shares the same foundry origin) is the fallback listed in the CSS variable declarations.

How does Red Hat handle dark vs. light sections?

Red Hat alternates light and dark editorial bands down the marketing page. Light sections use #ffffff canvas with #151515 text. Dark sections use #151515 canvas with #ffffff text — the same two values, just inverted. The cobalt blue link color (#0066cc) appears in light sections only; dark sections use white text with no chromatic links. The CSS custom-property system has explicit --pfe-theme--color--text--on-dark and --pfe-theme--color--link--on-dark variables (the latter wired to a lighter cobalt #73bcf7 for contrast), but neither appears in the captured marketing render, which suggests the dark sections currently avoid inline links rather than switching to the on-dark link variant.

What is PatternFly and how does it relate to this design system?

PatternFly is Red Hat's open-source design system for enterprise UIs — the same system used in the Red Hat OpenShift web console and other product surfaces. The --pf-global--* CSS custom properties visible on redhat.com are PatternFly's global token set, not a separate marketing-site system. This gives the marketing surface a level of semantic-token density unusual for a marketing page: named variables for spacing (--pf-global--spacer--md: 1rem), border radii (--pf-global--BorderRadius--sm: 3px), z-indices, and more than 30 interactive-state color aliases. AI tooling reading this DESIGN.md can resolve every token reference back to a PatternFly variable name.

Why does Red Hat use a single 3px corner radius everywhere?

Red Hat's marketing surface inherits PatternFly's --pf-global--BorderRadius--sm: 3px and --pfe-theme--surface--border-radius: 3px as the universal corner radius. The 3px value reads as 'minimal rounding' rather than 'square' — it rounds sharp corners enough to feel intentional without softening the enterprise authority of the surface. There is no soft-radius or pill tier on the marketing site; the fully-rounded pill radius from PatternFly (--pf-global--BorderRadius--lg: 30em) is declared in CSS variables but never applied in the captured render. The result is a binary shape language: either 3px or 0px, with 3px winning every instance where a radius appears.

Red Hat Design System

Red Hat's marketing-site design system as a DESIGN.md file.

About Red Hat DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source redhat.com

Backend, Database & DevOps
Web Infrastructure & Hosting

Red Hat's marketing site is built on an enterprise component library that happens to run at marketing scale. The hero is white-canvas, near-black text, with a 48px RedHatDisplay heading — "The future of AI is yours to choose" — set at weight 400, which is unexpectedly light for an h1 at that size. Where most enterprise brands push heading weight to 700 or bold to assert authority, Red Hat leaves it at 400 and trusts the editorial weight of the sentence. Cobalt blue (#0066cc) appears only on links and interactive borders, never on any background fill — the brand color is a text signal, not a canvas statement. Below the hero, alternating dark near-black bands (#151515) carry white-text editorial sections, producing the recognizable Red Hat pattern: white section, dark section, white section, dark section.

The PatternFly custom-property system beneath the surface is the system's most unusual trait. CSS variables like --pf-global--primary-color--100, --pfe-theme--color--ui-accent, and --rh-color-interactive-primary-default give the marketing layer the full semantic resolution of an enterprise design system — not just hex values but named interactive-state tokens that track hover, focus, active, and dark-mode variants. Where Cloudflare or Vercel declare a handful of branded CSS vars, Red Hat exposes more than 200 in the captured :root block. This gives AI tooling a much richer token map to work with, though the marketing surface itself only surfaces a fraction of those states.

The practical takeaway for an engineering team adopting this spec: the cobalt blue interactive signal is the only chromatic decision in the system. Everything else resolves to the near-black (#151515) / white (#ffffff) / mid-gray (#707070) triad. The 3px radius runs universally — buttons, cards, inputs, chips — with no larger-radius soft tier anywhere on the marketing surface. If you're building an enterprise-open-source product page and want the Red Hat credibility signal without porting PatternFly itself, the system reduces to three colors, two typefaces, one radius.

What makes it distinct

PatternFly CSS disciplineevery interactive color state maps to a named custom property like --pf-global--primary-color--100; the system carries more semantic granularity than any pure-marketing stack
Two proprietary Red Hat familiesRedHatDisplay for headings and navigation CTAs, RedHatText for body and captions; no fallback to Inter or system-ui in the primary render
Cobalt blue as the single chromatic signal#0066cc appears 48 times (24 text, 24 border), exclusively on links and interactive affordances; nothing else on the page is chromatic
3px universal radiusone corner-radius value covers every surface in the system, from buttons to cards to form fields; no scale, no pill variant in the marketing layer
Near-black not pure blackthe canvas floor is #151515 (not #000000), a 19% luminance value that prevents pure-black depth from reading as print-on-paper

Live at redhat.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

redhat.com

Explore Red Hat

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Red Hat design system FAQ

Common questions about Red Hat's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Red Hat — official site

Red Hat's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.