ui-densitylisted

# 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: ```css /* Default density */ --density-row-height: 44px; --density-cell-padding: var(--space-3) v