Design primitives such as colors, typography and spacing.
Border
We use borders to contain elements or to separate them from each other in order to group content in ways that make it easier to decode and understand.
Color
We use color to signal structure, highlight or emphasize important information or elements, and to display different states.
Layering
We use z-indices to control layering in our user interfaces by providing a third axis to arrange content. They are commonly used for overlay components such as for modals, popovers and tooltips.
Motion
We use motion to help convey meaning in our user interfaces.
Opacity
We use opacity for overlays, shadows and illustrative effects.
Radius
We use radii for components such as buttons, inputs and cards in order to deliver friendly and approachable user interfaces. Radii help draw attention to the content of an element rather than the element itself.
Shadow
We use shadows to provide cues about depth, direction of movement and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.
Spacing
Spacing is an important — and often overlooked — part of product design. We provide tokens to take the guesswork out of spacing and help deliver clear, functional layouts.
Aa
Typography
We consider typography to be one of the most important aspects of our design system. We use typography to present designs and content as clearly and efficiently as possible.