When More is Preferred

Problem Statement

Our design system requires a cohesive approach to handling different density modes—specifically comfortable and compact. While component sizing can adapt easily, the entire layout of the interface should maintain a consistent and usable experience across various density settings. The challenge lies in ensuring that each mode maintains visual harmony and usability, whether it's for single components or the entire layout.

Currently density is baked within system tokens, long term how would we enable teams flexibility to have multiple sizing options co-exist, whether responsive and needing to reduce padding in a card, nested action elements and needing to maintain a visual hierarchy or an entire page wanting to view as much data as possible.

Considerations

Density Mode can influence the potential token properties:

• Space (padding, margin) -- horizontal -- vertical
• Size: height / width
• Text: Line-height (font-size?) Letter spacing (tracking)

Common use cases:

• Hierarchy within a container --i.e. actions
• Navigation
• Data tables --padding cell block
• text line-height -- Footers with Legal, Risk, Compliance (LRC)

Reminder: need to continue to hit tap target size for a11y (more padding)

Density tokens control the spacing and layout of elements in your design system. They define the padding, margins, and other spacing properties to create consistent and visually appealing layouts.

• Comfortable / Chonky
• Compact
• Dense

We need to deepen our understanding on why teams want to change density?

• Persona (Wealthscape, FI, etc)
  • Things need to be smaller and dense
• Designer/product preference

Other problem:

• How might we distinct density specific to breakpoint?
  • i.e. horizontal-padding for containers
• Provide tighter padding for responsive design

Recommendations

Do:

• Use density tokens to create consistent spacing and layouts across your product.
• Provide options for different density levels to accommodate different screen sizes and interaction patterns.

Don't:

• Use excessive padding or margins, as it can lead to cluttered and inefficient designs.
• Forget to test density tokens on different devices and screen sizes.