Spacing Tokens

Spacing Scale

Shift CSS uses a consistent spacing scale based on rem units:

Token	Value	Pixels (at 16px base)
--s-space-0	0	0px
--s-space-px	1px	1px
--s-space-0.5	0.125rem	2px
--s-space-1	0.25rem	4px
--s-space-1.5	0.375rem	6px
--s-space-2	0.5rem	8px
--s-space-2.5	0.625rem	10px
--s-space-3	0.75rem	12px
--s-space-3.5	0.875rem	14px
--s-space-4	1rem	16px
--s-space-5	1.25rem	20px
--s-space-6	1.5rem	24px
--s-space-7	1.75rem	28px
--s-space-8	2rem	32px
--s-space-9	2.25rem	36px
--s-space-10	2.5rem	40px
--s-space-11	2.75rem	44px
--s-space-12	3rem	48px
--s-space-14	3.5rem	56px
--s-space-16	4rem	64px
--s-space-20	5rem	80px
--s-space-24	6rem	96px

Using Spacing Tokens

In Custom CSS

.my-component {
  padding: var(--s-space-4);
  margin-bottom: var(--s-space-6);
  gap: var(--s-space-2);
}

With Utility Classes

<div class="s-p-4 s-mb-6 s-gap-2">
  Uses spacing scale
</div>

Component Spacing

Components use spacing tokens for internal consistency:

[s-card] {
  --_padding: var(--s-space-4);
}

[s-btn] {
  --_padding-x: var(--s-space-4);
  --_padding-y: var(--s-space-2);
}

[s-input] {
  --_padding-x: var(--s-space-3);
  --_padding-y: var(--s-space-2);
}

Container Width

:root {
  --s-container-max: 80rem;  /* 1280px */
  --s-container-padding: var(--s-space-4);
}

Customizing Spacing

Override Individual Values

:root {
  --s-space-4: 1.25rem;  /* Default: 1rem */
}

Tighter Spacing System

:root {
  --s-space-1: 0.2rem;
  --s-space-2: 0.4rem;
  --s-space-3: 0.6rem;
  --s-space-4: 0.8rem;
}

Looser Spacing System

:root {
  --s-space-1: 0.3rem;
  --s-space-2: 0.6rem;
  --s-space-3: 0.9rem;
  --s-space-4: 1.2rem;
}

Fluid Spacing (Advanced)

For responsive spacing that scales with viewport:

.hero {
  padding: clamp(var(--s-space-4), 5vw, var(--s-space-16));
}

Best Practices

Consistency

Use spacing tokens instead of arbitrary values:

/* Good */
.element {
  margin: var(--s-space-4);
}

/* Avoid */
.element {
  margin: 17px;
}

Vertical Rhythm

Use consistent vertical spacing for readability:

.prose > * + * {
  margin-top: var(--s-space-4);
}

.prose h2 {
  margin-top: var(--s-space-8);
}

Component Boundaries

Use larger spacing between components, smaller within:

.section {
  padding: var(--s-space-16) 0;
}

.section-content {
  gap: var(--s-space-4);
}