Spacing

A 4px base unit system for consistent spatial rhythm.

Spacing Scale

Token	Value	Use
`xs`	4px	Tight internal padding, icon gaps
`sm`	8px	Internal component padding
`md`	16px	Standard spacing between elements
`lg`	24px	Section spacing
`xl`	32px	Page-level spacing
`xxl`	48px	Major section breaks

Usage

import { semanticSpacing } from '@gtcx/tokens';
 
const cardStyle = {
  padding: semanticSpacing.md,          // 16px
  marginBottom: semanticSpacing.lg,     // 24px
  gap: semanticSpacing.sm,              // 8px
};

Layout Spacing

Context	Spacing
Page padding	24px (lg)
Card internal padding	16px (md)
Form field gap	16px (md)
Button internal padding	8px 16px
Icon-to-text gap	8px (sm)
Section divider margin	24px (lg)

Guidelines

Always use the spacing scale — avoid arbitrary pixel values
Use md (16px) as the default spacing
Use lg (24px) between major sections
Use sm (8px) for tight groupings within a component
Vertical rhythm: maintain consistent spacing between block elements

Typography Grid