Spacing

A consistent spacing system creates visual rhythm and helps establish relationships between elements. The Kaharagia Design System uses a 4px base unit.

Spacing Scale

The spacing scale is based on multiples of 4px, providing a consistent rhythm throughout all interfaces. Use these values for margins, padding, and gaps.

Usage Guidelines

Small spacing (4px - 12px)

Use for tight relationships between related elements:

• Gap between icon and text in a button
• Padding inside small components like tags
• Space between list items

Medium spacing (16px - 32px)

Use for standard component spacing:

• Padding inside cards and containers
• Margins between paragraphs
• Grid gaps

Large spacing (40px - 96px)

Use for section-level spacing:

• Space between page sections
• Hero section padding
• Footer/header padding

Component Examples

Button Padding

Card Padding

Section Spacing

CSS Variables

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