---
version: alpha
name: PatternFly Enterprise Console Interface
description: "An open enterprise product-console interface inspired by PatternFly and Red Hat product UX. It uses semantic design tokens, Red Hat type roles, practical neutral surfaces, restrained blue action semantics, selective red brand and danger voltage, masthead navigation, side rails, dense tables, alerts, drawers, wizards, severity labels, accessibility hooks, and testable UI structure for enterprise software."

colors:
  primary: "#0066cc"
  primary-hover: "#004080"
  on-primary: "#ffffff"
  brand-red: "#ee0000"
  canvas: "#f0f0f0"
  surface: "#ffffff"
  surface-card: "#ffffff"
  surface-soft: "#f5f5f5"
  surface-inset: "#ededed"
  surface-selected: "#e7f1fa"
  ink: "#151515"
  body: "#3d3d3d"
  muted: "#6a6e73"
  subtle: "#8a8d90"
  hairline: "#d2d2d2"
  hairline-strong: "#b8bbbe"
  focus: "#0066cc"
  success: "#3e8635"
  success-surface: "#f3faf2"
  warning: "#f0ab00"
  warning-surface: "#fff7df"
  danger: "#c9190b"
  danger-surface: "#faeae8"
  info: "#2b9af3"
  info-surface: "#e7f1fa"
  inverse-canvas: "#151515"
  inverse-surface: "#1f1f1f"
  inverse-card: "#262626"
  inverse-ink: "#f0f0f0"
  inverse-body: "#d2d2d2"
  inverse-hairline: "#4f5255"

typography:
  heading-lg:
    fontFamily: "Red Hat Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0
  heading-md:
    fontFamily: "Red Hat Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: 0
  heading-sm:
    fontFamily: "Red Hat Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: 0
  body:
    fontFamily: "Red Hat Text, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  button:
    fontFamily: "Red Hat Text, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0
  body-sm:
    fontFamily: "Red Hat Text, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0
  label:
    fontFamily: "Red Hat Text, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: 0
  mono:
    fontFamily: "Red Hat Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  pill: 9999px

spacing:
  base: 8px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 64px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 7px 14px
  button-secondary:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 7px 14px
    borderColor: "{colors.primary}"
  container:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.body}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 16px
    borderColor: "{colors.hairline}"
  alert:
    backgroundColor: "{colors.info-surface}"
    textColor: "{colors.body}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.info}"
  table-row:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.body}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.hairline}"
  severity-label:
    backgroundColor: "{colors.danger-surface}"
    textColor: "{colors.danger}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 2px 8px

layout:
  shell: "Enterprise application shell with masthead, product switcher, side navigation, breadcrumb, page header, toolbar, table, drawer, alert region, and wizard or review step."
  grid: "Use a 240px side rail on desktop and a full-width main area for high-density tables. Drawers attach to the right for contextual investigation."
  density: "Use compact but readable 14px operating surfaces. Keep row state, scope, permissions, and remediation controls in the same viewport."
  interaction: "Favor progressive disclosure, filterable tables, expandable detail, review screens, inline validation, visible focus, and stable test identifiers."

guidance:
  do:
    - "Use semantic tokens and component variables before custom hex values."
    - "Show product scope, cluster or tenant context, permissions, severity, and next action in the first viewport."
    - "Use tables, data lists, alerts, wizards, drawers, and empty states as the core enterprise grammar."
    - "Pair every severity color with text, icon, affected object, and recovery path."
    - "Keep keyboard focus, high contrast, reduced motion, and OUIA-style test hooks in the implementation plan."
  dont:
    - "Do not copy Red Hat product chrome, logos, product names, or branded illustrations into unrelated products."
    - "Do not use red as decoration. Reserve it for brand identity moments, danger, and critical severity."
    - "Do not hard-code palette tokens into components when a semantic token can carry the role."
    - "Do not replace comparison-heavy enterprise resources with decorative card dashboards."
    - "Do not hide permissions, validation, or destructive scope in toast-only feedback."

