Spacing

The goal of whitespace is to maximize readability and understanding of content/data. CosmosWork uses a 8px system (multiples of eight pixels) to define relationships with the data.

• 8px The minimum horizontal padding in an interactive element (e.g., the distance from the border edge of an input field, from the text inside it).
• 4px (8px * .5): The space between an icon and its related text (e.g., a back button with an image of an arrow and the word “Back”).
• 16px (8px * 2): The space between rows of data inside the same container, or the inner padding on the container itself.
• 24px (8px * 3): The space between unique sections of data within a card.

Last updated: Apr 2020