Spacing System

OxyMade’s Spacing System provides a consistent, mathematical spacing scale for margins, padding, and gaps throughout your designs.

Overview

The spacing system includes:

• 24 numeric spacing values - A comprehensive scale from tiny to large
• 8 semantic section spacings - Named sizes for page sections
• 7 border radius values - Consistent rounded corners
• CSS variables - Use anywhere in your styles

Spacing Scale

Numeric Spacing Values

All spacing values are available as CSS variables:

Usage

.card {
  padding: var(--s6);
  margin-bottom: var(--s8);
}

.gap-large {
  gap: var(--s12);
}

Section Spacing

Semantic spacing for page sections:

Usage

.section {
  padding-top: var(--ss-lg);
  padding-bottom: var(--ss-lg);
}

.hero-section {
  padding-top: var(--ss-xl);
  padding-bottom: var(--ss-xl);
}

Border Radius

Consistent border radius values:

Usage

.card {
  border-radius: var(--radius-lg);
}

.button {
  border-radius: var(--radius-md);
}

.avatar {
  border-radius: var(--radius-full);
}

Utility Classes

OxyMade generates utility classes for common spacing applications.

Padding Classes

Apply padding with utility classes:

<div class="p-4">Padding all sides</div>
<div class="px-6">Horizontal padding</div>
<div class="py-8">Vertical padding</div>
<div class="pt-4">Top padding only</div>
<div class="pb-4">Bottom padding only</div>
<div class="pl-4">Left padding only</div>
<div class="pr-4">Right padding only</div>

Margin Classes

Apply margins similarly:

<div class="m-4">Margin all sides</div>
<div class="mx-auto">Center horizontally</div>
<div class="my-8">Vertical margin</div>
<div class="mt-4">Top margin only</div>
<div class="mb-4">Bottom margin only</div>

Gap Classes

For flexbox and grid gaps:

<div class="flex gap-4">Flex with gap</div>
<div class="grid gap-6">Grid with gap</div>

Responsive Spacing

Apply different spacing at breakpoints:

<div class="p-4 lg-p-8 xl-p-12">
  Responsive padding
</div>

Breakpoint prefixes:

• sm- - Phone portrait
• md- - Phone landscape
• lg- - Tablet portrait
• xl- - Tablet landscape

Oxygen Integration

Using in Oxygen

After syncing, spacing variables appear in Oxygen’s variable picker:

1. Select any spacing property (padding, margin, gap)
2. Click the variable icon
3. Find OxyMade spacing variables

Or type directly:

{var-s8}
{var-ss-lg}
{var-radius-md}

Selector Collections

Spacing selectors are organized in collections:

• OxyMade Spacing - Numeric spacing utilities
• OxyMade Section Spacing - Section padding utilities
• OxyMade Radius - Border radius utilities

Best Practices

Use the Scale

Stick to scale values for consistency:

/* Good - using scale */
.element {
  padding: var(--s6);
  margin-bottom: var(--s8);
}

/* Avoid - arbitrary values */
.element {
  padding: 23px;
  margin-bottom: 37px;
}

Semantic Spacing

Use section spacing for page-level layout:

/* Good - semantic naming */
.hero {
  padding: var(--ss-xl) 0;
}

.content-section {
  padding: var(--ss-lg) 0;
}

/* Less ideal - numeric for sections */
.hero {
  padding: var(--s24) 0;
}

Consistent Gaps

Use consistent gaps in grids and flex containers:

.card-grid {
  display: grid;
  gap: var(--s6);
}

.button-group {
  display: flex;
  gap: var(--s3);
}

Relationship Between Elements

Create visual relationships:

.card {
  padding: var(--s6);
}

.card-title {
  margin-bottom: var(--s3); /* Smaller gap = related */
}

.card-body {
  margin-bottom: var(--s6); /* Larger gap = separate */
}

Configuration

Default Values

Spacing values are defined in your design set. The Layers design set includes:

{
  "s1": "0.25rem",
  "s2": "0.5rem",
  "s3": "0.75rem",
  "s4": "1rem",
  "s5": "1.25rem",
  "s6": "1.5rem",
  ...
}

Custom Spacing

To add custom spacing values:

1. Go to OxyMade > Settings
2. Navigate to Spacing configuration
3. Add custom variables
4. Re-sync with Oxygen

Troubleshooting

Variables Not Available

1. Verify variables are installed (check setup status)
2. Re-run the variables sync
3. Clear Oxygen’s cache

Inconsistent Spacing

1. Check you’re using the correct variable names
2. Verify no conflicting styles override values
3. Use browser dev tools to inspect computed values

Section Spacing Too Large/Small

1. Review your section spacing values
2. Consider adjusting the scale
3. Use numeric spacing if semantic doesn’t fit

Related

• Grid & Flexbox
• Typography System
• CSS Variables Reference