BUILD GP > WEBSITE REDESIGN & VISUAL REFRESH
Design System
Build with Speed and Consistency
THE ATOMIC SYSTEM
Design with intent from the smallest to the largest element.
Atoms
These building blocks help form more complex components. They are used the most and any changes to them used to mean an egregious amount of time doing rework. As a component, one republish reverberates across the entire system.
PRIMARY OPTION 1
PRIMARY OPTION 2
SECONDARY
TERTIARY
SIZES
The primary and secondary buttons are available in large and small sizes. The different sizes allow them to be used in different context where a large/small button will be a better fit for the content. For example, a small button will be the better option in the navigation or in mobile view.
Molecules
The atoms form these components, which are made up of different elements to create one entity, like the resource card below. Designing them within a system also allows us to design their different states, which helps with prototyping down the line.
RESOURCE CARDS
SELECTION DRAWER
Organisms
When molecules and atoms combine, they create organisms. These are modules that make up large sections of a page—the main content. Together, they help create templated pages that we can reuse in form or structure.
JUMP AHEAD
Style Guide
