Skip to main content

​
Spacing

The Axmed Design System uses a 4px base grid for consistent spatial rhythm across all components and layouts. Spacing tokens are named by their multiplier: --space-1 = 1×4px, --space-2 = 2×4px, and so on.

​
Spacing Scale

All spacing values are built on a 4px base unit, ensuring consistent alignment and rhythm throughout the interface.
TokenValueMultiplierCommon Usage
--space-00px—No spacing, reset
--space-0-52px0.5×Dividers, fine adjustments
--space-14px1×Icon gaps, inline spacing
--space-1-56px1.5×Between tight and compact
--space-28px2×Button padding, tag gaps
--space-312px3×Nav item padding, card internal
--space-416px4×Section padding, modal body
--space-520px5×Card padding, drawer header
--space-624px6×Modal container, drawer body
--space-832px8×Large gap between groups
--space-1040px10×Page section margins
--space-1248px12×Empty state vertical padding (md)
--space-1664px16×Large content separation
--space-2080px20×Empty state vertical padding (lg), hero sections
--space-0: 0px;
--space-0-5: 2px;    /* half-step — dividers, fine adjustments */
--space-1: 4px;      /* tight — icon gaps, inline spacing */
--space-1-5: 6px;    /* between tight and compact */
--space-2: 8px;      /* compact — button padding, tag gaps */
--space-3: 12px;     /* default — nav item padding, card internal */
--space-4: 16px;     /* comfortable — section padding, modal body */
--space-5: 20px;     /* roomy — card padding, drawer header */
--space-6: 24px;     /* generous — modal container, drawer body */
--space-8: 32px;     /* section — large gap between groups */
--space-10: 40px;    /* panel — page section margins */
--space-12: 48px;    /* spacious — empty state vertical padding (md) */
--space-16: 64px;    /* page — large content separation */
--space-20: 80px;    /* hero — empty state vertical padding (lg) */

​
Spacing Categories

​
Micro (0-4px)

Use for very tight spacing like icon gaps, dividers, and fine adjustments:
  • --space-0 (0px): Reset spacing
  • --space-0-5 (2px): Hairline dividers
  • --space-1 (4px): Icon-to-text gaps
  • --space-1-5 (6px): Small element spacing

​
Compact (8-12px)

Use for component-internal spacing like button padding and navigation items:
  • --space-2 (8px): Button padding, tag gaps
  • --space-3 (12px): Nav item padding, card internal spacing

​
Default (16-24px)

Use for comfortable spacing in modals, cards, and sections:
  • --space-4 (16px): Section padding, modal body
  • --space-5 (20px): Card padding, drawer header
  • --space-6 (24px): Modal container, drawer body

​
Large (32-48px)

Use for clear separation between groups and sections:
  • --space-8 (32px): Large gaps between UI groups
  • --space-10 (40px): Page section margins
  • --space-12 (48px): Spacious vertical padding

​
Extra Large (64-80px)

Use for page-level separation and hero sections:
  • --space-16 (64px): Large content separation
  • --space-20 (80px): Hero sections, empty state padding

​
Usage Examples

​
Component Padding

/* Button — compact padding */
.button {
  padding: var(--space-2) var(--space-4);
}

/* Card — comfortable padding */
.card {
  padding: var(--space-5);
}

/* Modal body — generous padding */
.modal-body {
  padding: var(--space-6);
}

​
Layout Spacing

/* Stack layout with default gap */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Inline elements with tight gap */
.inline-group {
  display: flex;
  gap: var(--space-1);
}

/* Section separation */
.section {
  margin-bottom: var(--space-8);
}

​
Icon and Text Spacing

/* Icon next to text */
.icon-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Button with icon */
.button-with-icon {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

​
Grid Layouts

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* Form grid */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-4);
}

​
Page Layout

/* Page container */
.page-container {
  padding: var(--space-10) var(--space-6);
}

/* Section spacing */
.page-section + .page-section {
  margin-top: var(--space-16);
}

/* Hero section */
.hero {
  padding: var(--space-20) 0;
}

​
Design Principles

​
4px Base Grid

All spacing values are multiples of 4px, which provides:
  • Consistency: Predictable spacing across all components
  • Flexibility: Fine-grained control with half-steps (2px) when needed
  • Alignment: Elements naturally align to a common grid

​
Progressive Scale

The spacing scale grows progressively, with smaller increments at tight spacings and larger jumps at generous spacings:
  • Tight range (0-12px): 2-4px increments
  • Medium range (16-24px): 4-8px increments
  • Large range (32-80px): 8-16px increments

​
Semantic Naming

Token names indicate their scale multiplier (e.g., --space-4 = 4×4px = 16px), making it easy to understand relative sizes and choose appropriate spacing.

​
Responsive Spacing

While spacing tokens are fixed values, you can adjust them responsively using media queries: 
.container {
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .container {
    padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .container {
    padding: var(--space-10);
  }
}

​
Best Practices

Always use spacing tokens rather than hardcoded pixel values. This ensures consistency and makes it easier to maintain a cohesive spacing system.
/* Good */
margin-bottom: var(--space-4);

/* Avoid */
margin-bottom: 16px;
Use tighter spacing (space-1 to space-3) for related elements within a component, and larger spacing (space-6 to space-10) for separating distinct sections.
Use the same spacing token for similar types of separation throughout your interface. For example, always use --space-4 for spacing between form fields.
Use --space-0-5 and --space-1-5 sparingly, only when standard increments don’t achieve the desired visual effect (e.g., hairline dividers).
All spacing tokens are defined in _spacing.scss and automatically included when you import the design system’s CSS.

Build docs developers (and LLMs) love

Get started for freeTalk to us