What is line density?
Combining Elevation and Line Density guidelines to create a more consistent, modern product experience with clearer layouts and improved content readability by providing designers with practical direction to help create lighter, clearer, and more consistent interfaces across:
- Sectioning and Layout
- Components, such as forms, tables and charts
Why is line density important?
Line density aims to:
- Reduce unnecessary borders, dividers, and nested containers by using spacing, hierarchy, colours, grouping and alignment instead.
- Improve scanability and readability
- Create a clearer visual hierarchy
- Reduce the maze-like feeling across interfaces
- Keep complex screens usable
- Maintain accessibility and action clarity
The idea is to reduce reliance on heavy lines and borders to separate sections, which has contributed to dense, visually heavy screens across our products.
Design direction with upcoming updates
Consider spacing, hierarchy, and a subtle background colour before adding a border or divider. Borders and dividers should be treated as a last-resort structural tool, not the default way to separate content.
A good hierarchy can usually be created through:
- Spacing
- Headings
- Alignment
- Surface/background colour
- Grouping
- Content order
Only add a border or divider when these methods are not enough.
Page colour
The colour of the page can either be page/default (#FFFFFF) or tonal_subtle (#F7F7FB); the decision on which to use comes down to the content of your page.


1. We recommend using page/default when:

- The content contains a singular simple form, meaning a form that just has form fields and some fieldsets
- The page just contains a body of text, like a documentation page
2. We recommend using tonal_subtle when:
- The layout of the page will consist of grids of card/and or widgets
- You have multiple forms on a single screen
Sectioning
Use colour to support structure and provide a clear, breathable, modern feel to improve the user experience. These colour changes help us:
- Reduce unnecessary lines and borders
- Separate sections without boxing everything
- Preserve interaction clarity
- Maintain accessible contrast
- Keep the interface calm and consistent
The goal is not to make the product more colourful, but to use subtle colour shifts to replace unnecessary structural chrome.
Do
Use tonal_subtle, or tonal_medium background colours to group related content
Use colour to replace unnecessary borders
Keep surface changes calm and low contrast
Use consistent tonal levels across similar layouts
Pair colour with clear headings and spacing
Check that all elements still stand out and pass colour contrast ratios on the tonal surface
Test colour in the full-screen context, not just as a swatch
Don’t
Don’t use colours and borders together, unless necessary
Don’t create more than 3 nested section levels
Don’t use colour only to decorate the page
Don’t make passive surfaces look like buttons or selected states
Don’t use strong colour contrast where subtle grouping is enough
Don’t introduce colours outside the token system
Don’t rely on colour alone if the section needs semantic clarity