Spacing

Overview

Spacing plays a crucial role in creating a visually appealing and user-friendly interface. It helps establish a sense of hierarchy, balance, and organization within a design system. By carefully considering the spacing between elements, designers can enhance the overall user experience and improve the usability of their products.

---

Resources

---

Spacing and proximity

Spacing and proximity are closely related concepts in design. Proximity refers to the visual relationship between elements, while spacing determines their physical distance. By manipulating the spacing and proximity of elements, designers can create visual groupings, establish relationships, and guide users' attention.

---

Application in components

Spacing and proximity are crucial when designing components within Horizon. Consistent spacing ensures that components align correctly and maintain a cohesive look and feel. It also helps improve the interface’s readability and usability.

Designers can leverage the predefined spacing increments to create space between components and establish a clear visual hierarchy. By carefully considering the spacing and proximity of elements within a component, designers can enhance its usability, legibility, and overall user experience.

---

Sizes

In Horizon, spacing is defined using a modular scale. This scale provides consistent sizing and allows components to align seamlessly. By leveraging standard sizes and spacing increments, designers can ensure that components snap into place and maintain a harmonious structure across different screens and devices.