Spacing and Alignment

Regular paddings and alignment helps users consume the app's content and predict where to find information they might be looking for

Regular Padding

All elements should be padded on both sides for aesthetic and functional purposes. This gives users a cue whenever we have horizontal scrolling, as these elements won't show this padding. A regular padding throughout the app also helps with our modular approach and eventual combination of elements from different features - a customized dashboard, for example, where we show community notifications and weight progress.

Left Alignment

We keep elements aligned to the left by default. Eventual exceptions happen when an element is full width, for which cases we center align the text.

Figma File for Specification

Related Content

Overall Concepts and Guidelines

Modular Components and Atomic Design

Text Style