Spacing
TL;DR: Everything about managing spacing in Solis — the scale, settings, and code, from both a developer and merchant perspective.
Everything about spacing, in one place. If you have a question about how spacing works in Solis, whether you’re a developer defining the scale or deciding whether a value should be merchant-editable, it should be answered somewhere in this section.
What’s in this section
Section titled “What’s in this section”| Page | Answers |
|---|---|
| Spacing Scale & Tokens | A defined scale instead of one-offs, semantic roles, fluid spacing with clamp(), naming rules |
| Spacing in Settings | The range setting type, and when a spacing value should actually be merchant-editable |
| Spacing in Liquid & CSS | Logical properties for RTL, gap over margin hacks, custom property vs. class |
How the pieces fit together
Section titled “How the pieces fit together”Spacing starts as a fixed scale in CSS (see Spacing Scale & Tokens), most of which stays fixed rather than merchant-editable. Spacing in Settings covers the specific, low-risk cases (mostly section-level padding) where a range setting is actually worth adding. Spacing in Liquid & CSS covers how spacing gets written correctly day to day: logical properties so it works in RTL languages, and the rule for choosing between a custom property and a class.
Quick answers
Section titled “Quick answers”“Should spacing be a merchant-facing setting?” Usually no. Most spacing is a fixed design decision. Section padding is the main exception. See Spacing in Settings.
“Why does my spacing look wrong in Arabic/Hebrew?” You’re probably using a physical property (margin-left) instead of a logical one (margin-inline-start). See Spacing in Liquid & CSS.
“How do I avoid a :last-child margin hack?” Use gap on the container instead. See Spacing in Liquid & CSS.
“What do I name a spacing token?” After its role or scale position (--spacing-section-block, --space-lg), never its current value. See Spacing Scale & Tokens.
“One custom property or a class?” One property varying → custom property. Several varying together → class. See Spacing in Liquid & CSS.
Further reading
Section titled “Further reading”- Design System & Configuration: the broader section this one was split out of
- Fonts: the companion section for typography tokens and settings
- Colors: the companion section for color tokens and settings