Utility Frameworks are simple HTML classes typically scoped to a single CSS property like .background-color, .grid-layout, and more. Utilities can be used to style an object from scratch or to override a style defined in component CSS. Utilities allow designers and developers to build and test new designs and components without abstracting their work into traditional semantic names or altering production CSS.

They also make it possible to create element-specific overrides without writing high-specificity variants into component CSS.

In some cases the Framework may be limited to just CSS associated with classes, and other Frameworks go further by including variables that encompass sizing units and colors that are defined by the variable(–my-primary-color) and so forth.

This globalized structuring allows for better and quicker designs that have benefits beyond just the designers and developers implementing them.

For additional information on Utility Frameworks, check out the U.S. Web Design System site to learn more.