Use the HSL Color Space and Scoped CSS Variables to Prototype UI Variants

In this lesson, we demonstrate how leveraging the power of scoped CSS variables in combination with the HSL color space can be used to quickly prototype UI variants. In this demonstration, we create some button variants.

We create four different variants where new variants can be created with only a few lines of CSS!