How to get started
Regardless of your job title, you can use the design system.
Familiarize yourself with the design system
We've built the system so it’s easy to find your way around. Get to know where things live. See what it offers. This will begin to build your body of knowledge. It will also make it faster for you to find what you need each time you come back.
The difference between components and patterns
A component is reusable code. It renders as an element a user interacts with on a page. Each component has its own role and styling with little room for variation. Examples of components are buttons, checkboxes, and text fields.
Components are like ingredients in a sandwich, like bread, cheese, or lettuce. We can mix and match components to create a variety of patterns.
Patterns are components working in combination. Patterns allow for variation based on the user’s need. An example of a pattern is a form with fields for a name and address, and the header and footer of a webpage.
Patterns are like completed sandwiches. We can add or subtract components to make different types of patterns. In a sandwich, a single ingredient could either ruin or improve the taste. In a pattern, a single component could interfere with or improve the user experience. We must combine components to make sure they meet the user’s need.
Explore areas outside of your role
Visit each section. You will start to learn the shared language we use for creating quality digital products. You also see how the information for other roles can help you in your role.
For example, content creators can visit and learn from the design section. Designers can visit and learn from the accessibility section. And so on.
Give feedback on the design system
We need your ideas for how to improve the design system. The design system will keep evolving based on best practices, research, and your input.
Submit your ideas, questions, or comments.