Overview of Spacing
Spacing in design systems is crucial for creating visually appealing and user-friendly interfaces. It involves using consistent margins, padding, gutters, and whitespace to separate and organize UI elements. Defined spacing scales help ensure uniform application across components and responsiveness across devices. Proper spacing enhances the readability, navigability, and overall aesthetic of digital products, making it foundational to good design.
Spacing Steps
The Telerik and Kendo UI spacing system defines 40 steps, each using 1 rem (16 px) as the base unit, with every step representing a precise multiple of this unit.
| Step | CSS Variable | Value | Example |
|---|---|---|---|
| 0 | --kendo-spacing-0 | 0px | |
| 1px | --kendo-spacing-1px | 1px | |
| 0.5 | --kendo-spacing-0.5 | 0.125rem | |
| 1 | --kendo-spacing-1 | 0.25rem | |
| 1.5 | --kendo-spacing-1.5 | 0.375rem | |
| 2 | --kendo-spacing-2 | 0.5rem | |
| 2.5 | --kendo-spacing-2.5 | 0.625rem | |
| 3 | --kendo-spacing-3 | 0.75rem | |
| 3.5 | --kendo-spacing-3.5 | 0.875rem | |
| 4 | --kendo-spacing-4 | 1rem | |
| 4.5 | --kendo-spacing-4.5 | 1.125rem | |
| 5 | --kendo-spacing-5 | 1.25rem | |
| 5.5 | --kendo-spacing-5.5 | 1.375rem | |
| 6 | --kendo-spacing-6 | 1.5rem | |
| 6.5 | --kendo-spacing-6.5 | 1.625rem | |
| 7 | --kendo-spacing-7 | 1.75rem | |
| 7.5 | --kendo-spacing-7.5 | 1.875rem | |
| 8 | --kendo-spacing-8 | 2rem | |
| 9 | --kendo-spacing-9 | 2.25rem | |
| 10 | --kendo-spacing-10 | 2.5rem | |
| 11 | --kendo-spacing-11 | 2.75rem | |
| 12 | --kendo-spacing-12 | 3rem | |
| 13 | --kendo-spacing-13 | 3.25rem | |
| 14 | --kendo-spacing-14 | 3.5rem | |
| 15 | --kendo-spacing-15 | 3.75rem | |
| 16 | --kendo-spacing-16 | 4rem | |
| 17 | --kendo-spacing-17 | 4.25rem | |
| 18 | --kendo-spacing-18 | 4.5rem | |
| 19 | --kendo-spacing-19 | 4.75rem | |
| 20 | --kendo-spacing-20 | 5rem | |
| 21 | --kendo-spacing-21 | 5.25rem | |
| 22 | --kendo-spacing-22 | 5.5rem | |
| 23 | --kendo-spacing-23 | 5.75rem | |
| 24 | --kendo-spacing-24 | 6rem | |
| 25 | --kendo-spacing-25 | 7rem | |
| 26 | --kendo-spacing-26 | 8rem | |
| 27 | --kendo-spacing-27 | 9rem | |
| 28 | --kendo-spacing-28 | 10rem | |
| 29 | --kendo-spacing-29 | 11rem | |
| 30 | --kendo-spacing-30 | 12rem |
Spacing Types
Different types of spacing are used strategically within a layout to create clear separation and intuitive flows. Here’s an overview of the primary types of spacing used in design systems:
- Margins—Space outside of borders that separates elements from each other.
- Padding—Space inside of borders that creates padding around an element's content.
- Gutters—Space between columns or rows in a grid system.
- Gaps—Space between flex items.
Key Principles
Spacing is a critical component in design that helps structure content, enhance visual appeal, and guide user interactions. The Telerik and Kendo UI Design System endorses several basic principles related to spacing:
- Visual Hierarchy and Emphasis—Spacing helps to establish visual hierarchy by creating distinct groups of elements or isolating important elements, making it easier for users to quickly understand which parts of the design are meant to be focal points.
- Readability—Proper use of spacing improves readability by breaking text into manageable chunks. Adequate space around text and between lines (leading) ensures that content is easier on the eyes, which is also critical for accessibility.
- Aesthetic Balance—Spacing contributes to the overall balance and symmetry of a design. Consistent and thoughtful spacing creates a more harmonious layout that is aesthetically pleasing and feels well-organized.
Theme-Specific Variables
For specific information about the spacing system, refer to the theme-specific variables list:
