BRAID
Braid Design System
GuidesFoundationsComponentsPatternsStyles

Tailoring content density

How to adjust the size and spacing of components to create a more airy or more condensed UI.

Best practices

Content density variables

When tailoring content density it’s important to consider:These aspects must be considered holistically to achieve a well crafted design.

Component size

Use the size property to scale components such as Text, Button, Accordion, Actions, ButtonIcon, Checkbox, RadioGroup, List, Loader and Toggle (e.g. size="small").Use the width property for Dialog, Drawer and MenuRenderer (e.g. width="small").
Text size largeText size standardText size smallText size xsmall
Text size large strongText size standard strongText size small strongText size xsmall strong
Standard buttons
Small buttons
 
Open in Playroom

Vertical spacing

Use Stack to control vertical spacing. It accepts any value from our space scale, from none to xxxlarge.
Large
UI component
UI component
UI component
Medium
UI component
UI component
UI component
Small
UI component
UI component
UI component
Xsmall
UI component
UI component
UI component
 
Open in Playroom
When designing custom solutions with Box, vertical spacing can also be applied using the padding or margin properties.

Horizontal spacing

Use Columns, Tiles, Inline and Spread to control horizontal spacing. They accept any value from our space scale, from none to xxxlarge.
Large
UI component
UI component
UI component
UI component
Medium
UI component
UI component
UI component
UI component
Small
UI component
UI component
UI component
UI component
Xsmall
UI component
UI component
UI component
UI component
 
Open in Playroom
When designing custom solutions with Box, horizontal spacing can also be applied using the padding or margin properties.

Bringing it all together

Spacing should be scaled to align with component size. Smaller components need less breathing space, larger ones need more. Related content should be grouped together.The same page header at two sizes:

Heading level 1

Large text lorem ipsum dolor sit amet consectetur adipiscing elit. Vivamus iaculis ut neque sit amet egestas.

Heading level 2

Standard text lorem ipsum dolor sit amet consectetur adipiscing elit. Vivamus iaculis ut neque sit amet egestas.
 
Open in Playroom
The same card design with three approaches to size:

Heading level 4

Standard text
Standard text lorem ipsum dolor sit amet consectetur adipiscing elit. Vivamus iaculis ut neque sit amet egestas. Standard, secondary text
Large, strong textSmall text
Small text lorem ipsum dolor sit amet consectetur adipiscing elit. Vivamus iaculis ut neque sit amet egestas. Small, secondary text
Strong textSmall text
Xsmall text lorem ipsum dolor sit amet consectetur adipiscing elit. Vivamus iaculis ut neque sit amet egestas.Xsmall, secondary textXsmall text link
 
Open in Playroom

Impacts to usability

Condensing content makes it harder to read and scan. That trade-off can make sense in some contexts, but should be considered carefully. Also consider what you show, not just how you show it. Simplifying, reducing detail and removing unnecessary content makes products easier to use.

Related

  • layout — Foundations document that outlines all available layout components and how to use them.
On this page