caseStudy:
  source: "PatternFly design foundations and React component documentation"
  urls:
    - "https://www.patternfly.org/get-started/about-patternfly/"
    - "https://www.patternfly.org/design-foundations/colors/"
    - "https://www.patternfly.org/design-foundations/theming/"
    - "https://www.patternfly.org/design-foundations/spacers/"
    - "https://www.patternfly.org/design-foundations/typography/"
    - "https://www.patternfly.org/get-started/develop/"
    - "https://github.com/patternfly/patternfly-react/blob/main/LICENSE"
  analysis: "PatternFly positions itself as an open source enterprise design system used for robust Red Hat product experiences. Its public guidance emphasizes semantic design tokens, token-based theming, rem-based spacing, Red Hat Display/Text/Mono type roles, accessible React and HTML libraries, supported React versions, OUIA testing, and MIT-licensed code. The reusable lesson is not a red skin: it is a disciplined enterprise interface contract where scope, state, action, accessibility, and testability are visible."
---

# PatternFly Enterprise Console Interface

Use this system for enterprise software, hybrid cloud consoles, Kubernetes and platform operations, identity and access management, compliance review, automation jobs, service catalogs, developer portals, support tools, and internal admin products that need clear scope, high trust, and reliable recovery.

The posture is open, practical, and auditable. It should feel like a serious enterprise product rather than a SaaS marketing page. The first viewport needs a real object of work: cluster, tenant, job, policy, vulnerability, access request, service, or deployment.

## Overview

PatternFly Enterprise Console converts the reusable grammar of PatternFly into an Interface resource. It centers masthead navigation, product context, side navigation, page titles, toolbars, filterable tables, alert regions, drawers, wizards, status labels, and visible focus states.

The strongest design idea is explicit enterprise scope. Users need to know which product area, tenant, cluster, role, or policy boundary they are changing before they act. The interface should make that scope hard to miss.

## Colors

### Brand & Accent

Use `primary` #0066cc for links, primary actions, selection, and focus. Use `brand-red` #ee0000 sparingly as Red Hat-like voltage or critical brand signal. Red should never become normal decoration.

### Surface

Use `canvas` #f0f0f0 for the application shell, `surface-card` #ffffff for tables and panels, `surface-soft` #f5f5f5 for headers and grouped regions, and `surface-inset` #ededed for nested configuration, code-like blocks, and read-only scopes.

### Text

Use `ink` #151515 for page titles and key labels, `body` #3d3d3d for reading and table content, `muted` #6a6e73 for metadata, and `subtle` #8a8d90 for timestamps and low-priority hints.

### Hairlines & Borders

Use `hairline` #d2d2d2 for row and container separation. Use `hairline-strong` #b8bbbe for inputs, sticky dividers, selected rows, and high-density toolbars. Favor structural borders over decorative shadows.

### Semantic

Use success, warning, danger, and info tokens only for real system state. Severity labels must include text, affected resource, and a recommended path. Do not rely on color alone.

## Typography

### Font Family

Use Red Hat Display for headings, Red Hat Text for body and controls, and Red Hat Mono for IDs, code, logs, and tabular numbers. If those fonts are unavailable, Inter and system UI are acceptable substitutes.

### Hierarchy

PatternFly-like enterprise surfaces are compact. Use 24px for the main page heading, 20px for section headings, 18px for subheads, 14px for body and tables, and 12px for metadata and labels.

### Principles

Prefer concrete operational language: Cluster, Namespace, Policy, Owner, Severity, Last scan, Permission, Job status, Review, Remediate, Roll back. Avoid soft marketing copy inside task flows.

### Note on Font Substitutes

When Red Hat fonts are not bundled, preserve the line heights, 14px table rhythm, and tabular-number behavior. The product should remain readable before it is brand-correct.

## Layout

### Spacing System

Use a 4/8/16/24/32/48/64/80 rhythm. The public PatternFly spacer scale is rem-based with a 16px root; this Interface keeps the same practical stepping while exposing `base` as 8px for app layout composition.

### Grid & Container

