Design Foundations

About

Our design foundations provide standards and guidance to help designers and developers work together more efficiently. They describe the visual language upon which all of our components are built and lay the groundwork for clear and consistent product experiences.

Colors

Carefully selected to support flexible and effective visual communication, while creating more accessible and inclusive user experiences.

Icons

We support a range of icons of different sizes and colors that can help enhance components and indicate functionality to users.

Spacers

Our spacers help lay out components consistently, while simplifying communication between designers and developers.

Typography

Our typography guidelines specify how you can use different font and text styles to create strong visual hierarchies.

Usage and behavior

Our usage and behavior guidelines help you decide when to use the best component for scenarios where multiple may be relevant.

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines