Spacing & Padding

Overview

In the Alza Design System (ADS), spacing is a crucial aspect of creating consistent and visually balanced layouts. We have standardized our spacing system to be based on a 4px (0.25rem) increment. This ensures that all elements, from padding and margins to gaps and positioning, follow a consistent rhythm across our applications.

Spacing by a common unit

The base spacing unit is 4px (0.25rem). All spacing values in the system should be multiples of this unit. This creates a consistent and harmonious design system, making it easier for designers and developers to work together and maintain uniformity across all interfaces.

Guidelines for Spacing

Consistency

• Preferably use multiples of the 4px (0.25rem) base unit for spacing values.
• This ensures uniformity and creates a cohesive rhythm throughout the design, making it easier to maintain and scale.

Proportionality

• The spacing scale should be applied proportionally to the elements within a layout. For example, smaller components may use 1x or 2x spacing, while larger sections or more important content may require 8x or even 10x spacing.

Responsiveness

• Spacing values should be flexible and adjust based on screen size and context. For example, larger devices might use more spacing, while smaller screens may reduce the spacing for a more compact

Semantic Padding Values

The following table outlines the semantic padding values for specific elements in the design system. These paddings are used for components like headlines, sections, and page elements, where we need more controlled and predefined spacing for readability and alignment.