Desktop uses a masthead, 240px side navigation, and a main content area. The main area should support full-width tables and right-side drawers. Avoid narrow centered layouts when comparison, filtering, or auditing is the core task.

### Whitespace Philosophy

Whitespace separates decision boundaries: filters, bulk actions, table rows, alerts, details, and confirmation steps. Do not add ornamental empty space that pushes state and scope below the fold.

## Elevation & Depth

Depth is mostly structural: masthead, sticky table header, side navigation, drawer, modal, wizard, popover, and alert region. Use subtle elevation only for overlays that must float above dense operational data.

Keep shadows restrained. A PatternFly-like interface should read as robust and utilitarian, not glossy.

## Shapes

Use small radii: 2px to 6px for most controls, 8px for larger panels, and pill shapes only for status labels, filter chips, and compact tags. Avoid oversized rounded cards in enterprise workflows.

## Components

### Buttons

Primary actions use blue and appear only where a user can safely understand scope. Secondary buttons can use blue text with borders. Destructive actions use danger styling, confirmation, and explicit affected-object copy.

### Cards & Containers

Use panels for grouping configuration, status, and summaries. Use cards for service catalog tiles or compact summaries, but resource comparison belongs in tables or data lists.

### Inputs & Forms

Every input needs a visible label, helper text when needed, validation state, and recovery copy. Complex setup flows should use wizard steps with review screens and a clear exit strategy.

### Navigation

Use masthead navigation for product-level context, side navigation for feature families, breadcrumbs for location, and page tabs only when they represent peer views of the same object.

### Signature Components

The signature module is a cluster or tenant inventory table with severity labels, scoped toolbar filters, inline alert, and a remediation drawer. A second signature module is a multi-step wizard for upgrade, access, or compliance workflows.

## Do's and Don'ts

Do show enterprise scope early: product, tenant, cluster, role, environment, and object count.

Do use semantic tokens, PatternFly-style components, accessible focus, and stable test identifiers.

Do keep alerts near the affected table, form, or workflow step.

Do provide clear empty, loading, permission-blocked, error, and partial-success states.

Do not clone Red Hat branding, product navigation, official marks, or product-specific illustrations.

Do not use red as a general accent. Keep it for danger, critical severity, or rare brand moments.

Do not hide destructive scope, validation, or permission failures behind transient notifications.

Do not make high-density enterprise software feel like a consumer landing page.

## Responsive Behavior

### Breakpoints

At 1200px and up, keep masthead, side rail, main table, and drawer available. Below 1024px, collapse side navigation above content or into a disclosure. Below 720px, prioritize object identity, severity, owner, and next action.

### Touch Targets

Interactive targets should reach at least 40px on touch surfaces. Dense desktop rows can be smaller only when keyboard and pointer use are primary and focus remains visible.

### Collapsing Strategy

Do not turn comparison tables into unrelated cards. Keep priority columns, add horizontal scroll when necessary, and move drawer content below the table on small screens.

### Image Behavior

This system should not depend on decorative imagery. If product illustrations appear, they must clarify onboarding or empty states rather than replace operating data.

## Iteration Guide

1. Name the operating object and scope: cluster, tenant, policy, job, or access request.
2. Choose the main work surface: table, data list, wizard, drawer, service catalog, or form.
3. Define severity and state labels before styling color.
4. Map semantic tokens to action, surface, text, border, focus, and state roles.
5. Add keyboard focus, high-contrast behavior, reduced-motion behavior, and test identifiers to component acceptance criteria.
6. Verify empty, loading, permission-blocked, error, partial-success, and success states.

## Known Gaps

This resource abstracts from public PatternFly documentation and does not claim to reproduce any specific Red Hat product surface. Exact Red Hat product navigation, internal UXD Hub guidance, proprietary assets, and product-specific brand rules are intentionally excluded.

Some token values are pragmatic CSS approximations for the Interface library. When implementing directly with PatternFly, prefer official PatternFly CSS variables, React components, and token APIs over copying these hex values into application code.