Red Hat Design System

Overview

Red Hat's marketing site arrives with more CSS custom-property discipline than almost any marketing surface in the directory. Enterprise Semantics at Marketing Scale. Where most brand sites declare a dozen hex values, Red Hat exposes more than 200 named PatternFly tokens — each with interactive-state variants for hover, focus, dark mode, and on-saturated contexts. This is the entire PatternFly design-system vocabulary surfaced on a marketing page, not a purpose-built marketing token set. Where Cloudflare declares --color-kumo-brand and Spline declares --color-blue, Red Hat declares --pf-global--primary-color--100, --pf-global--active-color--100, --pf-global--link--Color, and --pfe-theme--color--link — four variable names for the same cobalt blue, each scoped to a different semantic context.

The visible result is far simpler than the token depth suggests. The marketing surface is near-black and white with a single cobalt-blue interactive signal. There are no decorative gradients, no hero imagery outside small product screenshots, and no shape language beyond a universal 3px radius. The hero heading — "The future of AI is yours to choose" — sits at 48px / weight 400 in RedHatDisplay, lighter than any enterprise peer: Oracle uses 700, Cisco 600, Microsoft 600. The weight-400 display heading is a deliberate typographic choice that signals open-source editorial restraint rather than corporate authority.

Key Characteristics:

