Foundations
Accessibility
Accessible design provides better user experiences for everyone.
Anti-patterns
Anti-patterns are common design practices that employ bad habits, negatively impact the user, and should be avoided.
Color
The color system is designed to be clear, accessible, consistent, and on-brand.
Grid
The grid defines how components and content reflow and resize responsively to create a consistent experience across devices and screen sizes.
Spacing
The spacing scale is designed to create a consistent visual balance.
Tokens
Tokens are agnostic variables containing visual styling information. They are used to maintain visual consistency across different experiences.
Typography
The type scale is a constrained set of text styles. These styles are applied consistently and purposefully for optimal readability and accessibility.
Web sustainability
Web sustainability prioritizes the needs of the user and the environment first. The benefits of sustainable web design aligns with our system’s, team’s, and company’s values.
Decorative icons
Decorative icons are used to represent ideas, objects, or larger concepts, and to illustrate a message, action, or information group. They can be used in multiple use cases.
System icons
System icons are used as part of the user interface or part of a component. System icons are usually paired with text to further illustrate the text’s meaning.