A utility class modifies a single trait, typically a single CSS property. To apply a trait, or a combination of traits to an element, add the corresponding utility class directly to the HTML element.
Together, they can form a variety of UI patterns. You won't always want to use combinations of utilities to generate more complicated patterns, but the option is there. Once you've identified a set of traits that seem to be reused a lot, it's a good time to consider turning those into a component.
<div class="ds-u-fill--primary-alt ds-u-padding--3"> <p class="ds-u-margin--0 ds-u-color--white ds-u-text-align--center">Hello world</p> </div>