# Spacing
All underlying spacing, sizing, and layout concepts in Sipster follow a modified **4px (0.25rem)** baseline scale. This scale is implemented via **rem** units instead of hard pixel values (where appropriate) to allow for more adaptive and responsive layouts.
The base font-size for Sipster (and most browser environments) is 16px (1rem), so a 4px (0.25rem) scale provides easily divisible whole numbers while still offering a wide variety of options. Maintaining a baseline scale leads to improved spacial balance and vertical rhythm throughout projects.
{% hint style="info" %}
Spacing values are implemented in rem units, but are named after their equivalent pixel value to help ease translation between mockups and development.
{% endhint %}
| Spacing Value | Pixel Equivalant | Computed REM Value |
| ------------- | ---------------- | ------------------ |
| 0\* | 0 | 0 |
| 2 | 2 px | 0.125 rem |
| 4 | 4 px | 0.25 rem |
| 8 | 8 px | 0.5 rem |
| 12 | 12 px | 0.75 rem |
| 16 | 16 px | 1 rem |
| 24 | 24 px | 1.5 rem |
| 32 | 32 px | 2 rem |
| 40 | 40 px | 2.5 rem |
| 48 | 48 px | 3 rem |
| 56 | 56 px | 3.5 rem |
| 64 | 64 px | 4 rem |
| 72 | 72 px | 4.5 rem |
| 80 | 80 px | 5 rem |
| 88 | 88 px | 5.5 rem |
| 96 | 96 px | 6 rem |
| 104 | 104 px | 6.5 rem |
| 112 | 112 px | 7 rem |
| 120 | 120 px | 7.5 rem |
| 128 | 128 px | 8 rem |
\*The zero (0) value is provided, but it's not necessarily required to be used. In most circumstances where a value of `0` is needed, it makes sense to just use a raw `0` instead of relying on a custom Sass function and compilation to derive that value.
***
## Applying Spacing
Applying spacing is fairly straightforward in both design and development.
### Design: Figma Library
The baseline scale is available in the SDS Core Figma library as a reusable component, which can be accessed via the 'Assets' tab in Figma. Navigate to the SDS Core library, find the 'Spacing' page, and add the component to your design.
Once the Spacing component is added to your design, select it to bring up the Component properties in Figma's right sidebar. Here you will see 2 additional options: *unit* and *orientation*.
The *unit* option allows you to quickly change between the available spacing values.
The *orientation* option allows you to choose between vertical(Y) and horizontal(X) spacing.
{% hint style="info" %}
This Spacing component should primarily be used for handoff files or dedicated redline specs to help communicate layouts and any shifts across breakpoints. It is not expected or required to add the actual component to every layout, of every page, of every file...but the space in all designs should still adhere to the scale.
{% endhint %}
###
### Development: SCSS Spacing Function
To streamline implementation for developers, Sipster provides a custom spacing function: `sds-spc()`.
This function allows you to pass the desired spacing `$value` (required), which will compile to the correct rem value as outlined in the table above.
```scss
sds-spc($value);
```
#### Example:
```scss
.myCustomComponent {
margin: sds-spc(4) sds-spc(8);
}
.sds_Card {
padding: sds-spc(16);
}
```
#### Compiled CSS:
```css
.myCustomComponent {
margin: 0.25rem 0.5rem;
}
.sds_Card {
padding: 1rem;
}
```
{% hint style="info" %}
While this function can be used inside any CSS property that accepts an integer, it should primarily be used for properties such as margin, padding, and other spacing related concepts.
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://2600hz.gitbook.io/sds/sds-3.0/sds-core/layout-system/spacing.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.