The spacing scale gives every margin, padding and gap a predictable size. It has 17 tokens built on an 8px base; 1px, 2px, 4px and 12px are for detail.
Every bar and diagram on this page is drawn with the var(--…) from the package, so it follows the package when it changes. See .claude/skills/eco-spacing for the rules.
Apply the scale to all margins, padding and position coordinates, on both the vertical and horizontal edges. Use it when you build a component or a page template. It must be used in all Alligo components and designs.
Most values are multiples of 8px. The 1px, 2px and 4px units are for detail level, and 12px is a complement when needed.
| Group | Tokens | Range | Typical use |
|---|
A systematic set for margins, padding, position coordinates and layout gaps. Each square is the real token size. Click a token to copy its variable.
| Example | Description | Token |
|---|
Two tokens change value with the breakpoint. Use them for the air between a section’s own content blocks, for example heading, card grid and buttons. Use the fixed scale above for margins and gutters.
| Token | xs 0–639 | sm 640–768 | md 769–1023 | lg 1024–1280 | xl 1281+ |
|---|---|---|---|---|---|
space-lg | 32px | 40px | 48px | 56px | 56px |
space-md | 24px | 32px | 40px | 48px | 48px |
These two are not in tokens.json. Link /components/css/spacing.css and use var(--dimension-spacing-space-md) or var(--dimension-spacing-space-lg): the value changes at each breakpoint by itself, so never write the pixel values by hand. They apply to every page, not only to parts built in Storyblok. No space-xs, space-sm or space-xl exists yet.
Spacing is applied by combining a token with a consumer class.
A token defines the size only. It maps directly to a pixel value in the spacing scale.
The consumer says which edge or axis gets the space.
| Group | Class | Applies to |
|---|
One token and one consumer class per pattern.
<div class="space-24 mb-space"> Element </div>
Adds 24px space below the element.
<div class="space-12 px-space"> Content </div>
Adds 12px padding left and right.
<div class="space-24 gap-space"> <div>A</div> <div>B</div> </div>
Adds 24px spacing between child elements in both directions.
A strict directional reference. Each diagram maps one consumer class to one exact edge or axis. Blue marks the applied space; grey is the affected element or its children. Pick a token to redraw every diagram.
Use one token for external margin, internal padding and the distance between children. X combines left + right and Y combines top + bottom.
Always write the token with its pixel fallback. The list is generated from tokens.json.
.card { padding: var(--dimension-spacing-space-16, 16px); }
.item { margin: var(--dimension-spacing-space-24, 24px) var(--dimension-spacing-space-8, 8px); }
.grid { display: grid; gap: var(--dimension-spacing-space-24, 24px); }
section { padding: 0 var(--dimension-spacing-space-16, 16px); } /* xs */
@media (min-width: 640px) { section { padding: 0 var(--dimension-spacing-space-32, 32px); } } /* sm, md */
@media (min-width: 1024px) { section { padding: 0 var(--dimension-spacing-space-40, 40px); } } /* lg */
space-md / space-lg between a section’s own content blocks.