UI Density

Density describes how much information and how many interactive elements appear in a given area. The right density is not a universal standard — it depends on platform, user type, and session context.

Platform Defaults

Platform	Default density	Reason
Desktop	Medium to high	Large screen, precise input, often primary work surface
Tablet	Medium	Touch input, larger than phone but less than desktop
Mobile	Low	Small screen, touch targets need space, interrupted sessions

Never port a dense desktop layout directly to mobile. Remove, collapse, or deprioritise features rather than shrinking them.

User Type and Density

User type	Appropriate density	Examples
Power user / enterprise	High density acceptable	Trading platforms, ERP, analytics, developer tools
Occasional / general user	Medium — clear visual breathing room	SaaS dashboards, project management
Consumer / first-time user	Low — guided, uncluttered	Onboarding flows, consumer apps, e-commerce

A trading platform operator sits in the product for 8 hours a day and has learned every pixel — high density serves them. A user visiting a settings page once a month needs clear space and obvious labels.

Density Tokens

Define spacing scale with density in mind. A compact variant reduces padding without changing structure:

/* Default density */
--density-row-height:    44px;
--density-cell-padding:  var(--space-3) var(--space-4);
--density-gap:           var(--space-4);

/* Compact (enterprise / data-heavy) */
[data-density="compact"] {
  --density-row-height:    32px;
  --density-cell-padding:  var(--space-2) var(--space-3);
  --density-gap:           var(--space-2);
}

/* Spacious (consumer / onboarding) */
[data-density="spacious"] {
  --density-row-height:    56px;
  --density-cell-padding:  var(--space-4) var(--space-6);
  --density-gap:           var(--space-6);
}

Feature Count by Platform

Not every feature belongs on every platform. For each feature ask: does a mobile user need this right now?

Priority	Mobile	Tablet	Desktop
Core task	Always	Always	Always
Secondary actions	Collapsed (menu/sheet)	Visible	Visible
Filters and sorting	Accessible but not persistent	Collapsible	Persistent sidebar or toolbar
Bulk actions	Hidden or minimal	Reduced	Full
Advanced settings	Link to separate screen	Link or panel	Inline or panel
Data visualisation	Simplified (key metric only)	Reduced chart	Full chart

Density and Feature Reduction on Mobile

Sections and features can be removed, collapsed, or repositioned on smaller viewports — not just resized.

• Remove: Decorative sidebars, secondary data columns, promotional banners
• Collapse: Filters, advanced options, secondary navigation into accordions or bottom sheets
• Reposition: Toolbars move from top to bottom (thumb reach), sidebars move to drawers
• Simplify: A multi-column data table becomes a card list; a full chart becomes a single key metric

Progressive disclosure is the principle: show the minimum needed to complete the primary task, reveal more on demand.

Review Checklist

• Is the density appropriate for the primary platform (desktop = can be denser, mobile = must be sparse)?
• Is the density appropriate for the user type (power user = higher density, consumer = more space)?
• Are spacing tokens used to define density — not one-off padding values?
• On mobile: are secondary features collapsed, repositioned, or removed rather than shrunk?
• Are touch targets ≥ 44×44px even in compact density variants?
• Is a density toggle offered for enterprise tools where users have strong personal preferences?