Spacing

The spacing system is based on a 4px grid for consistent, harmonious layouts.

Spacing Scale

Token	Value	Pixels	Usage
--spacing-0	0	0px	Reset
--spacing-0.5	0.125rem	2px	Hairline gaps
--spacing-1	0.25rem	4px	Tight gaps, icon padding
--spacing-2	0.5rem	8px	Button padding, compact spacing
--spacing-3	0.75rem	12px	Input padding, list gaps
--spacing-4	1rem	16px	Default gap, card padding
--spacing-5	1.25rem	20px	Medium gaps
--spacing-6	1.5rem	24px	Section padding
--spacing-8	2rem	32px	Large section gaps
--spacing-10	2.5rem	40px	Page margins
--spacing-12	3rem	48px	Hero sections
--spacing-16	4rem	64px	Major sections

Layout Components

Stack

Vertical or horizontal layout with consistent spacing:

import { Stack } from '@kikumi3n/ui';

// Vertical stack (default)
<Stack gap={4}>
  <Button>First</Button>
  <Button>Second</Button>
</Stack>

// Horizontal stack
<Stack direction="horizontal" gap={2}>
  <Badge>Tag 1</Badge>
  <Badge>Tag 2</Badge>
</Stack>

Grid

Responsive grid layout:

import { Grid } from '@kikumi3n/ui';

<Grid columns={3} gap={4}>
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
</Grid>

Container

Centered, max-width container:

import { Container } from '@kikumi3n/ui';

<Container maxWidth="lg">
  <p>Centered content with max-width</p>
</Container>

Size	Max Width
sm	640px
md	768px
lg	1024px
xl	1280px

Usage in CSS

.card {
  padding: var(--spacing-4);        /* 16px */
  margin-bottom: var(--spacing-6);  /* 24px */
  gap: var(--spacing-2);            /* 8px */
}

Best Practices

• Always use spacing tokens — never hardcode pixel values
• Use the Stack component for most layouts instead of manual flexbox
• The 4px grid ensures visual harmony: 4, 8, 12, 16, 24, 32, 48, 64