Spacing

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 24 steps, all computed from a single base step:

--kendo-spacing-base: 0.25rem;

Each step is a multiple of the base: calc(N * var(--kendo-spacing-base)) where N is the step number.

All spacing values are exposed as CSS custom properties: --kendo-spacing-{step} and can be accessed in SCSS via the k-spacing($step) function.

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:

Spacing for MeridianDiscover the Telerik and Kendo UI Meridian theme spacing variables list.

Spacing for BootstrapDiscover the Telerik and Kendo UI Bootstrap theme spacing variables list.

Spacing for MaterialDiscover the Telerik and Kendo UI Material theme spacing variables list.

Spacing for FluentDiscover the Telerik and Kendo UI Fluent theme spacing variables list.

Spacing for DefaultDiscover the Telerik and Kendo UI Default theme spacing variables list.

Spacing for ClassicDiscover the Telerik and Kendo UI Classic theme spacing variables list.