---
path: foundation/spacing/overview
title: Overview
position: 1
seo_title: Overview of Spacing
seo_description: Learn more about the spacing approaches used for rendering the
Telerik and Kendo UI components, and find out detailed information about the
supported spacing scales and variables.
---
## 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:
```css
--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:
