Unified Design Kit

This repo contains a design kit shared by Red Hat’s digital marketing, customer platform, and product design teams.

Our goal is to unify Red Hat’s digital experiences with a shared design system, informed by Red Hat brand standards.

To use

1. Clone the repo to access the .xd file.
2. Open the Adobe XD file and use as you need.

To contribute

View the Issues tab, contribute design work IN A SEPARATE .xd file, create a pull request for our team to review, and we'll add to the master kit once approved.

Component/layout list

• Accordion
• Alert
• Band
• Button
• Card
• Collapse / Expand
• Call to action
• Filter list
• Form
• Form inputs
• Modal
• Navigation
• Search
• Select box
• Tabs

Latest release notes

v1.2.0

Added

• PatternFly's 8px spacers added to all components
• Brick link (icon on left)
• Brick link (dark theme)
• Cookie banner (light and dark themes)
• Filter box (with interaction states)
• Fixed bottom banner (small and full-width sizes)
• Form (light theme)
• Form input groups (light theme)
• Generic band (phone)
• Logo bar (light and dark themes)
• Quote band (centered and dark themes)
• Search bar (dark theme)
• Search combo (light and dark themes)
• Skip navigation button
• Video modal (desktop and phone)

Changed

• Global: All components are 100% responsive
• Global: All lorem ipsum text layers changed to what character style is being used
• Accordions: Extra width added to bounding box when applying a drop shadow fixed
• Attribution: Text style changed from all caps to sentence case
• Expandable: Extra width added to bounding box when applying a drop shadow fixed
• Grids: Tablet and phone grids tweaked to align more accurately with code repos
• Modal: Extra width added to bounding box when applying a drop shadow fixed
• Modal: Close button padding on tablet and phone tweaked to align better to PatternFly
• Nav 2 bar: Section menu text size increased to 16px for better readability
• Play button: All components are now using the same play button size

Deprecated

• Non-PatternFly 8px scale spacers removed
• All text components removed because we have character styles
• All small CTAs removed because we didn’t need them after all
• Huge play button removed because it was too big
• Some cards not in use anymore removed or merged into other cards
• Some search bar sizes removed because desktop and phone are sufficient
• Video thumbnail for phone removed because desktop is sufficient