This digital pattern library has been designed to help you create better and informed experiences for all digital savvy users.
Here, you'll find user interface components, content classes, and visual styles to reference and create consistent experiences across Avantor web properties.
These building blocks are categorized into the following stages loosely following the Atomic Design methodology:
If atoms are the basic building blocks of matter, then the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can't be broken down any further without ceasing to be functional.
In the context of a pattern library, atoms demonstrate all your base styles at a glance, which can be a helpful reference to keep coming back to as you develop and maintain your design system. But like atoms in the natural world, interface atoms don't exist in a vacuum and only really come to life with application.
In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.
Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.
Building up from molecules to more elaborate organisms provides designers and developers with an important sense of context. Organisms demonstrate those smaller, simpler components in action and serve as distinct patterns that can be used again and again. The product grid organism can be employed anywhere a group of products needs to be displayed, from category listings to search results to related products.
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.
An important characteristic of templates is that they focus on the page’s underlying content structure rather than the page’s final content. Design systems must account for the dynamic nature of content, so it’s very helpful to articulate important properties of components like image sizes and character lengths for headings and text passages.
By defining a page’s skeleton we’re able to create a system that can account for a variety of dynamic content, all while providing needed guardrails for the types of content that populate certain design patterns.
Pages are specific instances of templates that show what a UI looks like with real representative content in place.
It is at the page stage that we're able to take a look at how all those patterns hold up when real content is applied to the design system.
The pattern state is used to track progress of a pattern from development, through review, to completion.
New patterns should be released into the style guide following these principles, assess each pattern independently of every other component.
Pattern is in development or being worked upon.
Includes everything from the proposed phase, which has been reviewed by the design team, as well as:
Includes everything in the In Progress and In Review states as well as: