# Red Hat: brand book and build spec

Pure red, used as pops on open white, gray or black layouts; one open source type family set plainly in sentence case; a hat that is never redrawn; and, when the story needs it, hybrid collages of real people, 3D objects and hat-shaped base shapes. A voice that is experienced, compassionate and progressive: specific, honest and never hype.

From unfairly.ai/brand-guidelines/redhat, checked 2026-10-30. Unofficial study; not affiliated with Red Hat.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Open, with one red signal. Red Hat keeps everything around the red quiet (roomy layouts, plain sentence-case type, real people in soft light) so a single pop of pure red, and the hat, carries the brand. Based on: From the published rules: red-50 in everything but never flooding; generous white space; no tracking or caps; desaturated warm photos that do not fight red; and the hat used only exactly as drawn.

## Purpose

Mission statement (2009): Be the catalyst in communities of customers, contributors and partners that build better technology the open source way (paraphrase). (published; https://www.redhat.com/en/about/brand/standards/history)

Story: Red Hat began when Marc Ewing, who sold his own Linux distribution on CDs and was known as the helpful guy in the red hat, joined Bob Young; Red Hat Software was born in 1995. It took on proprietary software with the rebel Shadowman logo, went public in 1999, swapped boxed Linux for Red Hat Enterprise Linux subscriptions in 2001, passed US$1 billion in 2012, and in 2019 joined IBM as an independent subsidiary and launched the current logo and fonts through the Open Brand Project. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Open | Open source methods applied to how Red Hat shows up, honest so audiences can take part (paraphrase; a brand personality trait, the values themselves are not listed on the public pages). | published: https://www.redhat.com/en/about/brand/standards/personality |
| Authentic | Real people and real uses of technology; relatable and mindful (paraphrase). | published: https://www.redhat.com/en/about/brand/standards/personality |
| Helpful | Sharing knowledge and focusing on what customers actually need (paraphrase). | published: https://www.redhat.com/en/about/brand/standards/personality |
| Brave | Standing up for beliefs even when the industry goes another way (paraphrase). | published: https://www.redhat.com/en/about/brand/standards/personality |

## Fixed and flexible

Never changes:
- The hat: red fedora with black band, exactly as drawn
- Red Hat red #EE0000 in everything, used as pops
- The Red Hat font family, sentence case, untracked
- Real people, never AI-generated

The one thing that varies: How expressive a piece gets on the essential-to-expressive spectrum: from logo, core colors, icons and type on white, to hybrid collages with purple-80 grounds, accent colors, 3D platform art, portraits and gradient strokes.

## Positioning

- **Statement**: Red Hat is the leading provider of enterprise open source software solutions. (observed)
- **Category**: Open hybrid cloud technology leader; enterprise open source software (observed)
- **Audience**: IT professionals and the enterprises that run on them, from developers and operations teams to IT decision makers, plus partners and open source contributors (paraphrase). (published)
- **Problem**: Hybrid reality: workloads spread across datacenter, cloud and edge, and tools that do not talk to each other (paraphrase of the voice examples and hybrid style handbook). (our reading)
- **Promise**: We unlock opportunities for innovation, everywhere. (published)
- **Differentiators**: Open source the whole way: products built the open source way, upstream communities, and open fonts and icons.; Hybrid cloud platforms for consistency anywhere apps run.; An open ecosystem of partners and communities: freedom to change, flex or stay the course.; Support from open source experts who care about solving the problem together.
- **Alternatives**: Closed, proprietary software vendors (the upstart role Shadowman stood for).; Clones of Red Hat Enterprise Linux (the 2006 Unfakeable Linux response).

## Messaging

Boilerplate (observed): Red Hat is an open hybrid cloud technology leader that gives enterprises a consistent, comprehensive foundation for transformative IT and AI applications. A trusted adviser to the Fortune 500, it offers cloud, developer, Linux, automation and application platform technologies, plus award-winning services.

Taglines:
- Keep your options open (Tagline of the global brand campaign: freedom to choose and room to grow)
- No one innovates alone (Brand mantra. The guide says it is a foundational statement, not a marketing tagline or headline; it appears as the brand standards index heading and on office posters)
- We unlock opportunities for innovation, everywhere. (Brand promise)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Collaborators who show up for people | How to innovate confidently: passionate open source experts who solve tough problems with customers (paraphrase). | More than 90% of companies in the U.S. Fortune 500 rely on Red Hat (Red Hat client data and Fortune 500 list, 2026).; A global company of about 22,000 people. | published |
| Builders of hybrid cloud platforms | How to innovate consistently: platforms built to run anywhere the customer's most important projects need to (paraphrase). | Red Hat Enterprise Linux, sold by subscription since 2001, is the flagship product.; Four platform sub-brands: Red Hat Enterprise Linux, Red Hat OpenShift, Red Hat Ansible Automation Platform and Red Hat AI. | published |
| The most reliable partner in tech | How to innovate comprehensively: an open ecosystem of partners and communities that keeps choices open (paraphrase). | Red Hat Summit, the flagship event, held every year since 2005.; The Fedora Project, a Red Hat and volunteer partnership with tens of thousands of community members. | published |

They never claim:
- Tell the truth no matter what; no absolute promises.
- Be specific without being a know-it-all: a real number, not "more than any other platform".
- Third parties may use Red Hat word marks only truthfully and referentially; logos need a written agreement.
- Never imply Red Hat certification, endorsement or affiliation that does not exist.
- "No one innovates alone" is a mantra, not a marketing headline.
- Cite the source of statistics (the Fortune 500 claim carries a source line).

## Voice

Tone words: Experienced, Compassionate, Progressive.

Traits:
- Open (published)
- Authentic, but not Presumptuous or careless (published)
- Helpful (published)
- Brave (published)
- Experienced, but not Purist (published)
- Compassionate, but not Compliant (published)
- Progressive, but not Reckless (published)

- Voice is experienced, compassionate and progressive; tone flexes by audience along four dials: formality, urgency, empathy and authority.
- Start with the reader: their state of mind, how they should feel afterwards (flip the tension: uncertain becomes confident) and the one thing to take away.
- Style: clear, concise, conversational, credible, compelling. Write like people talk, to people not at them, and say something only Red Hat can say.
- Specific numbers beat vague claims and superlatives: "Trusted by 90% of Fortune 500 companies" sits between too deferential and too know-it-all.
- Typography carries the voice: sentence case everywhere, minimal ornament, big or bold headlines, red reserved for short lines.
- The trademark rules (two words, never translated, (R) after first adjectival use in body copy, full product names first) apply to all copy and AI-assisted copy.

Rules a copy check enforces:
- Sentence case headlines
- Never set text in all caps, not even small labels (acronyms excepted)
- Title case only for proper nouns such as product names or book titles
- No spaces before or after em or en dashes; hyphens join words, en dashes separate numbers, em dashes mark a break
- Write "and" when there is room; in tight UI labels or headlines use an ampersand, never a plus sign
- Curly quotation marks and apostrophes; straight marks only as primes for feet and inches
- Emphasize with bold or color, one treatment at a time; never italics, underline or caps for emphasis
- Headlines run three lines at most, avoid widows, and are about 3/4 the length of the text below
- Red Hat is two capitalized words, in the same typeface as the surrounding text, on one line where possible, and never translated (Simplified Chinese exception: 红帽)
- Superscript (R) after the first use of "Red Hat" as an adjective in body copy; none in headlines, quotes, tables of contents or when naming the company
- Use the full product name with trademark symbols on first mention in body copy (e.g. Red Hat(R) Enterprise Linux(R)); RHEL is the only listed short form, after first use
- Offerings start with "Red Hat" plus a descriptive name in title case; components are sentence case and add "Red Hat" only when needed
- Use a trademark as an adjective, never a verb, plural or possessive, and never in an acronym
- Never: RHAAP, AAP, RHAI, RAI, RHOS, ROSA, ARO, EL, Red Hat Artificial Intelligence. Say the full platform name (Red Hat Ansible Automation Platform, Red Hat AI, Red Hat OpenShift, Red Hat Enterprise Linux) instead
- Tell the truth: no absolute promises (the guide rejects "You will never have to think about security again")
- Do not talk down to experts with leading rhetorical questions; say what they will learn
- Never use red to signal something negative; errors and decreases are danger-orange
- When AI tools help write copy, re-check every product name and trademark

Their words: open, authentic, helpful, brave, together, choice.
Never: RedHat (one word), red hat (lowercase), RHAAP, AAP, RHAI, RHOS, ROSA, ARO, + in place of "and", ALL CAPS, Tux the penguin (imagery), Shadowman (legacy imagery).

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Red Hat red (red-50) | #EE0000 | accent | The brand color, pure red. Pops only: the hat, red headlines and key words, CTA fills. In everything; never floods; never negative. Pantone 1788 C. |
| White | #FFFFFF | paper | Default ground; text on dark and red; white logo on red. |
| Black | #000000 | ink (print and brand) | Text and wordmark on light grounds; core and expressive dark background. Pantone Black C. |
| gray-95 (ux black) | #151515 | ink / night | Primary text on light in digital; dark interface and logo-tile background. |
| gray-10 | #F2F2F2 | surface | Light alternate background (core light, interface light). |
| gray-60 | #4D4D4D | ink_muted | Secondary text on light (RHDS); product tech-icon outline. |
| gray-80 | #292929 | dark surface | Core dark and hybrid dark background. |
| red-10 | #FCE3E3 | light red ground | Core red and expressive light background; black text passes. |
| red-05 | #FEF0F0 | light red ground | Hybrid light-theme background (March 2026 update: light red, not light purple). |
| red-30 | #F9A8A8 | illustration | Light shadow color of mini illustrations, with red-50 and white. |
| red-40 | #F56E6E | gradient start | Start of every gradient stroke and the red accent gradients. |
| purple-80 | #1B0D33 | expressive dark ground | Expressive dark background; white text passes. |
| purple-50 | #5E40BE | accent_secondary | Hybrid accent; info/note; visited links. Pantone 2097 C. |
| teal-50 | #37A3A3 | secondary accent | Hybrid accent; neutral status. Pantone 2234 C. |
| orange-40 | #F5921B | secondary accent | Hybrid accent; caution family. Pantone 144 C. |
| yellow-30 | #FFCC17 | secondary accent | Hybrid accent; warning family. Pantone 108 C. |
| interaction-blue-50 | #0066CC | link | Links (underlined, dashed) and focus ring on light. Utilitarian only. |
| interaction-blue-30 | #92C5F9 | link on dark | Links and focus ring on dark grounds. |
| success-green-50 | #63993D | status | Success, increase. Utilitarian only. |
| danger-orange-50 | #F0561D | status | Error, decrease, failure. Utilitarian only. |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Red Hat Display | Open (SIL OFL 1.1). Red Hat's own face, by Jeremy Mickel with Red Hat, 2019; free on Google Fonts and GitHub | Red Hat Display | RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif |
| body | Red Hat Text | Open (SIL OFL 1.1) | Red Hat Text | RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif |
| mono | Red Hat Mono | Open (SIL OFL 1.1) | Red Hat Mono | RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero headline | --text-display-hero-* | Red Hat Display | 64px | 35px | 1.1 | 0px | 400 |
| Statement H1 | --text-display-statement-* | Red Hat Display | 36px | 36px | 1.3 | 0px | 500 |
| Section H2 / featured card title | --text-heading-l-* | Red Hat Display | 28px | 24px | 1.3 | 0px | 500 |
| Small section H2 / card title | --text-heading-m-* | Red Hat Display | 24px | 20px | 1.3 | 0px | 500 |
| Stat / H4 | --text-heading-s-* | Red Hat Display | 20px | 18px | 1.3 | 0px | 500 |
| Footer column heading | --text-heading-xs-* | Red Hat Display | 18px | 16px | 1.3 | 0px | 500 |
| Hero lead | --text-lead-* | Red Hat Text | 20px | 18px | 1.5 | 0px | 400 |
| Body large | --text-body-l-* | Red Hat Text | 18px | 16px | 1.5 | 0px | 400 |
| Body / nav menu / eyebrow | --text-body-* | Red Hat Text | 16px | 16px | 1.5 | 0px | 400 |
| CTA and link label | --text-cta-* | Red Hat Display | 16px | 16px | 1.5 | 0px | 700 |
| Small: tags, utility nav, footer links | --text-small-* | Red Hat Text | 14px | 14px | 1.5 | 0px | 400 |
| Caption: source line, 'Available on' | --text-caption-* | Red Hat Text | 12px | 12px | 1.5 | 0px | 400 |

## Layout

Measured on https://www.redhat.com/en/about/brand/standards: Red Hat brand standards (redhat.com/en/about/brand/standards, every public tab read from the live HTML and its images) and the Red Hat Design System foundations and tokens (ux.redhat.com), fetched 2026-10-30. Login-gated pages (The Source, Brand Portal, gradient specs, logo downloads) were not read.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 32px | 16px |
| Section padding | 96px | 64px |
| Container max width | 1440px | full |
| Hero text width | max 672px | full |
| Grid columns | 12 | 1 |
| Gutter | 32px | 16px |
| Card gap | 32px | 32px |
| Navigation height | 82px | 82px |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not Red Hat's.

Homepage bands, top to bottom (observed):
1. Masthead
   - Desktop: 1440x82 sticky
   - Phone: 390x50: hat, hamburger, 4 icons
   - Menus Red Hat Text 16px #151515 with 10px chevrons; utility 14px
2. Event hero
   - Desktop: y 82-735, copy in left 672px, padding 96px
   - Phone: y 50-871, padding 48px, image stacked after the CTA
   - Four static blurred white sparkles
   - One CTA
3. Featured
   - Desktop: y 735-1399; outline cards radius 16px, 32px gaps
   - Phone: y 871-2490, all cards stacked
   - 1px #C7C7C7 borders, gray pill tags
4. Statement + stat
   - Desktop: y 1494-1749, 789px copy, stat column at x 971
   - Phone: y 2490-3112 stacked
   - Dashed-underline inline links
5. Products intro
   - Desktop: y 1749-1881
   - Phone: y 3112-3381, 3 lines
6. Products
   - Desktop: y 1881-3252; featured card rises 64px into the band above
   - Phone: y 3381-6121 stacked
   - Dark cards #151515, 1px #4D4D4D, radius 16px
   - White outline pills, #92C5F9 links
7. Customer logos
   - Desktop: y 3252-3597, padding-top 80px
   - Phone: y 6121-6611, 2 columns
8. Open source
   - Desktop: y 3597-4044
   - Phone: y 6611-7289, image last
9. Tech topics
   - Desktop: y 4045-5131
   - Phone: y 7289-8685, tabs scroll horizontally
   - Active tab 3px #EE0000 left bar
10. Account pre-footer
   - Desktop: y 5131-5617
   - Phone: y 8685-9411
11. Footer
   - Desktop: y 5617-6245
   - Phone: y 9411-10650, accordions
   - 1px #707070 top rule

## Page anatomy

How Red Hat's own landing pages are built, part by part (observed; https://www.redhat.com/en, 2026-10-30). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: White sticky masthead: full Red Hat logo at left, six primary menus with chevrons, then three small utility links (Console, Docs, Support) and three 18px icons (search, bell, user) at right. Phone: hat-only logo, hamburger, then waffle, search, bell, user icons.
- ground: #FFFFFF with box-shadow 0 2px 4px rgba(21,21,21,0.2) (no border); sticky at top, z above the page
- height: 82px desktop (y 0-82); 50px phone
- border: none; the 2px-blur shadow is the only edge
- logo: variant Logo A full colour: red #EE0000 hat with black #000000 band, wordmark #151515; px 127x30 (SVG viewBox 613x145, preserveAspectRatio xMinYMid slice); position desktop x 32, y 26 (container padding 0 16px 0 32px); phone the same SVG in a 32x24 box at x 16 y 13, so 'slice' crops it to the hat only; file https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo.svg
- links: count 6; labels AI, Hybrid cloud, Products, Training, Learn, Partners (all with a 10x10 chevron-down 8px after the label); size 16px/24px Red Hat Text; weight 400; color #151515; alignment left group after the logo; each item is a full-height 82px <summary> with 16px side padding: label x 191, 256, 396, 511, 618, 709; label baseline row y 32-53; hover 4px bottom border #C7C7C7 on the item (transparent at rest)
- actions:
  - Utility links Console (x 1068), Docs (x 1143), Support (x 1199): Red Hat Text 14px/21px 400 #151515, no underline, about 24px apart
  - Three icon buttons, each a 50x82 cell: search magnifier (icon x 1290), bell 'For you' (x 1340), user 'Log in' (x 1390); icons 18x18 #151515 at y 32. Their labels Search / For you / Log in are not shown at rest (accessible names only)
  - No CTA button in the masthead
- sticky: position sticky top 0; stays white with the same shadow when scrolled
- phone: shows 50px white bar: hat-only logo 32x24 at x 16; hamburger 'Menu' (34x50 cell at x 64); right group of four 34x50 icon cells at x 246 (3x3 dot waffle 'Explore Red Hat'), 280 (search), 314 (bell), 348 (user); menu hamburger opens a white panel under the bar: rows AI, Hybrid cloud, Products, Training, Learn, Partners, each 358x60 at x 16 from y 66, Red Hat Text 18px #151515 with a chevron, 1px #C7C7C7 top border on every row and a bottom border on the last; the open hamburger gets a 4px #EE0000 underline; page behind dimmed by an overlay rgba(31,31,31,0.8) (#1F1F1F at 0.8); cta none in the bar
- copy: verbatim labels: AI, Hybrid cloud, Products, Training, Learn, Partners | Console, Docs, Support | Search, For you, Log in (icon names); phone also 'Menu' and 'Explore Red Hat'

**Hero**
- summary: Full-bleed black event hero: a purple outline date tag, a 3-line 64px white Display Regular headline, a 3-line 20px white lead with a bold date phrase, and one red pill CTA in the left half; a 3D black shield with a silver AI sparkle and green check fills the right half as the section's background image; four soft white four-point sparkles float over it.
- live today: Campaign live on 2026-10-30: 'What's next' global security virtual event (Adobe Target mbox 'hero-mbox' can swap this hero per visitor; the default shown to an anonymous visitor at 1440 and 390 is recorded here)
- desktop: section y 82-735 (653px), padding 96px 0; ground #000000 with background-image hero-ground-desktop.webp (2400x1324) background-size cover, background-position 50% 0 (renders 1440x794, top-aligned, bottom 141px cropped); column split 12-column row; copy in the left 6 columns (col x 16-720, text x 32-704 = 672px); right 6 columns empty: the shield is part of the background image (its body spans about x 805-1305); vertical anchors tag y 178-207; H2 y 231-442 (3 lines); lead y 458-548 (3 lines); CTA y 580-639; copy block vertically centred (dx-items-center) in the 461px row; text max width 672px for tag, headline and lead (text-wrap: pretty); headline breaks 'Shift your open source / security from reactive / to ready'; media no frame, no radius, no overlap: the image is the section background; four sparkles (::before/::after) sit over it; cta size 278x59 primary pill (padding 16px 32px, radius 64px); gaps tag margin-bottom 24px; H2 margin-bottom 16px; lead margin-bottom 32px
- phone: order tag, headline, lead, CTA, then the shield image full-bleed (hero-shield-phone-367.webp 390x261 at y 561; picture uses 576/768 versions at wider widths); alignment left, 16px gutter; sizes section y 50-871 (821px), padding 48px 0; tag y 98; H2 35px/45.5px 400 in 3 lines (y 151-288, 358 wide); lead 18px/27px in 5 lines (y 304-439); CTA 278x59 at x 16 y 470; image 390x261 at y 561; ground linear-gradient(#000000 0, #151515 100%) instead of the background image
- at rest: ground Desktop: #000000 + hero-ground-desktop.webp cover, position 50% 0. The image already contains the black ground, the dark 3D shield, the silver four-point AI sparkle with green check and soft glows. Do not redraw the shield or add a gradient.; sparkles Static (animation none). Section ::before draws three blurred white four-point stars, background-repeat no-repeat: hero-sparkle-68.svg (68px, opacity 0.46, blur 4) at calc(95% + 12px) calc(9% - 12px); hero-sparkle-28.svg (28px, opacity 0.18, blur 2) at calc(44% - 6px) calc(40% - 6px); hero-sparkle-46.svg (46px, opacity 0.30, blur 3) at calc(8% - 9px) calc(22% - 9px). ::after adds hero-sparkle-32.svg (32px, opacity 0.22, blur 2) at calc(58% - 6px) calc(72% - 6px). Same on phone over the gradient.; tag rh-tag outline purple with a 14px calendar icon: 156x29, fill #151515, 1px solid #5E40BE border (on ::before), radius 64px, padding 4px 8px; text Red Hat Text 14px/21px 400 #B6A6E9; icon #D0C5F4; label 'November 12, 2026'; cookie banner a TrustArc 'How we use cookies' box (white box, blue top rule, blue Accept all / More options buttons) and a Qualified chat bubble float over the page at load: third-party overlays, not part of the design. Leave both out.
- media: hero-ground-desktop.webp (desktop background), hero-shield-phone-367.webp / hero-shield-phone-768.webp (phone stacked image), hero-sparkle-*.svg
- type: H2 Red Hat Display 64px/70.4px 400 #FFFFFF (phone 35px/45.5px 400); lead Red Hat Text 20px/30px 400 #FFFFFF with the date phrase in <strong> 700 (phone 18px/27px)
- cta: one primary red pill 'Register for the virtual event' (button_primary); no secondary
- proof: none in the hero; proof comes later (the 90% Fortune 500 stat and the customer logo row)
- copy:
  - Tag: "November 12, 2026"
  - H2: "Shift your open source security from reactive to ready"
  - Lead: "AI is reshaping vulnerability management at machine speed. **Join us on November 12, 2026,** to see how to evolve your security operating model from provenance to remediation."
  - CTA: "Register for the virtual event"
  - Image alt (phone): "An illustration of a shield on a dark background overlaid with an AI sparkle and a green checkmark"
- copy prov: observed, verbatim, https://www.redhat.com/en (2026-10-30); rotates with campaigns

**Featured (news cards)**
- summary: White band with a small 24px 'Featured' heading, a row of one wide event card (copy + secondary pill + illustration) and one narrow press card (title + blue arrow link), then three compact 'Blog post' cards.
- ground: #FFFFFF
- desktop: band y 735-1399; 'Featured' H2 at y 799 (64px below the hero), cards start y 854 (24px under the heading's 31px line); heading "Featured" Red Hat Display 24px/31.2px 500 #151515 at x 32; row 1 card A x 32 y 854 907x284; card B x 971 437x284; 32px gap. Card A: padding 32px, text column x 65-636 (571px) and the image featured-summit-connect.webp 270x211 at x 652 y 891; title 28px/36.4px 500 2 lines y 887, body 18px/27px y 976 (2 lines), secondary pill 'See dates & locations' 224x59 at y 1046. Card B: padding 32px; title 28px/36.4px 500 in 4 lines (y 887-1033) and the link 'Read the press release' + 16px arrow at y 1082; row 2 three compact cards 437x229 at x 32, 501, 971 (32px gaps), y 1170 (32px under row 1): padding 24px; filled gray tag 'Blog post' at the top; title 24px/31.2px 500 #151515 (a link) at y 1248, 24px under the tag; 16px #0066CC arrow-right bottom-right (x 424 in card 1, y 1349, 24px from the right and bottom edges)
- phone: band y 871-2490; 'Featured' 20px/26px 500 at y 935; cards all stacked 358 wide at x 16, 32px apart: card A y 985 358x528 (padding 24px; title 24px/31.2px 3 lines, body 18px/27px 4 lines, CTA 224x59 at y 1243, image 176x137 centred under the CTA at y 1342); card B y 1544 358x263 (padding 32px; title 24px/31.2px 5 lines; link y 1751); blog cards y 1839 (213 tall), 2084 (187), 2303 (187), titles 20px/26px
- anatomy:
  - Every card: #FFFFFF fill, 1px solid #C7C7C7 border, radius 16px, no shadow
  - Blog card hover: fill #F2F2F2 (whole card is the link)
  - Tag 'Blog post' (rh-tag filled gray): 76x29, fill #E0E0E0, radius 64px, padding 4px 8px, Red Hat Text 14px/21px 400 #151515, margin-bottom 24px
  - Card titles are Display 500 #151515, never red; body Red Hat Text 18px/27px #151515
  - Event illustration is a hybrid-style collage (red Summit badge, teal diamond, red and purple gradient strokes, pink plane) on white: use the downloaded file, do not redraw
- components:
  - card_outline
  - card_compact
  - tag_filled_gray
  - button_secondary_on_light
  - cta_link
- copy:
  - H2: "Featured"
  - Card A: "Put innovation within reach at Red Hat Summit: Connect 2026" / "We’re bringing expert-led panels, product demos, breakout sessions, networking opportunities, and more to cities around the world." / CTA "See dates & locations"
  - Card B: "IBM and Red Hat remediate more than 400 previously unknown vulnerabilities with Lightwell" / link "Read the press release"
  - Blog cards (tag "Blog post"): "Gain insight into key security issues with our new Open Source Security Signals report"; "Preparing for Q-day: 4 steps to prepare your hybrid cloud"; "Meet Red Hat Ansible Automation Platform 2.7"
- copy prov: observed, verbatim, https://www.redhat.com/en (2026-10-30); news rotates

**Company statement with stat (accent bar)**
- summary: White band: the page's H1 statement and a paragraph at left; at right a proof stat set off by an 8px red left bar with a small source line.
- ground: #FFFFFF
- desktop: band y 1494-1749, padding-bottom 64px; starts 95px under the blog cards; left H1 36px/46.8px Display 500 #151515, x 32, 789px wide, 2 lines (y 1494-1588); paragraph 18px/27px #151515 at y 1604, 3 lines, 789px; right column x 955-1424 (lg col-5): accent-bar box x 971 y 1494 437x128, border-left 8px solid #EE0000, padding 8px 0 16px 24px; stat Display 20px/26px 500 #151515 (2 lines, y 1502); source Red Hat Text 12px/18px #4D4D4D at y 1570 (2 lines)
- phone: band y 2490-3112; stack H1 36px/46.8px in 4 lines (y 2586); paragraph 16px/24px 6 lines (y 2789); accent-bar box at x 16 (text x 48) from y 2965, stat 18px/23.4px 500 3 lines, source 12px/18px
- anatomy:
  - Inline text links in body copy: #0066CC with a 1px dashed #707070 underline, offset 4px; hover #004D99, underline turns solid-colour #004D99, offset 6px
  - The stat is the only big number on the page and it carries its source line; never add a number without one
  - No background, no card: the 8px red bar is the whole frame
- components:
  - accent_bar_stat
  - inline_link
- copy:
  - H1: "Red Hat is the leading provider of enterprise open source software solutions"
  - Paragraph: "Enterprises around the world trust [our broad portfolio] of hybrid cloud infrastructure, application services, cloud-native application development, automation, and artificial intelligence solutions to deliver IT services on any infrastructure quickly and cost effectively."
  - Stat: "More than 90% of companies in the U.S. Fortune 500 continue to rely on Red Hat."
  - Source: "Source: Red Hat® client data and [Fortune 500 list for 2026] (subscription required)"
- copy prov: observed, verbatim, https://www.redhat.com/en (2026-10-30)

**Products intro line**
- summary: One centred 28px line on white introducing the dark products band.
- ground: #FFFFFF
- desktop: band y 1749-1881, padding-bottom 96px; h2 Display 28px/36.4px 500 #151515, centred across 1376px, 1 line at y 1749
- phone: band y 3112-3381; h2 28px/36.4px centred, 3 lines (y 3176-3285)
- anatomy:
  - Plain sentence, no eyebrow, no CTA; the following dark band's first card rises 64px into this white band on desktop
- components:
- copy:
  - H2: "Build on a reliable foundation. Take your apps anywhere."
- copy prov: observed, verbatim, https://www.redhat.com/en (2026-10-30)

**Products (dark band, featured product + 2x2 product cards)**
- summary: Near-black band washed with a purple-to-black gradient: a full-width 'Featured product' card (Lightwell), four product cards in a 2x2 grid, each with a hybrid-style product icon, title, text, white outline pill and a row of cloud-provider logos, then a centred red 'See all products' pill.
- ground: #151515 with background-image linear-gradient(rgba(33,19,77,0.62) 6.79%, rgba(0,0,0,0.62) 97.55%) (rgba(33,19,77) = purple-70 #21134D): reads deep purple-black at the top, near-black at the bottom (rgba(0,0,0,0.62) over #151515)
- desktop: band y 1881-3252 (1371px), padding 0 0 64px; container padding 0 32px; featured card Lightwell card x 32 y 1817 1376x275: it starts 64px ABOVE the band (negative top margin) so it overlaps the white intro band. Fill #151515, 1px solid #4D4D4D, radius 16px, padding 32px; text column x 81-813 (732px): 'Featured product' 16px/24px #FFFFFF y 1850, title 24px/31.2px 500 #FFFFFF y 1898, body 18px/27px #FFFFFF y 1946 (2 lines), link 'Get details on the offering' #92C5F9 + arrow y 2037; logo lightwell-logo-rev.webp 295x57 at x 1009 y 1927, vertically centred in the right half; grid 2 columns 674px at x 32 and 736 (30px gap); rows y 2125 (455 tall) and 2612 (453 tall), 32px apart; first row 33px under the featured card; card fill #151515, 1px solid #4D4D4D, radius 16px; content inset 25px (x 57 in a card at x 32): icon 108x91 at +25 top; title 24px/31.2px 500 #FFFFFF at +164; body 18px/27px #FFFFFF at +211 (2 lines, 624 wide); white outline pill at +281 (219x59 'Get portfolio details' or 213x59 'Get product details'); label 12px/18px #FFFFFF at +356 ('Products available on' / 'Available on'); logo row at +390: logos at 32px height (AWS 27, Azure 65, Google Cloud 63, IBM Cloud 46, Oracle 50 wide), 16px apart; footer cta 'See all products' primary pill 185x59 centred (x 628, y 3129); 64px to the band bottom
- phone: band y 3381-6121, padding 64px 0; featured card x 16 y 3445 358x418, inside the band (no overlap on phone); text x 65; 'Featured product' 16px/24px, title 20px/26px, body 16px/24px 6 lines, link y 3749, logo 138x27 centred below at y 3804; cards stacked 360 wide at x 16, 32px apart (y 3895, 4395, 4935, 5472; 462-507 tall); title 20px/26px, body 16px/24px; pill full label width; logo row wraps (Oracle drops to a second line); footer cta 'See all products' pill centred, label at y 6016
- anatomy:
  - Product icons are Red Hat's hybrid-style technology icons: a red rounded square behind a black rounded square holding a white/red line glyph (AI sparkle, RHEL stack, OpenShift ring, Ansible A). Use the files; do not redraw
  - Cloud-provider logos are their own full-colour marks on the dark card (AWS, Microsoft Azure, Google Cloud, IBM Cloud, Oracle Cloud Infrastructure); RHEL and OpenShift show all five, Red Hat AI shows four (no Oracle), Ansible shows four (no IBM Cloud)
  - Secondary pill on dark: transparent fill, 1px solid #FFFFFF, #FFFFFF label; hover border 2px (padding 15px 31px) and a 1px #A3A3A3 underline offset 4px
  - Link on dark: #92C5F9 Display 16px 700 with a 16px arrow
- components:
  - card_dark
  - button_secondary_on_dark
  - button_primary
  - cta_link_on_dark
- copy:
  - Featured card: "Featured product" / "Lightwell" / "Move more quickly from vulnerability discovery, to remediation, to proactive protection, with infrastructure built on trust and backed by IBM and Red Hat." / "Get details on the offering"
  - "Red Hat AI" / "Expand your AI capabilities with optimized models and efficient inference on a platform built for agentic workflows." / "Get portfolio details" / "Products available on"
  - "Red Hat Enterprise Linux" / "Support application deployments—from on premise to the cloud to the edge—in a flexible operating environment." / "Get product details" / "Available on"
  - "Red Hat OpenShift" / "Quickly build and deploy applications at scale, while you modernize the ones you already have." / "Get product details" / "Available on"
  - "Red Hat Ansible Automation Platform" / "Create, manage, and dynamically scale automation across your entire enterprise." / "Get product details" / "Available on"
  - CTA: "See all products"
- copy prov: observed, verbatim, https://www.redhat.com/en (2026-10-30)

**Customer logos**
- summary: White band: a 24px heading, one row of six full-colour customer logos in equal cells, and a blue arrow link.
- ground: #FFFFFF
- desktop: band y 3252-3597, padding-top 80px; heading Display 24px/31.2px 500 #151515 at y 3332; logos 6 cells 203px wide at x 32, 267, 501, 736, 971, 1205 (about 32px gaps), logos scaled to the 203 width and vertically centred in a 142px row (y 3395-3537): Turkish Airlines 203x59, Emirates NBD 203x74, TD 203x142, Panasonic Connect 203x68, Ulta Beauty 203x67, Siemens 203x67; link 'See all customer stories' + arrow at y 3574
- phone: band y 6121-6611, padding-top 80px; heading 20px/26px at y 6201; logos 2 columns 163px wide at x 16 and 211, three rows (y 6259, 6351, 6497); link y 6588
- anatomy:
  - Logos keep their own brand colours (no greyscale filter)
  - No cards, borders or dividers
- components:
  - cta_link
- copy:
  - H2: "Organizations succeeding with Red Hat"
  - Link: "See all customer stories"
- copy prov: observed, verbatim, https://www.redhat.com/en (2026-10-30)

**Open source that works your way (copy + collage)**
- summary: White two-column band: heading, paragraph and red pill at left; a hybrid-style photo collage at right.
- ground: #FFFFFF
- desktop: band y 3597-4044, padding-top 96px; split copy x 32-704 (672px, lg col-6); image open-source-collage.webp 555x351 at x 853 y 3693 (right, top-aligned to the band padding); copy vertically centred on the image; copy H2 28px/36.4px 500 y 3743; paragraph 18px/27px y 3796 (4 lines); primary pill 'See our open approach' 238x59 at y 3936
- phone: band y 6611-7289; stack H2 28px/36.4px 2 lines (y 6707), paragraph 16px/24px 6 lines (y 6796), pill y 6971, then the image 358x227 at y 7062
- anatomy:
  - Collage: two people at a laptop masked in a rounded rectangle on red-40/red-50 with a pale red-05 backing shape, dotted grid, and three white circle 'bubbles' holding red line icons; one light source. Use the file
- components:
  - button_primary
- copy:
  - H2: "Open source that works your way"
  - Paragraph: "Our hybrid cloud solutions provide choice and flexibility, powered by an open ecosystem of customers, partners, and communities. Rely on our technologies, experience, and support to help you build and operate on your terms—across environments and wherever workloads run."
  - CTA: "See our open approach"
- copy prov: observed, verbatim, https://www.redhat.com/en (2026-10-30)

**Tech topics worth exploring (vertical tabs)**
- summary: Heading with a secondary pill at right, then a vertical tab list (14 topics) beside a bordered panel holding a topic definition, a list of article links and a customer proof block.
- ground: #FFFFFF
- desktop: band header y 4045-4200 (padding-top 96px): H2 28px/36.4px at x 32 y 4152, secondary pill 'See all topics' 163x59 right-aligned at x 1245 y 4141; tabs y 4231-5034, then a 64px spacer to 5131; tabs rh-tabs vertical: list x 32 181px wide with a 1px #C7C7C7 left rule; first tab starts 32px down; each tab 53px tall, padding 8px 16px, Red Hat Text 16px/24px; inactive #4D4D4D, active #151515 with a 3px #EE0000 left bar; panel x 245 y 4263 1131x638: #FFFFFF, 1px solid #F2F2F2 border, radius 3px, padding 24px 32px (a #E0E0E0 layer behind shows only as a faint edge). Content x 278: H3 24px/31.2px 500 y 4288; definition 18px/27px y 4336; 'Read more' link y 4400; then two columns: left 'Articles' H4 20px/26px 500 y 4503 + 8 links Red Hat Text 18px/27px #0066CC (no underline) on a 35px pitch (y 4547-4792) + 'Explore related blog posts' y 4853; right x 902: Banco Galicia logo 244x66 y 4503, proof line 18px/27px 441 wide y 4601, 'See how' link y 4692
- phone: band y 7289-8685; tabs horizontal scrolling row at y 7486, 53px tall, with 56x53 prev/next chevron buttons at x 16 and 317; active tab marked with the 3px red bar at its left; panel x 32 326 wide from y 7554 (960 tall), content x 49: H3 20px/26px, text 16px/24px, links 16px/24px on a 32px pitch, 1px dividers between the three blocks, Galicia logo 251x68; cta 'See all topics' secondary pill centred below the panel (x 113 y 8562)
- anatomy:
  - Tab labels in order: AI, APIs, Automation, Cloud, Cloud services, Containers, DevOps, Edge computing, Integration, Linux, Microservices, Middleware, Security, Virtualization
  - Tab hover: label darkens; active state = 3px red left bar only (no fill)
  - Article links are plain #0066CC text, no underline at rest
- components:
  - tabs_vertical
  - button_secondary_on_light
  - cta_link
- copy:
  - H2: "Tech topics worth exploring"; CTA "See all topics"
  - Panel (AI tab): "Understanding AI" / "Artificial intelligence (AI) refers to systems that can acquire and apply knowledge, and carry out behavior based on that knowledge." / "Read more"
  - "Articles": What is generative AI? / What are foundation models for AI? / What are large language models? / What is deep learning? / What is MLOps? / AI infrastructure explained / Understanding AI/ML use cases / What is machine learning? / "Explore related blog posts"
  - Proof: Banco Galicia logo / "The bank cut verification times from days to minutes with an AI-based natural language processing solution." / "See how"
- copy prov: observed, verbatim, https://www.redhat.com/en (2026-10-30)

**Get more with a Red Hat account (pre-footer)**
- summary: Light-grey full-bleed band: heading, paragraph, red pill and a blue link at left; a hybrid-style portrait collage at right.
- ground: #F2F2F2 (gray-10)
- desktop: band y 5131-5617 (486px); split copy x 32-704; image account-collage.png 550x358 at x 853 y 5195 (64px from the band top and bottom); copy H2 28px/36.4px 500 y 5244; paragraph 18px/27px 3 lines y 5296; primary pill 'Log in or register' 192x59 at y 5393; link 'Explore account benefits' + arrow y 5481
- phone: band y 8685-9411; stack H2 24px/31.2px y 8749, paragraph 18px/27px 5 lines, pill y 8947, link y 9035, image 358x233 at y 9114
- anatomy:
  - Collage: smiling man in a purple turban with a laptop masked over a red-40 rounded shape, a document card with red rules, a cursor arrow, a cloud with a keyhole, red dot grid
- components:
  - button_primary
  - cta_link
- copy:
  - H2: "Get more with a Red Hat account"
  - Paragraph: "Sign in or create an account to start product trials, access training tools, register for events, get world-class support, and more. A subscription may be required for some services."
  - CTA: "Log in or register"; link "Explore account benefits"
- copy prov: observed, verbatim, https://www.redhat.com/en (2026-10-30)

**Footer**
- summary: Dark three-tier footer: logo and language select over a hairline; four link columns plus an 'About Red Hat' block; then a black legal strip with the hat, two rows of small links, copyright and five social icons.
- ground: 1px solid #707070 top rule; header and main #1F1F1F (gray-90); legal strip #151515 (gray-95)
- anatomy:
  - Header y 5618-5717, padding 32px: logo footer-logo-on-dark.svg 135x32 at x 32 y 5651 (red hat, white wordmark); language select at right x 1265 y 5650 143x35: fill #151515, 1px solid #707070, radius 3px, padding 6px 38px, Red Hat Text 14px #FFFFFF with a globe icon left and caret right, value 'English'; a 1px hairline (mid grey, as the #707070 rules) across x 32-1408 under the header
  - Main y 5717-6117, padding 32px 32px 64px: headings Red Hat Display 18px/23.4px 500 #FFFFFF at y 5749; links Red Hat Text 14px/21px 400 #FFFFFF on a 29px pitch (first link y 5788); columns x 32, 264, 496, 728 (200px wide, 232px pitch), About block x 960 448px wide
  - Platforms: Red Hat AI, Red Hat Enterprise Linux, Red Hat OpenShift, Red Hat Ansible Automation Platform, See all products
  - Tools: Training and certification, My account, Customer support, Developer resources, Find a partner, Red Hat Ecosystem Catalog, Documentation
  - Try, buy, & sell: Product trial center, Red Hat Store, Buy online (Japan), Console
  - Communicate: Contact sales, Contact customer service, Contact training, Social
  - About Red Hat: paragraph 14px/21px #C7C7C7 "Red Hat is an open hybrid cloud technology leader, delivering a consistent, comprehensive foundation for transformative IT and artificial intelligence (AI) applications in the enterprise. As a trusted adviser to the Fortune 500, Red Hat offers cloud, developer, Linux, automation, and application platform technologies, as well as award-winning services." (links 'trusted adviser to the Fortune 500' and 'award-winning' #92C5F9 with 1px dashed #92C5F9 underline); then two link columns at x 960 and 1191, 29px pitch from y 5946: Our company, How we work, Customer success stories, Newsroom, Open source commitments, Our social impact, Jobs (read across)
  - Legal strip y 6117-6245, padding 32px: hat footer-hat.svg 53x40 at x 32 y 6149; row 1 at y 6157 (Red Hat Text 12px/16px #FFFFFF, about 24px apart from x 117): About Red Hat, Jobs, Events, Locations, Contact Red Hat, Red Hat Blog, Inclusion at Red Hat, Cool Stuff Store, Red Hat Summit; row 2 at y 6197: Privacy statement, Terms of use, All policies and guidelines, Digital accessibility, Cookie preferences
  - Right side of the legal strip: "© 2026 Red Hat" 12px/16px #C7C7C7 right-aligned at y 6151; social icons 24px #A3A3A3 at y 6187, 40px pitch from x 1224: LinkedIn, YouTube, Facebook, X, Instagram
  - No street address or phone number is published in the footer (not published)
  - Footer links have no underline at rest; hover underlines
- phone: Header 163px: logo at y 9444, then the language select under it at x 16 y 9508. Platforms, Tools, Try, buy, & sell, Communicate become collapsed accordions (rows 358x54 at x 16 from y 9575, toggle fill #151515, padding 16px 24px, Display 16px/20.8px 500 #FFFFFF, 1px #707070 top and bottom rules). About Red Hat stays open (18px/23.4px heading, 14px paragraph, two link columns at x 16 and 202). Legal strip #151515 from y 10181 (padding 32px 16px): the two link rows become a two-column list (x 16 and 207, 24px pitch), a 1px #707070 rule, copyright at y 10558, socials at y 10594 from x 16 (40px pitch). Footer is 1239px tall.
- copy prov: observed, verbatim, https://www.redhat.com/en (2026-10-30)

**On dark grounds**
- secondary button: transparent fill, 1px solid #FFFFFF, #FFFFFF Display 16px 700 label, radius 64px, padding 16px 32px (59px tall); hover border 2px, padding 15px 31px, underline 1px #A3A3A3 offset 4px
- primary button: unchanged on dark: #EE0000 fill, white label (See all products)
- link: #92C5F9 (interaction-blue-30) Display 16px 700 + 16px arrow; inline links in dark paragraphs #92C5F9 with a 1px dashed #92C5F9 underline
- muted text: #C7C7C7 (footer paragraph, copyright); #A3A3A3 for social icons
- hairline: 1px solid #4D4D4D card borders on #151515; 1px solid #707070 footer rules and select border
- logo variant: full logo on dark: red hat with white wordmark (footer-logo-on-dark.svg); hat-only in the legal strip

## Components

- **button primary** (observed): fill #EE0000, text #FFFFFF, border 1px solid #EE0000, ring px 1, ring #EE0000, radius 64, padding 16px 32px, padding x 32, height 59, font size 16, weight 700, face display, text style Red Hat Display 16px/24px 700, example Register for the virtual event (278x59), See all products (185x59)
  - hover (observed): fill #A60000, border 1px solid #A60000, label underline 1px #FFFFFF offset 4px
  - focus (observed): fill #A60000, inner 1px #FFFFFF outline offset -3px, outer 2px outline offset 2px (rh-cta stylesheet)
- **button secondary on light** (observed): fill transparent, text #151515, border 1px solid #151515, ring px 1, ring #151515, radius 64, padding 16px 32px, padding x 32, height 59, font size 16, weight 700, face display, example See dates & locations (224x59), See all topics (163x59)
  - hover (observed): border 2px solid #151515, padding 15px 31px, label underline 1px #8C8C8C offset 4px
- **button secondary on dark** (observed): fill transparent, text #FFFFFF, border 1px solid #FFFFFF, ring px 1, ring #FFFFFF, radius 64, padding 16px 32px, padding x 32, height 59, font size 16, weight 700, face display, example Get product details (213x59)
  - hover (observed): border 2px solid #FFFFFF, padding 15px 31px, label underline 1px #A3A3A3 offset 4px
- **cta link** (observed): text #0066CC, text style Red Hat Display 16px/24px 700, no underline, 16px arrow-right 8px after the label, radius 6
  - hover (observed): color #004D99, decoration underline 1px #004D99 offset 4px, arrow translate 3px 0, 0.3s cubic-bezier(0.465,0.183,0.153,0.946)
- **cta link on dark** (observed): text #92C5F9, text style Red Hat Display 16px/24px 700 + 16px arrow
- **inline link** (observed): text #0066CC, text style inherits body size; 1px dashed #707070 underline, offset 4px
  - hover (observed): color #004D99, decoration 1px #004D99, offset 6px
- **tag outline purple** (observed): fill #151515, text #B6A6E9, border 1px solid #5E40BE, radius 64, padding 4px 8px, icon 14px calendar #D0C5F4, 8px gap, text style Red Hat Text 14px/21px 400, size 156x29
- **tag filled gray** (observed): fill #E0E0E0, text #151515, radius 64, padding 4px 8px, text style Red Hat Text 14px/21px 400, size 76x29
- **card outline** (observed): fill #FFFFFF, border 1px solid #C7C7C7, radius 16, padding 32px (featured), 24px (compact), shadow none
  - hover (observed): fill #F2F2F2 (compact blog cards, whole card is the link)
- **card dark** (observed): fill #151515, border 1px solid #4D4D4D, radius 16, padding 24px content inset (featured product: 32px + 16px column), text #FFFFFF
- **accent bar stat** (observed): border 8px solid #EE0000 on the left only, padding 8px 0 16px 24px, fill none, text #151515, text style stat Display 20px/26px 500; source Red Hat Text 12px/18px #4D4D4D
- **tabs vertical** (observed): list 181px wide, 1px #C7C7C7 left rule; tab 53px tall, padding 8px 16px, Red Hat Text 16px/24px, text #4D4D4D, on #151515, indicator 3px #EE0000 left bar on the active tab, panel #FFFFFF, 1px #F2F2F2, radius 3px, padding 24px 32px, radius 3
- **nav link** (observed): text #151515, text style Red Hat Text 16px/24px 400 + 10px chevron
  - hover (observed): border-bottom 4px solid #C7C7C7 on the 82px item
- **footer link** (observed): text #FFFFFF, text style Red Hat Text 14px/21px 400, 29px pitch; legal 12px/16px
  - hover (observed): decoration underline
- **language select** (observed): fill #151515, text #FFFFFF, border 1px solid #707070, radius 3, padding 6px 38px, size 143x35, text style Red Hat Text 14px/21px, globe icon left, caret right
- **focus ring** (observed): ring #0066CC, ring px 2, radius 3. outline 2px solid #0066CC on links and the logo; offset 2px on CTAs

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| shape-transition |  |  | Base shapes grow, shrink and morph into one another to move between collage scenes; elements pop out of frames as the story unfolds | published |
| logo-outro |  |  | Videos end on the animated Red Hat logo (specs in the login-only video standards) | published |
| focus-no-transition |  |  | Focused interactive elements switch transition animations off | published |
| fully-animated-3d |  |  | Full-frame 3D scenes are animation-only, never used as a static design | published |

## Icon tokens

Grid 30px grid, saved with a 3px margin (36 x 36px) for standard icons; 32px grid for UI icons; 20px grid for microns, stroke 1.25pt on standard icons; 2px on UI icons and microns at artboard size (published).
| Name | Size | Use |
|---|---|---|
| standard icon | 36px | artwork icons paired with text on slides, web cards, diagrams; best between 32 and 128px |
| UI icon | 32px | interface icons at 16-32px; 2px stroke at 32, 1px at 16 |
| micron | 20px | tiny interactive icons at 10-20px (dropdowns, close, search), for spaces 12px or less; 2px stroke at 20, 1px at 10 |

## Signature moves

### Pops of Red Hat red

Where: every piece: large headlines, a key word, pull quotes, the hat, a CTA.
Do: Restrained, mostly neutral layouts (white or gray-10, or black, gray-80 or purple-80) with red-50 #EE0000 used sparingly to draw the eye; large headlines are often set entirely in red-50 with black or white body copy. Red-50 must appear in everything Red Hat makes. Reserve red for short lines; paragraphs stay black or white.
Don't: flood a space with red, set body copy in red, or leave red out entirely.
Example: "Opportunities are open", with "open" set as color.

### Hybrid style base shapes

Where: collages for web bands, cards, ads, social and slides.
Do: Nine fixed shapes inspired by the hat: circle, pill, rectangle, diamond, square, hexagon, hat brim, hat crown, hat pinch. Rectangle and diamond round two opposite corners 3x more than the other two; square and hexagon corners are equal. Shapes can be scaled, flipped, rotated, filled with an accent color or gradient, or drawn as a thin stroke; they mask photos and platform art, and key elements break out of the frame. One light source (upper left by default), soft drop shadows. One clear focal point per collage, with red-50 in every collage.
Don't: distort shapes, change their corner radii, combine shapes into new ones, invent new shapes, or use the hat itself as a base shape.
Example: "Choose scale over sprawl".

### Thin gradient strokes

Where: weaving through hybrid collages, in front of and behind elements.
Do: Four strokes only: red-40 #F56E6E to red-50 #EE0000; red-40 to purple-50 #5E40BE (via #C96E96, #996EC2, #876FD4); red-40 to orange-10 #FFE8CC (via red-30 #F9A8A8 at 40%); red-40 to teal-20 #B9E5E5 (via red-30 at 40%). Lightest end toward the light source; the line stays thin. A stroke is a line, never a fill.
Don't: use a gradient stroke as a fill, background or glow, thicken it, or make new gradients.
Example: "Build quickly and launch anywhere".

### The hat as artwork

Where: internal, event and swag pieces where everyone knows the brand.
Do: The exact trademarked hat (crown, band, brim) used as a mask, masked inside shapes, repeated as a pattern or cropped off the edge, in core colors only (red, black, gray or white), with the Red Hat name or logo nearby. Only where the audience already knows Red Hat.
Don't: redraw, flip, tilt, recolor outside core colors, drop the band, render in 3D, or generate hats with AI.
Example: "We are Red Hat".

## Messaging: rules

A brand platform of three statements (value proposition, brand position, brand promise) summed up in the mantra "No one innovates alone". The public page gives the promise and three "We are..." lines, each tied to a way of innovating: confidently, consistently, comprehensively. The full statements live on the login-only intranet.

Why it works: One mantra lets 22,000 people say the same thing in their own words; tying each pillar to an adverb keeps claims about how customers innovate, not about Red Hat.

- Use the mantra as a guide, not as a headline or tagline
- Lead with what customers can do (innovate confidently, consistently, comprehensively)
- Back claims with a sourced number
- The campaign line "Keep your options open" stands for freedom to choose

Sources: https://www.redhat.com/en/about/brand/standards/platform, https://www.redhat.com/en, https://www.redhat.com/en/about/brand/standards/personality

## Voice: rules

Voice is experienced (not purist), compassionate (not compliant) and progressive (not reckless), each shown as a too-soft, right and too-hard line. Tone moves along four dials (formality, urgency, empathy, authority) chosen by reading the audience. Style asks for clear, concise, conversational, credible and compelling copy, with paired do and don't lines.

Why it works: Red Hat sells to experts who distrust hype; specific, honest, plain lines sound like a peer who has "been in the room".

|  |  |
|---|---|
| Voice | experienced, compassionate, progressive |
| Personality | open, authentic, helpful, brave |
| Tone dials | formality, urgency, empathy, authority |
| Style | clear, concise, conversational, credible, compelling |
| Case | sentence case, even headlines |

- Pick the line between too deferential and too know-it-all: specific and sourced
- Write like people talk, to people, not at them
- Keep it concrete: name the tool, the number, the outcome
- Cut every word that does not earn its place
- Never promise the impossible; never patronize experts
- Say something only Red Hat can say
- Sentence case; no all caps; no spaced dashes; ampersand only when tight, never a plus
- Don't use abstract verbs like streamline or harness the power of
- Don't write "Our platform delivers comprehensive automation"-style claims at the reader
- Don't use leading rhetorical questions with experts
- Don't translate or split "Red Hat"

Do and don't:
- Do: "Trusted by 90% of Fortune 500 companies". Specific and sourced (the guide's Red Hat voice line).
- Don't: "Trusted by more enterprises than any other platform". Too know-it-all.

Real examples, to look at on Red Hat's own pages (not for reuse):
- An ad from the Connected Campaign (brave: bold, focused): https://www.redhat.com/en/about/brand/standards/personality#how-we-look
- Red Hat's approach to hybrid cloud web page: https://www.redhat.com/en/about/brand/standards/personality#how-we-look

Sources: https://www.redhat.com/en/about/brand/standards/personality#how-we-sound, https://www.redhat.com/en/about/brand/standards/typography, https://www.redhat.com/en/about/brand/standards/naming-and-trademarks, https://www.redhat.com/en/about/trademark-guidelines-and-policies

## Logo: rules

The logo (Open Brand Project, 2019) is the hat, the same fedora Shadowman wore, plus a bold wordmark drawn from Red Hat Display. Three lockups: A horizontal (preferred), B stacked with the same sizes, C stacked with a small wordmark for large signage only. The hat can stand alone where the brand is already known.

Why it works: As an open source company, trademarks are the most important IP Red Hat owns; one unaltered hat in red with a black band is what people recognise.

|  |  |
|---|---|
| Lockups | A horizontal, B stacked, C stacked small-type (signage), hat alone |
| Clear space | "e" height (A, B); 2x "e" (C); brim height (hat) |
| Minimum | hat 16px / 0.22 in / 5.5 mm; lockups not published |
| Colorways | full color (black or white wordmark), one-color red, black or white |
| Grounds shown | white, gray-10, red-10, black/gray-95, purple-70, red-50 (one-color white) |

- Logo A for most uses, especially spaces wider than tall; Logo B for squarer spaces; Logo C only for large-scale signage
- Clear space: the height of the "e" all round for A and B, double that for C; more is better
- Hat alone: clear space about the height of the brim; minimum 16px tall (0.22 in / 5.5 mm); no maximum
- Black wordmark on light grounds, white wordmark on dark; the hat stays red with a black band
- One-color logo drops the band; prefer red, use white on red
- On photos and video, place the logo on a clear area with the best contrast
- Co-brand: Red Hat logo with the partner logo in a lockup; whoever leads goes first
- Hat alone (favicon, social avatar, business card, signage, swag) always red with black band
- Don't change the band color or remove it from the full-color logo
- Don't add gradients or shadows
- Don't recolor outside approved colorways
- Don't stretch or distort
- Don't scale or move parts independently
- Don't use the full-color logo in grayscale
- Don't place it on clutter
- Don't use Shadowman, legacy logos or Tux
- Don't generate the logo or fedoras with AI
- Don't co-brand a technology icon with a partner logo

Real examples, to look at on Red Hat's own pages (not for reuse):
- Logo A with "e" clear space: https://www.redhat.com/en/about/brand/standards/logo
- Logo C with double clear space: https://www.redhat.com/en/about/brand/standards/logo
- Logo A in a document corner with room: https://www.redhat.com/en/about/brand/standards/logo
- Not this: logo cramped against the edge: https://www.redhat.com/en/about/brand/standards/logo
- The hat: crown, band, brim: https://www.redhat.com/en/about/brand/standards/the-hat
- Hat minimum 16px: https://www.redhat.com/en/about/brand/standards/the-hat
- Logo A one-color white on Red Hat Tower: https://www.redhat.com/en/about/brand/standards/logo
- Not this: white band: https://www.redhat.com/en/about/brand/standards/logo

Sources: https://www.redhat.com/en/about/brand/standards/logo, https://www.redhat.com/en/about/brand/standards/the-hat, https://www.redhat.com/en/about/trademark-guidelines-and-policies, https://www.redhat.com/en

## Color: rules

Core colors are red, black and white, with red tints and shades and neutral grays for depth. Expressive secondary families (orange, yellow, teal, purple) add energy but never stand alone. Auxiliary palettes are strictly functional: information (success-green, danger-orange, interaction-blue) and people (skin tones for illustration). Seven named collections set grounds and text colors per project. All families run 10 (light) to 80 (dark), and equal numbers share visual weight.

Why it works: Restraint makes the pure red unmistakable: neutral, open layouts with one pop of red read as Red Hat even before the logo.

|  |  |
|---|---|
| Red Hat red | #EE0000, RGB 238 0 0, CMYK 0 98 85 0, Pantone 1788 C |
| Families | red, gray, orange, yellow, teal, purple, success-green, danger-orange, interaction-blue, cool-tone, warm-tone |
| Secondary anchors | orange-40 Pantone 144 C; yellow-30 108 C; teal-50 2234 C; purple-50 2097 C |
| Contrast | 4.5:1 small text, 3:1 large text and graphics |
| Secondary per piece | 1 or 2 |

- Start every project from a collection: core light (white or gray-10 ground; black or red-50 text), core dark (black or gray-80; white or red-50 text), core red (red-10 or white; black or red-50 text), expressive light (gray-10, red-10 or white; black, purple-80 or red-50 text), expressive dark (black or purple-80; white or red text), interface light (white, gray-10, gray-30; gray-95, gray-80, blue-50 or red-50 text), interface dark (gray-95, gray-80, gray-70; white, gray-30, blue-20 or red-50 text)
- Include red-50 in everything, as pops, never as a flood
- Fill large areas with the lightest tints, darkest shades or subtle gradients; save saturated values for callouts and navigation
- Use one or two secondary families per piece; hybrid style allows at most two accent colors per layout
- Information colors only for status and interaction; people colors only for skin
- Data colors: red = Red Hat, danger-orange = error/decrease, orange = caution, yellow = warning, success-green = success/increase, teal = neutral, interaction-blue = link, purple = info, gray = Null (unavailable)
- Small text (17pt or smaller) 4.5:1; large text (18pt+) and informative graphics 3:1 (WCAG AA)
- Use labels as well as color; avoid vibrating pairs of equally saturated hues
- Only the gradients in the hybrid style handbook; never create new ones
- Don't use colors outside the palette
- Don't flood everything with red
- Don't forget red
- Don't overuse gradients or make new ones
- Don't use AI-generated images without correcting their colors
- Don't use red for negative things
- Don't set red-50 on gray-80, white on teal-40, black on red-60 or white on purple-30 (fail contrast)

Not published: overall color proportions or ratios (only qualitative "pops of red"); CMYK and Pantone for most tints (login-only); exact gradient angles and sizing (login-only "gradient specs").

Do and don't:
- Do: "Choose scale over sprawl". A large headline in red-50 on white, body in black (typography color guidance).
- Don't: "Choose scale over sprawl". Red flooding the whole space.

Real examples, to look at on Red Hat's own pages (not for reuse):
- Core light collection with examples: https://www.redhat.com/en/about/brand/standards/color
- Expressive dark collection with examples: https://www.redhat.com/en/about/brand/standards/color
- The palette page's gradient samples: https://www.redhat.com/en/about/brand/standards/color
- Not this: everything flooded with red: https://www.redhat.com/en/about/brand/standards/color
- Not this: red-50 on gray-80 fails: https://www.redhat.com/en/about/brand/standards/color#accessibility

Sources: https://www.redhat.com/en/about/brand/standards/color, https://www.redhat.com/en/about/brand/standards/hybrid-style-handbook, https://ux.redhat.com/tokens/color/, https://ux.redhat.com/foundations/color/

## Typography: rules

One open source family designed for Red Hat: Display (default, geometric with human touches and 12-degree ascenders), Text (for reading) and Mono (for code). Typography is plain and roomy: flush left, sentence case, no tracking changes, generous margins, big or bold headlines, often in red. The design system publishes a full pixel scale.

Why it works: The faces are built to look best in sentence case at default spacing, so restraint and size do the work; making them open source is itself on-brand.

|  |  |
|---|---|
| Display | Red Hat Display (headings, logo) |
| Body | Red Hat Text, 16px base, 1.5 |
| Mono | Red Hat Mono, code only |
| Web headings | 48/40 Regular, 36/28/24/20/18/16 Medium, 1.3 |
| Expressive | 64/80/96 at 1.1 (48 under 768px) |
| Body sizes | 12/14/16/18/20/24 at 1.5 |
| Tracking | never changed |
| Non-Latin | Noto Sans |

- Display for headings, Text for body, Mono only for code or technical headlines (never Text for web headings or Display for web body)
- Sentence case everywhere, even headlines; never all caps
- Flush left by default; center only short headers or captions in narrow centered layouts; right only for narrow sidebars or RTL; never justify
- Never change tracking (text under 6px may open to +10 or +20)
- Line height 1.2 to 1.5 for most text; 1.1 for very large text; never under 1.1 or over 1.5 (web: 1.3 headings, 1.5 body)
- Line length 20 to 100 characters (web: 30 to 120, or 2 to 7 desktop columns; body never wider than 789px)
- Headlines big, bold or both, often red; at most three lines; no widows
- Links blue-50 on light, blue-30 on dark, underlined (dashed where possible)
- Named weights only: Display 300/400/500/700/900; Text and Mono 300/400/500/700; no Bold in web body or code
- At most three text styles in one block on the web
- Don't use other fonts
- Don't fill a whole space with text
- Don't use all caps
- Don't track text in or out
- Don't justify text
- Don't stack more than one emphasis treatment
- Don't set long paragraphs in red

Do and don't:
- Do: "Choose an OS that moves with you". Sentence case, concise, conversational.
- Don't: "HARNESS THE POWER OF AN OPERATING SYSTEM". All caps and inflated wording, both ruled out.

Real examples, to look at on Red Hat's own pages (not for reuse):
- Red Hat Display letterform features: https://www.redhat.com/en/about/brand/standards/typography
- The named weights of the three variable fonts: https://www.redhat.com/en/about/brand/standards/typography
- Hierarchy: red headline, subhead, body: https://www.redhat.com/en/about/brand/standards/typography
- Red headline, black body copy: https://www.redhat.com/en/about/brand/standards/typography
- Solutions homepage with a large headline: https://www.redhat.com/en/about/brand/standards/typography

Sources: https://www.redhat.com/en/about/brand/standards/typography, https://ux.redhat.com/foundations/typography/, https://ux.redhat.com/foundations/typography/scale-and-rhythm/, https://ux.redhat.com/foundations/typography/type-specifics/, https://ux.redhat.com/foundations/typography/guidelines/, https://ux.redhat.com/tokens/font/

## Graphic elements: rules

Hybrid style is Red Hat's expressive layer: collages that mix photography, studio portraits, people illustrations, 3D objects, 3D platform artwork, icons and logos on nine hat-derived base shapes, tied together by thin gradient strokes and one light source. Each project sits on a spectrum from essential (logo, core colors, icons, type) to expressive (secondary colors, 3D, portraits). A March 2026 update made light red, not light purple, the light-theme depth color and added an accent gradient.

Why it works: Software cannot be photographed; collages show the people and the technology together, the visual form of "no one innovates alone".

|  |  |
|---|---|
| Base shapes | circle, pill, rectangle, diamond, square, hexagon, hat brim, hat crown, hat pinch |
| Corner rule | rectangle/diamond: two corners 3x the other two |
| Dark grounds | black, gray-80, purple-80 + 3 gradients |
| Light grounds | white, gray-10, red-05 + 3 gradients |
| Gradient strokes | red-40 to red-50, purple-50, orange-10 or teal-20 |
| Light | single source; upper left by default |

- Choose the level per goal: essential for information and awareness; expressive for storytelling
- Backgrounds, dark: black, gray-80, purple-80, or gradients gray-60 to black, purple-60 to purple-80, purple-60 to black
- Backgrounds, light: white, gray-10, red-05, or gradients white to gray-10, white to red-05, red-10 to red-20
- Accents: red, orange, yellow, teal, purple and gray families plus two accent gradients, red-40 to red-50 and red-05 to red-40; max two accent colors per layout
- Every collage: single light source, grounding element, one focal point; add story elements and accent shapes only when needed
- Mask photos, portraits and platform art inside base shapes; let key elements break the frame
- One platform-art style per composition: Linux standardization (platforms), application development (speed-line pills), automation (repeating triangles), AI (cube blocks), cross platform, cross platform grid
- Icons go on a backing shape (circle, square, oval) with room to breathe; logos keep clear space
- 3D objects only in provided colorways, with soft shadows matching their light
- Don't use colors or gradients outside the handbook
- Don't make accent colors the main color
- Don't use gradient strokes as fills, backgrounds or glows
- Don't distort or re-radius base shapes
- Don't put text on platform art
- Don't use stock photos full-bleed or remove photo backgrounds (studio portraits excepted)
- Don't mix 2D and 3D technology icons
- Don't put several studio portraits in one shape
- Don't generate people, hats or 3D with untrained AI

Real examples, to look at on Red Hat's own pages (not for reuse):
- A hybrid collage: fedora, sparkles and cloud on base shapes: https://www.redhat.com/en/about/brand/standards/hybrid-style-handbook
- The nine base shapes: https://www.redhat.com/en/about/brand/standards/hybrid-style-handbook
- Dark-theme grounds and gradients: https://www.redhat.com/en/about/brand/standards/hybrid-style-handbook
- Light-theme grounds and gradients: https://www.redhat.com/en/about/brand/standards/hybrid-style-handbook
- The four gradient strokes: https://www.redhat.com/en/about/brand/standards/hybrid-style-handbook
- Anatomy of a collage: https://www.redhat.com/en/about/brand/standards/hybrid-style-handbook
- The essential end of the spectrum: https://www.redhat.com/en/about/brand/standards/hybrid-style-handbook
- The expressive end of the spectrum: https://www.redhat.com/en/about/brand/standards/hybrid-style-handbook

Sources: https://www.redhat.com/en/about/brand/standards/hybrid-style-handbook, https://www.redhat.com/en/about/brand/standards/3d, https://www.redhat.com/en/about/brand/standards/the-hat, https://www.redhat.com/en/about/brand/standards/color

## Iconography: rules

Three icon types: standard icons (artwork, 36-128px), UI icons and microns (interface), and technology icons (one per product or component, in a rounded rectangle). All share the visual metaphors, rounded strokes and 12-degree angles of the type. Standard and UI icons are CC BY 4.0.

|  |  |
|---|---|
| Standard | 30px grid, 1.25pt, 36px file, 32-128px use |
| UI | 32px grid, 2px stroke, 16-32px |
| Micron | 20px grid, 2px stroke, 10-20px |
| Tech icon corner | 9pt radius |
| Badge | 1/3 icon height, 5px gap, gray-10 |
| License | CC BY 4.0 |

- Standard icons: 30px grid, 1.25pt strokes, rounded corners and ends, saved at 36 x 36 with a 3px margin; use 32-128px
- UI icons: 32px grid, 2px stroke (1px at 16px), use 16-32px; microns: 20px grid, 2px stroke, 10-20px, only for spaces 12px or less
- Angles 0/45/90 degrees or plus/minus 12 degrees; circles overshoot squares by 1px
- Default colors red, black or white; any palette color allowed; UI icons and microns 3:1 contrast minimum
- Technology icons: 9pt-radius rounded rectangle; products black fill with gray-60 outline and red-50 + white strokes; components white fill with gray-20 outline and red-50 + black strokes; about 50:50 between the two stroke colors
- One-color tech icons only in red-50, black, white or grays; products filled, components outlined
- Marketplace badges: gray-10 rounded square, one third the icon height, bottom right, 5px gap, gray-20 outline, gray-95 glyph; marketplaces only
- Keep the Red Hat logo, product logo or product name near any technology icon
- Don't combine, rotate or distort icons
- Don't add shadows, gradients or 3D
- Don't make multicolor icons or use off-palette colors
- Don't use other companies' or free icons
- Don't generate icons with AI
- Don't blow icons up to fill large spaces
- Don't use UI icons as decoration
- Don't remove a technology icon from its rounded rectangle

Real examples, to look at on Red Hat's own pages (not for reuse):
- An icon on the 30px grid: https://www.redhat.com/en/about/brand/standards/icons/standard-icons
- Icons in web cards: https://www.redhat.com/en/about/brand/standards/icons/standard-icons
- Technology icons: https://www.redhat.com/en/about/brand/standards/icons/technology-icons
- The rounded rectangle of a technology icon: https://www.redhat.com/en/about/brand/standards/icons/technology-icons

Sources: https://www.redhat.com/en/about/brand/standards/icons/standard-icons, https://www.redhat.com/en/about/brand/standards/icons/ui-icons, https://www.redhat.com/en/about/brand/standards/icons/technology-icons, https://ux.redhat.com/foundations/iconography/

## Illustration: rules

Two 2D types. Mini illustrations show one idea from the icon metaphors, flattened, lit from the top left, in white, red-30 and red-50 at about 50:50 white to red, on a 1080px artboard with a 1000px key line. People illustrations are realistic, photo-referenced professionals with true proportions, gradients, hard shadows and edge lighting, skin from the people palette. A new people style arrived in March 2026.

Why it works: Precise geometry signals reliability; realistic people keep technology human and avoid enterprise clichés.

|  |  |
|---|---|
| Mini palette | white, red-30, red-50 (50:50 white to red) |
| Mini artboard | 1080 x 1080, 1000 key line |
| Light | top left |
| Skin | cool-tone or warm-tone families |

- Minis: single concept, 1-2 objects, front-on, light from top left, white/red-30/red-50 only
- One-color minis exist for light and dark grounds
- Mini collages: minis on a base shape with a subtle drop shadow
- People: natural anatomy, real faces with expressions, simple clothing in core/secondary colors
- One skin-tone family per person, two tones for the gradient
- One light source across a scene; people are the focal point
- Don't add colors or light sources to minis
- Don't combine minis or use them in complex collages
- Don't use minis where details are illegible (use icons)
- Don't oversimplify people or erase facial features
- Don't change a person's skin tone (no purple people)
- Don't use AI-generated or near-style illustrations externally

Real examples, to look at on Red Hat's own pages (not for reuse):
- Agile integration mini illustration: https://www.redhat.com/en/about/brand/standards/illustration#mini-illustrations
- Color balance in a mini: https://www.redhat.com/en/about/brand/standards/illustration#mini-illustrations
- Light in people illustrations: https://www.redhat.com/en/about/brand/standards/illustration#people-illustrations
- People illustration in a hybrid collage: https://www.redhat.com/en/about/brand/standards/illustration#people-illustrations

Sources: https://www.redhat.com/en/about/brand/standards/illustration, https://www.redhat.com/en/about/brand/standards/hybrid-style-handbook, https://www.redhat.com/en/about/brand/standards/color

## Photography: rules

Candid, documentary photos of real people (Red Hatters, attendees, selected models) at work: whiteboards, conversations, hands on laptops, in naturally lit modern offices. Shallow depth of field, over-the-shoulder framing with foreground objects, soft diffused window light, slightly desaturated warm-neutral grade, with a little natural red as a focal point.

|  |  |
|---|---|
| Light | soft, diffused, window-like |
| Grade | slightly desaturated, warm neutral |
| Depth | shallow, blurred background |
| Red | small, natural focal point |

- Real people only; never AI people
- Observational framing that puts the viewer in the scene
- Soft, diffused natural light; realistic screen or task light for developer/dark-mode shots
- Slightly desaturated, warm-neutral color that does not fight red
- A touch of natural red can create the focal point
- Studio portraits (background removed, wardrobe in hybrid accent colors) for hybrid collages
- Stock only when the library lacks the concept, and it must match
- Don't use tech graphic overlays
- Don't use stock clichés or staged, generic people
- Don't generate people or red fedoras with AI
- Don't use hyper-stylized, lens-flared or oversaturated images
- Don't use cold, sterile or plasticky images

Real examples, to look at on Red Hat's own pages (not for reuse):
- A Red Hatter in a fedora mid-conversation: https://www.redhat.com/en/about/brand/standards/photography
- Associates around a whiteboard: https://www.redhat.com/en/about/brand/standards/photography
- Observational framing with foreground objects: https://www.redhat.com/en/about/brand/standards/photography
- Not this: highly stylized image: https://www.redhat.com/en/about/brand/standards/photography
- Studio portraits for hybrid style: https://www.redhat.com/en/about/brand/standards/hybrid-style-handbook

Sources: https://www.redhat.com/en/about/brand/standards/photography, https://www.redhat.com/en/about/brand/standards/hybrid-style-handbook

## Motion: rules

Motion is described only for hybrid style: collages come alive as base shapes scale and morph to carry scene changes, platform-art backdrops frame video, and elements pop out of frames. Video outros use the animated logo. No curves or durations are public.

- Base shapes are the transition vehicle between scenes
- Carry elements between scenes, changing scale and position
- Fully animated 3D scenes are animation-only
- Focus states disable transitions
- Don't invent easing values as brand fact (none published)

Sources: https://www.redhat.com/en/about/brand/standards/hybrid-style-handbook, https://www.redhat.com/en/about/brand/standards/3d, https://www.redhat.com/en/about/brand/standards/logo, https://ux.redhat.com/foundations/interactions/focus-indicators/

## Interface and layout: rules

Layouts are open and uncluttered with generous white space; elements may overflow and overlap for depth. The design system sets a 12-column grid (2 on phones), 4px-based spacers from 4 to 128px, 64px default section padding, and body text no wider than 789px.

|  |  |
|---|---|
| Columns | 12 desktop, 2 phone |
| Max width | 1376px at >1440 |
| Margins | 32px (md+), 16px (phone) |
| Section padding | 64px default |
| Body width | 789px max |
| Radius | 3px default |

- Grid: xs <576 2 cols, 16px margins/gutters; sm 576 max 544; md 768 max 704, 12 cols, 32px; lg 992 max 928; xl 1200 max 1136; 2xl >1440 max 1376
- Spacers (--rh-space): xs 4, sm 6 (form fields only), md 8, lg 16, xl 24, 2xl 32, 3xl 48, 4xl 64, 5xl 80, 6xl 96, 7xl 128
- Section top/bottom padding 64px by default; content blocks 80px (5xl), subsections 64px (4xl)
- 16px between headings and body and between card title and body; 32px from large headlines or body to CTAs on desktop (24 mobile); 24px from small headlines (16 mobile)
- Body text max 7 desktop columns or 789px
- Borders 1px default, 2px emphasis, 3px current/selected and focus; radius 0 or 3px; pill 64px for badges and hybrid branding
- Focus ring: solid 3px, 3px offset, 3px radius, blue-50 on light / blue-30 on dark

Not published: a single page margin for brand (non-web) layouts.

Sources: https://ux.redhat.com/foundations/grid/, https://ux.redhat.com/foundations/spacing/, https://ux.redhat.com/tokens/space/, https://ux.redhat.com/tokens/border/, https://ux.redhat.com/tokens/breakpoint/, https://ux.redhat.com/foundations/typography/scale-and-rhythm/, https://ux.redhat.com/foundations/interactions/focus-indicators/, https://www.redhat.com/en/about/brand/standards/personality#how-we-look

## Rules: rules

- Red-50 in everything, as pops, on restrained neutral layouts
- Red Hat Display headlines, sentence case, big or bold, often red; Red Hat Text body in black or white
- Logo A by default, "e" clear space, hat always red with black band
- Never change tracking; never all caps; never justify
- Hybrid elements only from the handbook: nine base shapes, listed gradients, one light source
- Real people, never AI-generated
- Don't redraw, recolor or 3D the hat
- Don't use colors or gradients outside the palette
- Don't use red for errors
- Don't translate or split "Red Hat"
- Don't generate logos, hats, icons, people or 3D with AI

Sources: https://www.redhat.com/en/about/brand/standards/logo, https://www.redhat.com/en/about/brand/standards/the-hat, https://www.redhat.com/en/about/brand/standards/color, https://www.redhat.com/en/about/brand/standards/typography, https://www.redhat.com/en/about/brand/standards/hybrid-style-handbook, https://www.redhat.com/en/about/brand/standards/naming-and-trademarks

## Campaigns

### Open Brand Project (2019)

Started in 2018 and launched in 2019 with the Red Hat community: Shadowman retired, the hat simplified into a bold red fedora, and the Red Hat Display, Text and Mono family released open source.

How the system shows: The logo wordmark is drawn from Red Hat Display, and the fonts are free under SIL OFL.
Why it works: The rebrand itself was done the open source way, so the identity proves the claim.
Channels: identity system, fonts, logo. Source: https://www.redhat.com/en/about/brand/standards/history

### Keep your options open

Global brand campaign built from customer research; the tagline stands for freedom to choose and room to grow.

How the system shows: Pairs with the "most reliable partner" pillar and the open ecosystem story.
Why it works: It turns open source into a buyer benefit: choice.
Channels: global brand campaign. Source: https://www.redhat.com/en/about/brand/standards/platform

### Unfakeable Linux (2006)

The day after Oracle announced a Red Hat Enterprise Linux clone at Oracle OpenWorld, Red Hat handed out hundreds of T-shirts reading "Unfakeable Linux".

How the system shows: Brave in a few words, at the right moment.
Why it works: A two-word reply made the rival's launch Red Hat's story.
Channels: event, T-shirts. Source: https://www.redhat.com/en/about/brand/standards/history

### No one innovates alone (brand mantra anthem)

The mantra was introduced to Red Hatters through an anthem video and campaign about the helpful person in the red hat, with felt-textured people.

How the system shows: Hats and felt textures as brand symbols; people at the center.
Why it works: It ties the mantra back to the founding story.
Channels: video, internal campaign. Source: https://www.redhat.com/en/about/brand/standards/platform

## Applications

| Format | What | Source |
|---|---|---|
| web page | redhat.com: Logo A top left on white or gray-95 nav, Display headlines, red CTA buttons, hybrid collages in bands. | https://www.redhat.com/en/about/brand/standards/color |
| favicon / social avatar | The hat alone, red with black band. | https://www.redhat.com/en/about/brand/standards/the-hat |
| business card | The hat beside the person's details on the front. | https://www.redhat.com/en/about/brand/standards/the-hat |
| travel mug | Logo B, stacked with large type, fits the squarer space. | https://www.redhat.com/en/about/brand/standards/logo |
| building signage | Logo A one-color white on a red band atop Red Hat Tower. | https://www.redhat.com/en/about/brand/standards/logo |
| technology icons in marketplaces | Tech icons with optional badges in partner marketplaces and the Ecosystem Catalog. | https://www.redhat.com/en/about/brand/standards/icons/technology-icons |
| presentation slides | Icons paired with short text; mini collages beside copy. | https://www.redhat.com/en/about/brand/standards/icons/standard-icons |
| swag | Hat lapel pins and keychains; hat pattern T-shirts; icon-pattern mugs. | https://www.redhat.com/en/about/brand/standards/the-hat |
| event fedoras | Special event fedoras with the logo on the band, given to partners, customers and contributors. | https://www.redhat.com/en/about/brand/standards/the-hat |

## By format

How our engine applies Red Hat's system to each format. Our recipe from their rules, not something Red Hat publishes. Level = how far toward hybrid style's expressive end (0 essential only, 5 full collage, accents and gradients). Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | Build it the way redhat.com/en is built (kit.spec.page, homepage voice): white sticky 82px masthead with Logo A top left; a full-bleed black hero with a 64px Red Hat Display Regular white headline, 20px lead and one red #EE0000 pill CTA (64px radius, 16/32 padding, Display 16px 700); white bands of 1px #C7C7C7 16px-radius cards; one sourced stat behind an 8px red left bar; a near-black #151515 band with a purple-70 gradient and #4D4D4D-bordered dark cards; light-grey #F2F2F2 pre-footer; #1F1F1F footer. Headlines sentence case in #151515 or white, never red; links #0066CC (#92C5F9 on dark); red only in pills, the accent bar, the active tab and the hat | which sections and how many cards; the hero image or collage; the guide's campaign voice (red headline or key word, hybrid collage with gradient strokes, 3px buttons) for campaign and event pages that are not homepage-style |
| Deck | 3 | Logo or hat present, sentence-case Display headlines, red headlines or key words, icons with short text, generous margins | expressive dark slides, mini collages, platform art backgrounds |
| Proposal page | 1 | White ground, black body, red headline, sourced numbers only, full product names with (R) on first use | one mini collage or icon set |
| Ad | 4 | Clear focal point, red-50 present, Logo A, short sentence-case headline | platform art, portraits, accent colors, gradient strokes |
| Social post | 4 | Hybrid collage with one light source, red-50, logo or product logo | purple-80 or black ground, accent colors |
| Email | 1 | Logo A in a slim header, white ground, black text, one red CTA, blue links | small header collage |
| Swag / signage | 2 | Lockup that fits the space (B for squares, C for large signage), hat always red with black band or one-color | hat artwork in core colors |
| Product UI | 0 | PatternFly/RHDS tokens, UI icons, interaction-blue, status colors from the information palette | none |

## Checks before anything ships

- **Logo hidden**: Cover the hat. It should still read as Red Hat: pure red as a pop on a quiet ground, Red Hat Display in sentence case, real people or hat-shaped collages.
- **Red check**: Is red-50 present, and is it a pop rather than a flood? Is any red used to mean something bad? Fix both.
- **Swap test**: Put another enterprise vendor's logo on it. If the plain sentence-case type, the single red signal and the specific, sourced copy still fit, it is generic: go back.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Red Hat's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Color proportions or ratios across a layout: not published (only "pops" of red, 1-2 secondary families, max 2 accent colors, and 50:50 inside minis and tech icons).
- Minimum size of logo lockups A, B and C: not published (only the hat alone: 16px / 0.22 in / 5.5 mm).
- Official logo files: the download is login-only (Brand Portal); this book uses the logo page images and redhat.com's site logo files.
- Exact gradient specs (angles, sizes): login-only; stops here are read from the guide's own SVG samples. The color page's gradient image (fill-10/20/50, stroke-4/20/30) predates the March 2026 handbook sets and differs slightly; follow the handbook.
- CMYK and Pantone values for most tints: login-only; only the anchors (red-50, white, black, orange-40, yellow-30, teal-50, purple-50, success-green-50, danger-orange-50, interaction-blue-50) are public.
- Motion easing curves and durations: not published.
- Button height, size variants and states: not published by the brand guide beyond the 2:1 CTA padding (RHDS gives a 3px default radius); the homepage's 64px-radius pills, 59px height and hover states are observed 2026-10-30
- Company values and the full value proposition and brand position statements: login-only (The Source).
- Corporate style guide (spelling, numbers, dates, word list): login-only.
- Current mission statement: not published; the 2009 statement is quoted on the history page.
- Spacing range conflict: the spacing page says spacers run 4 to 80px, while the space tokens go to 128px (6xl 96, 7xl 128).
- Line height: the brand guide allows 1.1-1.5 (1.2-1.5 for most text); RHDS web sets a 1.3 minimum except expressive headings at 1.1.
- Line length: brand guide 20-100 characters; RHDS web 30-120 characters and 789px max.
- Typography page alt text says white passes on purple-60 but the image shows purple-80.

Logos and reference images belong to Red Hat. Look at them on Red Hat's own pages; don't reuse them.