Foundations

Colors can be used to communicate meaning, establish visual hierarchy, and differentiate products, all while ensuring a cohesive and accessible experience.

Density relates to the amount of content that can fit on a screen based on the size and spacing of components.

The time between the moment a user performs an action and the moment feedback is given by the system.

Icons are visually simplified and recognizable symbols that represent a specific action, object or concept. 

Modes enable the color palette to change from light to dark, providing the flexibility to choose an option that best fits a preference or need.

A responsive layout makes dynamic changes to the appearance of a product in response to the size of the screen.

Scale allows you to give components greater or lesser prominence within an interface through a multiplier of their default size.

A shadow gives the perception of depth and distance between different layers, helping to create a visual hierarchy that enhances comprehension and engagement.

Size refers to the restricted dimensions provided within the design system that can refer to the height and/or width of an element.

The organization of space is a key aspect of design. Spatial tokens help align layouts and create consistent visual rhythm.

Typography can help to enhance readability, establish hierarchy and set a visual tone, resulting in more effective communication.