Foundations

Foundations are the fundamental principles that guide the creation of a cohesive design language, enabling you to build products that are easy to use and visually appealing.

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.

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.