All typography styles

h1: Cras nec nibh laoreet aliquam sagittis risus

h2: Cras nec nibh laoreet aliquam sagittis risus

h3: Cras nec nibh laoreet aliquam sagittis risus

h4: Cras nec nibh laoreet aliquam sagittis risus

h5: Cras nec nibh laoreet aliquam sagittis risus

h6: Cras nec nibh laoreet aliquam sagittis risus

p: Morbi ullamcorper enim magna, sit amet sagittis lectus fringilla ac. Morbi congue elit id finibus ultricies. Duis euismod orci in eros consequat ullamcorper.

Items in an ordered list
Nam nec nisl mauris
Nested list items
Maecenas dictum consectetur blandit.

Items in an unordered list
Nam nec nisl mauris
Nested list items
Maecenas dictum consectetur blandit.

pfe-headline-xxl: (48px / 35px) We’re the world’s leading provider of open source solutions, where the best ideas win.

Lorem ipsum dolor sit amet, exerci praesent pericula eam an, solet theophrastus te ius. Eruditi dolorum an pri. Sit tempor melius ut.

pfe-headline-xl: (40px / 29px) We’re the world’s leading provider of open source solutions, where the best ideas win.

Lorem ipsum dolor sit amet, exerci praesent pericula eam an, solet theophrastus te ius. Eruditi dolorum an pri. Sit tempor melius ut.

pfe-headline-alpha: (36px / 26px) We’re the world’s leading provider of open source solutions, where the best ideas win.

Lorem ipsum dolor sit amet, exerci praesent pericula eam an, solet theophrastus te ius. Eruditi dolorum an pri. Sit tempor melius ut.

pfe-headline-beta: (28px / 24px) We’re the world’s leading provider of open source solutions, where the best ideas win.

Lorem ipsum dolor sit amet, exerci praesent pericula eam an, solet theophrastus te ius. Eruditi dolorum an pri. Sit tempor melius ut.

pfe-headline-gamma: (24px/ 20px) We’re the world’s leading provider of open source solutions, where the best ideas win.

Lorem ipsum dolor sit amet, exerci praesent pericula eam an, solet theophrastus te ius. Eruditi dolorum an pri. Sit tempor melius ut.

pfe-headline-delta: (20px) We’re the world’s leading provider of open source solutions, where the best ideas win.

Lorem ipsum dolor sit amet, exerci praesent pericula eam an, solet theophrastus te ius. Eruditi dolorum an pri. Sit tempor melius ut.

pfe-headline-epsilon: (18px) We’re the world’s leading provider of open source solutions, where the best ideas win.

Lorem ipsum dolor sit amet, exerci praesent pericula eam an, solet theophrastus te ius. Eruditi dolorum an pri. Sit tempor melius ut.

pfe-headline-zeta: (16px) We’re the world’s leading provider of open source solutions, where the best ideas win.

Lorem ipsum dolor sit amet, exerci praesent pericula eam an, solet theophrastus te ius. Eruditi dolorum an pri. Sit tempor melius ut.

pfe-text-lg: At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

pfe-text: We’re the world’s leading provider of open source solutions, where the best ideas win.

pfe-text-sm: We’re the world’s leading provider of open source solutions, where the best ideas win.

pfe-text-xs: We’re the world’s leading provider of open source solutions, where the best ideas win.

PatternFly Elements

This a library of web components made by Red Hatters, make use of these custom properties.

If you use these theme on the same site or application as PFE web components, the web components will utilize the CSS variables. The cards below are <pfe-card>.

Surface Colors

Lightest surface

This is the lightest pfe-card and a link.

Call-to-action

Lighter surface

This is the light pfe-card and a link.

Call-to-action

Base surface

This is the dark pfe-card and a link.

Call-to-action

Darker surface

This is the dark pfe-card and a link.

Call-to-action

Darkest surface

This is the darkest pfe-card and a link.

Call-to-action

Complement surface

This is the complement pfe-card and a link.

Call-to-action

Accent surface

This is the accent pfe-card and a link.

Call-to-action

Themes applied to <pfe-cta> manually

No pfe-color attribute

pfe-color: base

pfe-color: complement

Secondary CTA

pfe-color: accent

CTAs dynamically themed

Lightest

Lighter

Base

Darker

Darkest

Complement

Accent theme

Custom Properties: Colors

Text

--pfe-theme--color--text

--pfe-theme--color--text--on-dark

--pfe-theme--color--text--on-saturated

Links

--pfe-theme--color--link

--pfe-theme--color--link--visited

--pfe-theme--color--link--hover

--pfe-theme--color--link--focus

--pfe-theme--color--link--on-dark

