PatternFly
PatternFly / 2012– / Style / Platform Screen Languages
Red Hat's open-source screen language for enterprise products keeps complex infrastructure manageable through dense navigation, data views and tightly controlled status color.



At a glance
Visual cues
- 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
Use this style
Take the compact brief into a project or hand the structured version to an AI tool.
Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats
Dictionary entry
- Type
- Keep headings, body and table labels to a small hierarchy; distinguish values and code with monospace.
- Composition
- Separate dark shell, left navigation, work surface and an on-demand detail pane.
- Material
- Use white and pale gray broadly, blue for action and saturated color only for alerts and status.
- Caution
- Packing cards and tables together is not enough. Make current location and the priority of abnormal states obvious first.
- Further study
- PatternFly design foundations / Enterprise navigation and data views / Red Hat product applications
Related entries
- Carbon Design System (Carbon Design System)Same Platform Screen Languages lineage.Compare PatternFly and Carbon Design System
- SAP Fiori (SAP Fiori)Same Platform Screen Languages lineage.Compare PatternFly and SAP Fiori
More from Platform Screen Languages
Continue through styles in the same Platform Screen Languages family, prioritised by shared effects.
- Adwaita (アドワイタ)Shared effects: Technique / Calm / Trust.
- GOV.UK Design System (GOV.UK デザインシステム)Shared effects: Trust / Calm / Technique.
- Breeze (ブリーズ)Shared effects: Technique / Calm / Trust.
Browse all Platform Screen Languages entries
Cite this entry
The dictionary is meant to be linked to. Take whichever form fits where you are writing.
- Link
- https://indexstyle.org/styles/patternfly
- Markdown
- [PatternFly — IndexStyle](https://indexstyle.org/styles/patternfly)
- HTML
- <a href="https://indexstyle.org/styles/patternfly">PatternFly — IndexStyle</a>