Design systems provide consistency, structure, and built-in accessibility for large companies producing a lot of content but they don't leave a lot of room for designers.  What about those special campaign projects that really need a different look and feel than the rest of the site?  How can they take the hard work that went into crafting the design patterns and tweak it to make it their own?

One approach is to add fields to the CMS that allow tons of customization to the design pattern underneath but then you've opened Pandora's Box for every person using your CMS.

Custom properties, also called CSS variables, is our golden ticket.  This powerful CSS feature unlocks a lot of possibilities for us, when applied to a design system.

In this 30 minute presentation, geared toward design system builders and front-end developers with a deep knowledge of CSS, I would like to demonstrate and discuss the work we have done at Red Hat as part of our PatternFly Elements project (web components) to build a completely customizable theme using custom properties.

Attendees will walk away with a deep understanding of custom properties and some powerful ideas to take back to their team about how to write more efficient, flexible code.