Foundations

Spacing

Consistent spacing system based on a 4px base unit.

Spacing Scale

Token Value Preview
--spacing-0 0
--spacing-0-5 0.125rem
--spacing-1 0.25rem
--spacing-2 0.5rem
--spacing-3 0.75rem
--spacing-4 1rem
--spacing-5 1.25rem
--spacing-6 1.5rem
--spacing-8 2rem
--spacing-10 2.5rem
--spacing-12 3rem
--spacing-16 4rem
--spacing-20 5rem
--spacing-24 6rem

Component Spacing

ComponentPaddingToken
Button (sm)8px 12pxspacing-2 / spacing-3
Button (md)10px 16pxspacing-2.5 / spacing-4
Button (lg)12px 24pxspacing-3 / spacing-6
Input10px 12pxspacing-2.5 / spacing-3
Card16 - 24pxspacing-4 - spacing-6
Modal24pxspacing-6

CSS Variables

spacing.css css 
:root {
  --spacing-0: 0;
  --spacing-0-5: 0.125rem;   /* 2px */
  --spacing-1: 0.25rem;      /* 4px */
  --spacing-2: 0.5rem;       /* 8px */
  --spacing-3: 0.75rem;      /* 12px */
  --spacing-4: 1rem;         /* 16px */
  --spacing-5: 1.25rem;      /* 20px */
  --spacing-6: 1.5rem;       /* 24px */
  --spacing-8: 2rem;         /* 32px */
  --spacing-10: 2.5rem;      /* 40px */
  --spacing-12: 3rem;        /* 48px */
  --spacing-16: 4rem;        /* 64px */
  --spacing-20: 5rem;        /* 80px */
  --spacing-24: 6rem;        /* 96px */
}