Density refers to the spatial compactness of UI elements—how tightly components are arranged, how much padding surrounds them, and how much content fits within a given layout. M3E applies the Material Design 3 density system to adapt component layout, spacing, and touch targets across varied contexts—from spacious, touch-friendly surfaces to compact, information-dense environments.

The Material Design 3 design tokens are implemented as custom CSS properties. Design tokens are named, platform-agnostic variables that represent visual design decisions—such as color, typography, spacing, and elevation—in a reusable, consistent format.

Density tokens are surfaced using the standardized --md-sys-density-scale and --md-sys-density-size custom CSS properties. M3E provides the Theme component which can be used to systematically control --md-sys-density-scale using its density attribute.

The following components support density scaling in M3E: button, checkbox, input chips, fab, form-field, icon button, list, nav menu, radio, segmented button, tabs, and toolbar. Each component adapts its layout, spacing, and touch targets based on the active density scale.

Touch surfaces maintain a minimum size of 48dp x 48dp, ensuring accessible, tap-friendly targets across all density settings. This threshold aligns with Material Design 3 guidelines and is enforced even in compact layouts, preserving interaction clarity and usability for both mouse and touch input.