Foundations
Spacings
A coherent spacing system to create a clear and functional UI. Use spacing to deliver coherent application of space across 8Bit Loot Interfaces.
Overview
Proper spacing helps maintain a clean, legible, and visually balanced layout, which improves the overall user experience. Spacers define the margins and paddings between components, ensuring harmonious alignment and responsiveness across breakpoints.
System
0.25rem (4px) grid
The spacer scale follows a 4px grid system, ensuring a predictable and easy-to-apply pattern across all screen sizes. Use rem units for flexibility in scaling.
The Typography line-height was set to be divisible by 4, and spacing is measured from the edges of the text boxes.
Several of the components are sized in 16px increments to match the line-height of the body text. This allows us to create harmonious arrangements between the components and the text.
Scale
8Bit Loot's spacing scale is applied within our elements, composites, components, and layouts. It is created to complement our grid and typography throughout the system.
Spacing in code
| REM | PX | Examples |
|---|---|---|
| 0.25 | 4 | |
| 0.5 | 8 | |
| 0.75 | 12 | |
| 1 | 16 | |
| 1.5 | 24 | |
| 2 | 32 | |
| 2.5 | 40 | |
| 3 | 48 | |
| 4 | 64 | |
| 5 | 80 | |
| 6 | 96 |
Spacing by breakpoints
Spacings should scale down slightly on smaller devices (tablet and mobile) to optimize for smaller screen real estate while maintaining a clean and readable interface.
- Desktop: Default spacings, generous paddings and margins.
- Tablet: Slightly reduced spacings for tighter content organization.
- Mobile: Compact spacings for optimal usage of vertical and horizontal space.
Applying spacing w/ components
Various components within 8Bit Loot enable automatic spacing between elements:
Use the text container component to wrap and automatically add the correct spacing between a set of paragraphs, lists, or other textual components.
Principles
Spacings serve as the building blocks for defining the rhythm and structure of a page. They are designed with a systematic approach to scale across various screen sizes (desktop, tablet, and mobile) and follow a consistent grid pattern.
Creates visual rhythm
We use simple mathematical principles with visually distinguishable increments to create harmonious arrangements of components and text.
Rhythm is achieved when our elements are organized into repeatable patterns. This gives our elements a deliberate, professional, and consistent look.
Creates relationships
Our elements that are close to each other are seen as being meaningfully related. As more space is added between the elements, their perceived relationship weakens.
Patterns created through spacing can also create relationships. Elements arranged in the same spacing pattern are seen as related pieces that have equal weight.
Space can also be used to denote groups of associated information. This creates content sections on a page without having to use lines or other graphical elements as a divider.
Creates hierarchy
Elements that have more spacing around them tend to be perceived as higher in importance than elements that have less space around them.
Elements that are set close to each other can be easily overlooked. Users may see the grouping but not process each individual item. Therefore, if you have an element or content of high importance on the page, consider giving it extra surrounding space to help it attract focus.
White space
Empty space — also known as white space — is important in design. It can be used to break up sections on a page or to help create focus on certain element(s). White space helps with information processing; too much dense information can be disorienting or overwhelming for a user.
Sections of a UI are allowed to be dense, but the whole page should not be crowded; there should be white space to let the user's eye rest.