Spacing and sizing
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.
Extra extra small - 2px
When dealing with smaller components and compact user interface (UI) elements, utilizing the xx small spacing variant or a 2px spacing is recommended. This choice allows for a more efficient use of space and ensures a visually balanced and cohesive design. By employing these spacing options, you can enhance your UI’s overall readability and usability while maintaining a clean and organized appearance.
The highlighted value component, being one of the smallest elements, employs a sleek 2px spacing between the icon and text.
Extra small - 4px
Consider utilizing the 4px or x small spacing for a slightly larger spacing option. This spacing variant provides a bit more breathing room between elements, allowing for improved visual clarity and legibility. The 4px or x small spacing can help create a balanced and aesthetically pleasing design when applied to smaller components or compact UI elements. The spacing for supplementary information should be adjusted based on the size of the fonts being used.
The input and input field elements are thoughtfully arranged with a 4px spacing. This spacing choice ensures that these items are visually connected and appear harmoniously together.
Small - 8px
When designing button groups or similar elements, it is advisable to consider utilizing the small variant or 8px spacing. This particular spacing choice helps to create a visually harmonious and balanced design. Additionally, the use of 8px spacing facilitates easy navigation and improves the overall usability of the interface.
To ensure a cohesive and visually pleasing design, the input and input field elements are thoughtfully arranged with a 8px spacing. This spacing choice ensures that these items are visually connected and appear harmoniously together.
Similar to buttons, cards also benefit from utilizing the sm (8px) spacing. This spacing choice ensures that cards are visually aligned and properly spaced, resulting in a more aesthetically pleasing and balanced design.
Medium - 12px
If you want to create a visually pleasing and organized design, the medium size or 12px spacing is the best choice. It is particularly effective in scenarios where you need to arrange elements in a balanced and unified manner. Commonly used to create a clear distinction between different components, spacing such as form labels and input fields ensure a user-friendly layout.
The spacing between input fields is set at md (12px), providing a moderate amount of separation between the fields. This spacing allows for a clear visual distinction between the input elements while maintaining a compact and efficient layout.
Large - 16px
The large variable or 16px size plays a significant role in our design system website. It offers a versatile, flexible spacing option that creates impactful and visually appealing layouts. This size is particularly useful when you need to provide ample breathing space between elements, allowing them to stand out and grab the user's attention.
If your forms need a content header to help group your information, use lg (16px) spacing between the content header and the start of the form elements.
The generous padding enhances the readability and overall aesthetic appeal of the cards, making them visually appealing and easy to navigate.
X Large - 24px
The X Large spacing, which measures 24 pixels, is utilized to create adequate spacing between columns of input fields and provides padding within the modal dialog.
The spacing between columns ensures a clear visual distinction and easy navigation between the input fields.
The XL (24px) spacing adds padding within the modal dialog, creating a comfortable and visually pleasing layout.
Containers use XL (24px) padding. Containers include components such as Panels and Modals. Containers will generally contain an assembly of components and is self contained.
XXX Large - 40px
The XXX Large spacing, set at 40 pixels, is applied to the spacing between the content and action button.
Using the XXX Large spacing enhances the visual appeal and usability of the modal dialog, contributing to a more seamless and enjoyable user experience.