# PatternFly (PatternFly)

> Red Hat's open-source screen language for enterprise products keeps complex infrastructure manageable through dense navigation, data views and tightly controlled status color.

- IndexStyle No.566 — https://indexstyle.org/styles/patternfly
- Kind: Style · Family: Platform Screen Languages · Era: 2012–
- Mood: Technique, Trust, Calm
- What this family collects: Design languages written down for a platform and published, from the vendors that shipped an operating system to the governments that had no reason to hide rules paid for with public money, every one of them recognisable at a glance.

## Defining characteristics

- Dark masthead and left navigation
- Dense tables and forms on white or pale-gray work surfaces
- Blue for primary action and red, orange or green for status
- List, detail and action shown in coordinated panes

## Best used for

- Administration products for cloud, containers and networks
- Giving a suite of enterprise products one density, navigation and status language

## Composition recipe

- Typography & lettering: Keep headings, body and table labels to a small hierarchy; distinguish values and code with monospace.
- Layout & structure: Separate dark shell, left navigation, work surface and an on-demand detail pane.
- Material & texture: Use white and pale gray broadly, blue for action and saturated color only for alerts and status.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #FFFFFF
- The colour it is remembered by: #0066CC
- Text and outlines: #151515

## What to avoid

Packing cards and tables together is not enough. Make current location and the priority of abnormal states obvious first.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: Dark masthead and left navigation
- [ ] Visible in the piece: Dense tables and forms on white or pale-gray work surfaces
- [ ] Visible in the piece: Blue for primary action and red, orange or green for status
- [ ] Visible in the piece: List, detail and action shown in coordinated panes
- [ ] The layout follows: Separate dark shell, left navigation, work surface and an on-demand detail pane.
- [ ] The lettering follows: Keep headings, body and table labels to a small hierarchy; distinguish values and code with monospace.
- [ ] The material and surface follow: Use white and pale gray broadly, blue for action and saturated color only for alerts and status.
- [ ] The colour relation holds: #FFFFFF as ground, #0066CC carrying the style, #151515 for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Carbon Design System (Carbon Design System)** — IBM's system for data-heavy enterprise products, combining a strict grid, IBM Plex type and compact components so complex work remains legible. → https://indexstyle.org/styles/carbon-design-system
- **SAP Fiori (SAP Fiori)** — SAP's role-based design language reduces enterprise processes to the information and actions each person needs, then carries them consistently across devices. → https://indexstyle.org/styles/sap-fiori

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=patternfly+carbon-design-system

## Further study

- PatternFly design foundations
- Enterprise navigation and data views
- Red Hat product applications

## Reference works

- PatternFly — Design Foundations — https://www.patternfly.org/design-foundations/about/

## AI interpretation

An AI-generated interpretation image exists for browsing convenience only — it is not a reference work: https://indexstyle.org/ai/patternfly.jpg

## Source of record

- PatternFly — Design Foundations — https://www.patternfly.org/design-foundations/about/

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/patternfly
- Image-generation prompt (legally clean): https://indexstyle.org/styles/patternfly/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)