--pfe-theme--color--link--on-dark--hover

--pfe-theme--color--link--on-dark--visited

--pfe-theme--color--link--focus--on-dark

--pfe-theme--color--link--on-saturated

--pfe-theme--color--link--visited--on-saturated

--pfe-theme--color--link--hover--on-saturated

--pfe-theme--color--link--on-saturated--focus

UI items (buttons, flags, etc.)

--pfe-theme--color--ui-disabled

--pfe-theme--color--ui-disabled--text

--pfe-theme--color--ui-disabled--hover

--pfe-theme--color--ui-disabled--text--hover

Background:
--pfe-theme--color--ui-base

Text:

--pfe-theme--color--ui-base--text

--pfe-theme--color--ui-base--text--hover

Background:
--pfe-theme--color--ui-accent

Text:

--pfe-theme--color--ui-accent--text

--pfe-theme--color--ui-accent--text--hover

Background:
--pfe-theme--color--ui-complement

Text:

--pfe-theme--color--ui-complement--text

--pfe-theme--color--ui-complement--text--hover

Background:
--pfe-theme--color--ui-base--hover

Text:

--pfe-theme--color--ui-base--text

--pfe-theme--color--ui-base--text--hover

Background:
--pfe-theme--color--ui-accent--hover

Text:

--pfe-theme--color--ui-accent--text

--pfe-theme--color--ui-accent--text--hover

Background:
--pfe-theme--color--ui-complement--hover

Text:

--pfe-theme--color--ui-complement--text

--pfe-theme--color--ui-complement--text--hover

Surface (bands, cards, etc.)

Background:
--pfe-theme--color--surface--lightest

Text:

--pfe-theme--color--surface--lightest--text

--pfe-theme--color--surface--lightest--link

--pfe-theme--color--surface--lightest--link--visited

--pfe-theme--color--surface--lightest--link--hover

--pfe-theme--color--surface--lightest--link--focus

Background:
--pfe-theme--color--surface--lighter

Text:

--pfe-theme--color--surface--lighter--text

--pfe-theme--color--surface--lighter--link

--pfe-theme--color--surface--lighter--link--visited

--pfe-theme--color--surface--lighter--link--hover

--pfe-theme--color--surface--lighter--link--focus

Background:
--pfe-theme--color--surface--base

Text:

--pfe-theme--color--surface--base--text

--pfe-theme--color--surface--base--link

--pfe-theme--color--surface--base--link--visited

--pfe-theme--color--surface--base--link--hover

--pfe-theme--color--surface--base--link--focus

Background:
--pfe-theme--color--surface--darker

Text:

--pfe-theme--color--surface--darker--text

--pfe-theme--color--surface--darker--link

--pfe-theme--color--surface--darker--link--visited

--pfe-theme--color--surface--darker--link--hover

--pfe-theme--color--surface--darker--link--focus

Background:
--pfe-theme--color--surface--darkest

Text:

--pfe-theme--color--surface--darkest--text

--pfe-theme--color--surface--darkest--link

--pfe-theme--color--surface--darkest--link--visited

--pfe-theme--color--surface--darkest--link--hover

--pfe-theme--color--surface--darkest--link--focus

Background:
--pfe-theme--color--surface--complement

Text:

--pfe-theme--color--surface--complement--text

--pfe-theme--color--surface--complement--link

--pfe-theme--color--surface--complement--link--visited

--pfe-theme--color--surface--complement--link--hover

--pfe-theme--color--surface--complement--link--focus

Background:
--pfe-theme--color--surface--accent

Text:

--pfe-theme--color--surface--accent--text

--pfe-theme--color--surface--accent--link

--pfe-theme--color--surface--accent--link--visited

--pfe-theme--color--surface--accent--link--hover

--pfe-theme--color--surface--accent--link--focus

Borders

UI Borders

Example border color: blue

--pfe-theme--ui--border-width

--pfe-theme--ui--border-style

--pfe-theme--ui--border-radius

Surface Border (base))

--pfe-theme--surface--border-width

--pfe-theme--surface--border-style

--pfe-theme--surface--border-radius

--pfe-theme--surface--border

Surface Border lightest

--pfe-theme--surface--border-width

--pfe-theme--surface--border-style

--pfe-theme--surface--border-radius

--pfe-theme--surface--border-lightest

Surface Border darkest

--pfe-theme--surface--border-width

--pfe-theme--surface--border-style

--pfe-theme--surface--border-radius

--pfe-theme--surface--border-darkest

Custom Properties: logos

Favicon

PNG

SVG

PNG: on-dark

SVG: on-dark

Platforms

Tools

Try, buy, & sell

Communicate

About Red Hat

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.

© 2026 Red Hat