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.

Find icons and country symbols to visually represent actions, objects, concepts and geographical identities.

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

The cursor foundation controls how the cursor appears when positioned over or interacting with a component.

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.

Elevation uses shadow and z-index to organize content layers. Shadow adds depth and realism, while z-index controls the stacking order to distinguish layers.

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.

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.