PatternFly

# PatternFly — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Red Hat. "PatternFly" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** PatternFly
**Owner:** Red Hat
**Official documentation:** https://www.patternfly.org/
**Visual character:** Open-source enterprise in Red Hat's own type family: hybrid-cloud blues, console density, and tokens versioned like software.

---

## Summary

Open-source enterprise design system battle-tested across the Red Hat product portfolio.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Primary Blue | `#0066cc` | `--pf-t-color-blue-50` | Primary actions and links |
| Text | `#151515` | `--pf-t-global-text-color-regular` | Primary text |
| Subtle Text | `#4d4d4d` | `--pf-t-global-text-color-subtle` | Secondary text |
| White | `#ffffff` | `--pf-t-global-background-color-primary` | Surfaces |
| Gray 10 | `#f2f2f2` | `--pf-t-color-gray-10` | Subtle background |
| Border Gray | `#c7c7c7` | `--pf-t-global-border-color-default` | Borders |
| Red Hat Red / Danger | `#b1380b` | `--pf-t-global-color-status-danger-default` | Errors |
| Success Green | `#3d7317` | `--pf-t-global-color-status-success-default` | Success |
| Warning Gold | `#dca614` | `--pf-t-global-color-status-warning-default` | Warnings |

## Typography

- **Display:** Red Hat Display — weights 400, 500, 700 — `'Red Hat Display', 'Overpass', helvetica, arial, sans-serif`
- **Body:** Red Hat Text — weights 400, 500 — `'Red Hat Text', 'Overpass', helvetica, arial, sans-serif`
- **Mono:** Red Hat Mono — weights 400 — `'Red Hat Mono', 'Liberation Mono', consolas, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-2xl | `24px` | `31px` |
| heading-xl | `20px` | `26px` |
| heading-lg | `18px` | `23px` |
| body | `14px` | `21px` |
| body-sm | `12px` | `18px` |

## Spacing

Base unit: `16px (md)`

Scale: `4px` · `8px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `6px` |
| medium | `16px` |
| pill | `999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| sm | `0 1px 2px 0 rgba(41,41,41,0.2)` |
| md | `0 4px 8px 0 rgba(41,41,41,0.16)` |

## Motion

| Name | Value |
| --- | --- |
| default | `250ms ease-in-out` |

## Quick start (CSS)

```css
/* PatternFly — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://www.patternfly.org/ */

:root {
  /* Color */
  --pf-t-color-blue-50: #0066cc; /* Primary actions and links */
  --pf-t-global-text-color-regular: #151515; /* Primary text */
  --pf-t-global-text-color-subtle: #4d4d4d; /* Secondary text */
  --pf-t-global-background-color-primary: #ffffff; /* Surfaces */
  --pf-t-color-gray-10: #f2f2f2; /* Subtle background */
  --pf-t-global-border-color-default: #c7c7c7; /* Borders */
  --pf-t-global-color-status-danger-default: #b1380b; /* Errors */
  --pf-t-global-color-status-success-default: #3d7317; /* Success */
  --pf-t-global-color-status-warning-default: #dca614; /* Warnings */

  /* Typography */
  --font-display: 'Red Hat Display', 'Overpass', helvetica, arial, sans-serif;
  --font-body: 'Red Hat Text', 'Overpass', helvetica, arial, sans-serif;
  --font-mono: 'Red Hat Mono', 'Liberation Mono', consolas, monospace;

  /* Type scale */
  --text-heading-2xl: 24px /* line-height 31px */;
  --text-heading-xl: 20px /* line-height 26px */;
  --text-heading-lg: 18px /* line-height 23px */;
  --text-body: 14px /* line-height 21px */;
  --text-body-sm: 12px /* line-height 18px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* Radius */
  --radius-small: 6px;
  --radius-medium: 16px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px 0 rgba(41,41,41,0.2);
  --shadow-md: 0 4px 8px 0 rgba(41,41,41,0.16);

  /* Motion */
  --motion-default: 250ms ease-in-out;
}
```

## Origin

PatternFly began at Red Hat in 2014 as the design system for the OpenShift web console, then expanded to cover the broader Red Hat product portfolio (OpenShift, Ansible, RHEL web console, OpenStack). Its current iteration (PatternFly 5) is open-source on GitHub with a permissive license and continuous public roadmap.

## Governance

Red Hat's central design-systems team owns PatternFly; community contributions accepted through an extensive RFC process. The roadmap is public, the conversations happen in the open, and major version migrations are accompanied by codemods and migration guides.

## Known for

- Console-grade complexity — the system is engineered for the kind of multi-pane, dense, expert-user surfaces that Kubernetes management demands.
- Long-tail component library — wizards, list views, treetables, log viewers, drawer patterns. The components most systems duck because they're hard.
- Documented accessibility expectations on every component, including keyboard interaction tables for complex widgets.

## Underrated

- The token system supports six theme variants out of the box, including high-contrast and color-blind-safe accessible palettes.
- Their charts library (PatternFly Charts) is a serious data-viz layer designed specifically for time-series infrastructure metrics.

## Watch out for

- Visual identity is Red-Hat-flavored and reads as enterprise-y; consumer products will need significant theming.
- The breadth of components is enormous; full adoption is a real commitment, and most products use a small subset.

## Components worth studying

- **Wizard** — Multi-step configuration flow with validation, review step, and async submit — the reference for complex enterprise setup flows.
- **Drawer** — Slide-in side panel for detail views, contextual editing, and async results — Kubernetes management grade.
- **Log Viewer** — Streaming log surface with search, filter, line-wrap, and download — the canonical infrastructure log UI.

## When to choose PatternFly

Pick PatternFly if you're building enterprise console-grade tooling — Kubernetes, infrastructure management, complex dashboards. The breadth and depth are unmatched in open source. Don't pick it for consumer or content-led products.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of PatternFly by Red Hat — Open-source enterprise design system battle-tested across the Red Hat product portfolio. Character: Open-source enterprise in Red Hat's own type family: hybrid-cloud blues, console density, and tokens versioned like software. Use a primary colour near #0066cc, the typeface "Red Hat Text" (or a close equivalent), corner radius around 6px, a spacing rhythm on a 16px (md) base. Lean into what it's known for: Console-grade complexity — the system is engineered for the kind of multi-pane, dense, expert-user surfaces that Kubernetes management demands. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [PatternFly](https://www.patternfly.org/)
- [PatternFly on GitHub](https://github.com/patternfly/patternfly)
- [PatternFly Charts](https://www.patternfly.org/charts/about)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/redhat-patternfly) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._