foundations
Spacing ()
A consistent spacing system that creates visual rhythm.
Consistent spacing encourages visual rhythm that improves the quality of our user interfaces. Chameleon provides a spacing scale for designers and developers for applying layout spacing, establishing a shared language and resulting in a consistent visual balance in our digital products.
Spacing scale
Chameleon's spacing scale is built on increments of 4 pixels. We chose a 4px baseline because four is a flexible number that can be divided or multiplied and results in a whole number. All components and typography aligns to this 4px baseline grid for mobile, tablet, and desktop.
| Component | Example |
|---|---|
space1 | 2px |
space2 | 4px |
space3 | 8px |
space4 | 12px |
space5 | 16px |
space6 | 24px |
space7 | 32px |
space8 | 40px |
space9 | 48px |
space10 | 64px |
space11 | 96px |
Usage
The spacing scale is used where we need to apply horizontal or vertical spacing for UI components and containers.
- Stack spacing: refers to horizontal spacing.
- Inline spacing: refers to vertical spacing.
- Inset spacing: refers to spacing inside of a container or component.
Typography
Chameleon's typography was carefully built to work harmoniously with our spacing system. Therefore, line heights are designed with increments of 4px, where applying space on typographical elements is measured from the edge of the text.