Copy link to headline:Introduction
Density refers to the amount of vertical white space within a component and the height of its primary interactive element. To provide a flexible toolkit for various user preferences and device capabilities, this design system offers three density levels: Compact, Default and Cozy. These levels use fixed base heights of 32px, 40px and 48px.
- Compact32px base height
High-density layouts maximize information density and optimize limited screen space for expert interfaces, data-heavy dashboards, and complex data grids.
- Default40px base height
The standard baseline balances scannability with visual comfort across all devices for most enterprise and general-purpose applications.
- Cozy48px base height
Content-focused layouts utilize spacious white space to increase readability and reduce cognitive load for touch-friendly interfaces and simplified workflows.
Copy link to headline:Usage
When selecting a density, it will apply to the selected component as well as to all nested components unless they explicitly define another density.
You can change the density using the density property of supported components or by applying the below CSS classes to any elements of your application.