References ($) are units for fixed quantities that have been defined in advance. You can use them to set spacings and dimensions of components and pages in the radiosphere Studio Editor by selecting $ in the small dropdown menus next to the empty value fields. To do this, open the design settings in the editor using the design button in the top bar. You can use references ($) in the Layout and Spacing settings. Select $ and enter the desired reference in the free value field.
If you don't know which reference ($) is meant for which size, refer to the following overview:
| Reference name | Description |
| base-unit | The px value that all spacings are based on |
| spacing-sp1 | The px value of spacing 1, the smallest spacer based on the base |
| spacing-sp2 | The px value of spacing 2 |
| spacing-sp3 | The px value of spacing 3 |
| spacing-sp4 | The px value of spacing 4 |
| spacing-sp5 | The px value of spacing 5 |
| spacing-sp6 | The px value of spacing 6 |
| spacing-sp7 | The px value of spacing 7 |
| spacing-sp8 | The px value of spacing 8 |
| spacing-sp9 | The px value of spacing 9 |
| padding-page | The px value for the space around the page |
| margin-float |
The px value for the space between a floating element and other content |
| margin-block |
The px value for the space between a block element and other content |
| margin-grid-cross-axis-spacing |
The px value for the space between two grid cells that are below each other |
| margin-grid-main-axis-spacing |
The px value for the space between two grid cells that are next to each other |
| layout-widths-page | The px value of the maximum page width (usually used on pages) |
| layout-widths-block |
The px value of the maximum block width (usually used on posts & other content) |
Once you have entered the values, the size of the component or page in the Editor Preview on the left will change automatically based on the settings you have entered. You can change the settings at any time by overwriting the values in the fields. You can also choose from two other types of values that you can use to determine the dimensions of components and pages. Read here to find out what they are.