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.
Assets
Find icons and country symbols to visually represent actions, objects, concepts and geographical identities.
Color
Colors can be used to communicate meaning, establish visual hierarchy, and differentiate products, all while ensuring a cohesive and accessible experience.
Cursor
The cursor foundation controls how the cursor appears when positioned over or interacting with a component.
Density
Density relates to the amount of content that can fit on a screen based on the size and spacing of components.
Duration
The time between the moment a user performs an action and the moment feedback is given by the system.
Elevation
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
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.
Responsiveness
A responsive layout makes dynamic changes to the appearance of a product in response to the size of the screen.
Size
Size refers to the restricted dimensions provided within the design system that can refer to the height and/or width of an element.
Spacing
The organization of space is a key aspect of design. Spatial tokens help align layouts and create consistent visual rhythm.
Typography
Typography can help to enhance readability, establish hierarchy and set a visual tone, resulting in more effective communication.