We use a hierarchy of patterns. Each layer is composed together to form patterns at each higher layer. Here’s an overview of these different patterns.
Together these can be used to prototype how new patterns (or pattern changes) would affect the app from within the pattern library.
the low level variables (rules, essentially) that patterns are built from.
These low level variables are also expressed as utility classes. Utility
classes allow rapid prototyping without the necessity of altering existing
classes or creating new ones. It allows you to build new components without
altering the production CSS.
Examples: Height, width, color, typography, etc…
Components are small basic building blocks that are used to build larger
features.
Examples: Buttons, icons, loading action, etc…
Features are complete groups of functionality, built from multiple
components.
Examples: Panels and cards
Complete views built from features and components.
Examples: Overview, dashboard, application page, etc…