Utilities are single-purpose class names that you can use to make quick, specific changes to existing layouts. There are utilities for almost everything you could want to change, including colors, typography, positioning and sizing. They can even be combined to create entirely new designs.
Elements are building blocks that you can use to update or create new page layouts. They include common website and Help Center components like buttons, lists, cards, rows and columns. As with utilities, you can combine them to create new layouts or define your own using custom CSS.
Patterns are predefined layouts, ready to copy, paste and tweak. They are often compositions of both elements and utilities and can be copied in their entirety between themes or directly from the Pattern Library. Use patterns to significantly speed up the design and development process.