Spacing does not exist on its own in a design system. Set it in rem, and it depends on the base size used for type. Change it across screen sizes, and it depends on the breakpoints in the grid.

Shadows have to make the journey from design into development too. A soft shadow can look right in Figma and still be a poor fit for the library or stack used to build the product.

Omni reduces that mismatch by keeping both tools connected to the system around them. Spacing carries over decisions already made in Type and Grid, while the Elevation presets draw from established libraries. You can then adjust either to suit the project.

Omni is free to use. Open it in another tab to set up and follow the walkthrough.

Open Omni

Use one spacing token across screen sizes

Omni gives you 2px, 4px and 8px presets, or you can build a custom scale. Once you have kept the steps the product needs, you can name values for particular uses.

Page padding, for example, can remain one token while using different values on desktop and mobile. Its name and breakpoint values are kept when you export the spacing system.

See which shadow belongs where

After choosing a preset, you can remove levels you do not need and adjust the position, blur, spread or opacity of each shadow. Add another layer when the effect calls for it, or change the base colour to create a glow.

The UI preview places those levels on Dashboard, Mobile, Web and Interaction examples in light and dark modes. You can see how each shadow behaves on an interface and decide where it belongs.

Let’s walk through both tools in Omni. I’ll begin with Spacing, then move to Elevation. You’ll find the steps for each underneath the video if you want to return to a particular control.

Set up Spacing

1. Choose a spacing scale
   Start with one of Omni’s predefined scales or create your own.

2. Choose the unit
   Work in px or rem, depending on the project.

3. Check the base size
   When you use rem, Omni inherits the base from your Type settings. You can override it if needed.

4. Add semantic tokens
   Create a token such as page padding, then assign its value at each breakpoint.

5. Export the tokens
   Once the spacing system is ready, export it for use in your project.

Set up Elevation

1. Choose a preset
   Start with a preset based on an established design system or create your own.

2. Adjust each level
   Change the position, blur, spread and opacity of the shadow.

3. Add more layers
   Use multiple shadow layers when the effect needs more complexity.

4. Check the UI preview
   See how the levels look across different interfaces, then check them in light and dark modes.

The spacing system is ready to export, and the elevation levels have been checked on the interfaces and themes where they will be used.

For me, the useful part is having that structure in place early enough to guide the product, while leaving every value open to adjustment as the interface develops.

Omni is free to use, so set up spacing and elevation for your next project and tell us how it goes.