• Near-black canvas (#151515, not #000000) for dark editorial bands — 573 total occurrences in the captured page across text, background, and border.
• Cobalt blue (#0066cc) as the sole chromatic token — 48 occurrences, 24 as text and 24 as border, exclusively on links and interactive affordances.
• Two-family proprietary type stack: RedHatDisplay for headings/nav, RedHatText for body/captions — both open-source, both derived from Overpass lineage.
• Universal 3px corner radius with no soft, generous, or pill variant in the marketing layer.
• Alternating white and near-black editorial bands — the page's primary structural device.
• Light-weight display headings: 48px / 400 (hero h2), 36px / 300 (sub-section h1) — enterprise brand running below the weight level of its enterprise peers.
• PatternFly's 8px / 16px spacing cadence throughout; section padding at 32px/64px on band boundaries.

Colors

Interactive

• Cobalt Primary ({colors.primary} — #0066cc): frequency 48. Used as text (24), border (24). The link color, active-element ring color, and interactive-border color. Wired in CSS as --pf-global--primary-color--100, --pf-global--link--Color, --pfe-theme--color--link. The single chromatic voltage on the page; appears on no background fill in the captured surface.

Surface

• Ink ({colors.ink} — #151515): frequency 573. Used as text (285), background (6), border (282). The near-black that runs both the dark editorial bands and the standard body text on white. Wired as --pf-global--BackgroundColor--dark-100, --pf-global--Color--100, --pfe-theme--color--text.
• Canvas ({colors.canvas} — #ffffff): frequency 339. Used as text (169), border (164). The white canvas and reversed-text color in dark sections. Wired as --pf-global--BackgroundColor--light-100, --pf-global--Color--light-100.
• Surface-1 ({colors.surface-1} — #f2f2f2): frequency 3. Light background tint for subtle card elevation on white bands. Wired as --pf-global--BackgroundColor--light-300, --pfe-theme--color--surface--base.
• Canvas Dark ({colors.canvas-dark} — #1f1f1f): frequency 1. The dark-section card background, one shade lighter than the near-black ink. Wired as --pf-global--BackgroundColor--dark-300.
• Surface Dark ({colors.surface-dark} — #1f1f1f): alternate surface tone for dark band cards.

Text (secondary)

• Ink Muted ({colors.ink-muted} — #707070): frequency 5 (border only). Disabled text, secondary UI labels, caption text. Wired as --pf-global--Color--200, --pfe-theme--color--text-muted, --pfe-theme--color--ui-disabled--text.
• Ink Dark ({colors.ink-dark} — #4d4d4d): frequency 2. Tertiary text for dense editorial copy. Wired as --pf-global--BackgroundColor--dark-400.

Hairlines

• Hairline ({colors.hairline} — #c7c7c7): frequency 6 (border 4, text 2). Standard card and section divider border. Wired as --pfe-theme--color--ui-accent--focus--on-saturated.
• Hairline Dark ({colors.hairline-dark} — #d2d2d2): frequency 0 (declared, not directly rendered). The canonical PatternFly border tone. Wired as --pf-global--BorderColor--100, --pfe-theme--surface--border.
• Ink Lightest ({colors.ink-lightest} — #e0e0e0): frequency 1 (bg). The lightest structural surface for subtle section dividers.

Typography

Font Families

The system runs two proprietary families built on the Overpass skeleton. RedHatDisplay (wired as --rh-font-family-heading, --pfe-theme--font-family--heading) carries every heading tier and navigation label. RedHatText (wired as --rh-font-family-body-text, --pf-global--FontFamily--sans-serif) carries body paragraphs, small UI text, and captions. RedHatMono is declared in --rh-font-family-code but does not appear in the captured marketing render.

The two families are visually close — both narrow-ish, both geometric-flavored — and the split between them is primarily semantic rather than visual. The real distinction is weight range: RedHatDisplay is used at weights 300 (display light), 400 (hero h2), 500 (headings), and 600 (nav labels). RedHatText is used only at weight 400.

Hierarchy

Principles

RedHatDisplay at 400 is the defining move. Most enterprise brands treat their display typeface as a vehicle for bold authority (Oracle Bold, SAP Black). Red Hat's h2 at 48px / weight 400 reads more like an editorial magazine headline — confident because of the sentence, not because of the weight. The light variant at 36px / 300 is even more unusual: a display heading lighter than body weight, used for the sub-section lead on the hero.

Note on Font Substitutes

Both RedHatDisplay and RedHatText are open-source, available from Google Fonts (and the Red Hat brand site) under the SIL OFL license. Overpass (also available on Google Fonts) is the declared fallback in the CSS variable values and shares the same design provenance. If you need a fully system-safe substitute, Inter at the same weight values approximates the proportions at the body sizes; at the 48px display size, Geist Sans at weight 400 is closer to the cap-height behavior.

Layout

Spacing System

• Base unit: 8px.
• Tokens: {spacing.xs} 8px · {spacing.sm} 16px · {spacing.md} 24px · {spacing.lg} 32px · {spacing.xl} 64px · {spacing.2xl} 96px.
• Section vertical padding: 64px between major editorial bands.
• Card internal padding: 24px ({spacing.md}) on standard hairline cards.
• Horizontal container: 16px / 32px side padding (--pfe-theme--container-padding: 16px, --pfe-theme--container-spacer: 16px).

Grid & Container

• Max content width: ~1200px.
• Hero: centered two-column split — headline + body left, product screenshot right.
• News section: 3-column card grid (small summary cards with date + headline).
• Product cards: 2-column grid for RHEL, OpenShift, and related product blocks.
• Logo wall: 6-logo horizontal row (Volkswagen, Siemens, Southwest, Porsche, IKEA, Paymentech visible in capture).

Rhythm

The alternating-band cadence — white section / near-black section / white section — defines the page's vertical rhythm. Each band is self-contained; there is no gradient bleed between them. This creates a print-magazine pacing where the reader knows when they have entered a new topic by the surface shift.

Elevation

The system has essentially no shadow tier on the marketing surface. Elevation relies entirely on border contrast:

• Flat: hero, editorial bands, footer — all surfaces.
• Hairline cards: {colors.hairline} (#c7c7c7) 1px border on white canvas creates the only elevation signal.
• Dark-band cards: the near-black (#151515) canvas with a hairline border on a slightly lighter card background provides separation without shadow.

PatternFly's CSS variables declare box-shadow tiers (--pfe-theme--box-shadow--sm, --pfe-theme--box-shadow--md, --pfe-theme--box-shadow--lg) but these are not rendered in the captured marketing surface.

Shapes

The radius philosophy is minimal-and-universal:

• {rounded.none} 0px — editorial bands, hero, logo strip, section dividers.
• {rounded.sm} 3px — every element that rounds at all: buttons, cards, inputs, chips, tags. One radius covers the entire interactive surface.

PatternFly declares a --pf-global--BorderRadius--lg: 30em pill token, but it does not appear anywhere in the captured marketing render. The 3px value comes from --pf-global--BorderRadius--sm: 3px and --pfe-theme--ui--border-radius: 3px.

Components

button-primary — Cobalt-blue {colors.primary} fill, white text, {rounded.sm} 3px radius, 8×24px padding, 40px height. "Try Red Hat AI" is the canonical hero instance.

button-secondary — Transparent fill, cobalt {colors.primary} text and 1px cobalt border, same 3px radius. Used for secondary product CTAs throughout the alternating editorial bands.

top-nav — White {colors.canvas} surface, 56px height, near-black link labels in RedHatDisplay 600. Logo flush left, main nav centered, utility links (Products, Solutions, Services, Training, Partners, About) in the middle, with a search and contact cluster flush right.

nav-link — Transparent background, near-black {colors.ink} text in {typography.nav-label} (16px / 600), 0×16px padding. RedHatDisplay 600 is heavier than typical nav links — the nav reads as assertive rather than quiet.

hero-heading — Near-black {colors.ink} text, {typography.display-xl} (48px / 400). The uncommonly light weight for an enterprise h2 at this size.

section-heading — Same near-black, {typography.heading-lg} (28px / 500). Used for product category headings in white bands.

section-heading-dark — White {colors.canvas} text in the near-black editorial bands, same {typography.heading-lg} token.

body-paragraph — Near-black text at {typography.body-lg} (18px / 400). Hero sub-copy and section leads.

body-paragraph-dark — White {colors.canvas} text for reversed body copy in dark bands.

card — White canvas, 1px {colors.hairline} border, {rounded.sm} 3px, 24px padding. Default product-summary card on light editorial bands.

card-dark — Near-black {colors.canvas-dark} fill, white text, 1px {colors.hairline} border, 3px radius. Used in the "Red Hat Solutions" product grid in dark editorial bands.

text-input — White canvas, near-black text, 1px {colors.hairline-dark} border, {rounded.sm} 3px, 8×16px padding, 36px height.

link — Cobalt {colors.primary} inline link, {typography.body-md}. The canonical link style throughout body copy.

section-band-dark — Near-black {colors.canvas-dark} (#151515) surface, white text, 64px vertical padding. The dark editorial band wrapping product sections like "Red Hat Enterprise Linux" and "Red Hat OpenShift."

logo-strip — White canvas, mid-gray monochrome logos at uniform size, 32px vertical padding. Customer logo wall (Volkswagen, Siemens, Southwest, Porsche, IKEA, Paymentech) with all marks rendered in {colors.ink-muted}.

Do's and Don'ts

Do use the cobalt blue ({colors.primary} — #0066cc) exclusively for links and interactive-element borders. In the captured page, zero background fills use the cobalt — it is a text and border signal only. Filling a button with the brand red (#ee0000) from the CSS variables would break this system entirely.

Do run RedHatDisplay at weights 300–600 for headings and navigation, and RedHatText at weight 400 for body copy. The two-family split is systematic: never use RedHatText for a heading or RedHatDisplay for running prose.

Do alternate near-black and white editorial bands as the primary page-layout device. The rhythm is the system's identity — the reader understands section breaks from the surface shift rather than from horizontal rules or decorative elements.

Do use {rounded.sm} 3px for every surface that rounds at all. There is no secondary radius in this system; adding a 12px or 16px soft-card would be a foreign import from a consumer-brand stack.

Don't render display headings at weight 700 or above. The hero h2 at 48px / 400 is the entire editorial personality of the system. Bumping to 700 turns the heading into a conventional enterprise CTA shout and loses the open-source editorial signal.

Don't use the CSS-declared accent red ({colors.emergency-red} — #ee0000 wired as --pfe-theme--color--ui-accent) on any marketing surface. It appears 0 times in the actual render; it is a product-UI token not active in marketing. Using it would create a false brand signal.

Don't introduce a second chromatic color on the marketing surface. The page runs on three neutrals plus one cobalt interactive signal. Adding a green success color, an orange highlight, or a purple accent would dissolve the restraint that defines this system.

Don't deviate from the 3px corner radius — not even for pill buttons or fully-rounded tags. The --pf-global--BorderRadius--lg: 30em pill exists in PatternFly but does not appear in marketing. A pill CTA would look out of place against the rest of the system's flat-rectangular surfaces.

Known Gaps

• Brand red (#ee0000): declared in CSS as --pfe-theme--color--ui-accent and --rh-color-accent-brand but appears zero times in the captured marketing render. Whether it appears in product-specific hero sections (OpenShift, Ansible) is not captured here.
• Interactive states: hover, focus, active, and disabled states are fully specified in the PatternFly CSS variables but are not observable from the static render. The full state matrix is available in the PatternFly component library documentation.
• Dark mode: CSS variables declare a complete on-dark variant (--pfe-theme--color--text--on-dark, --pfe-theme--color--link--on-dark etc.) but the captured marketing surface applies the dark palette only to editorial bands, not as a toggleable mode.
• RedHatMono: declared in --rh-font-family-code but not rendered anywhere in the captured marketing surface. Likely active on developer documentation pages (developers.redhat.com) not captured here.
• Motion and animation: PatternFly declares --pfe-theme--animation-timing: cubic-bezier(0.465,0.183,0.153,0.946) and --pfe-theme--animation-speed: 0.2s, but these are not observable from the static capture.
• Mobile breakpoints: PatternFly exposes --pf-global--breakpoint--xs through --pf-global--breakpoint--2xl (576px, 768px, 992px, 1200px, 1450px), but the marketing layout behavior at each breakpoint is not captured.
• Product-specific marketing sub-sites: Red Hat OpenShift, Ansible, and OpenStack marketing pages likely carry product-specific accent colors (OpenShift red-gradient, Ansible red-dark) not represented in the main marketing capture.