Spacing

A consistent spacing scale based on 4px increments for margins, padding, and gaps.

Spacing Scale

Token	Value	Typical Use
xxsmall	4px	Inline icon gaps, tight element spacing
xsmall	8px	Related element spacing, small padding
small	12px	Form field gaps, compact sections
medium	16px	Standard padding, paragraph spacing
large	24px	Section padding, card content
xlarge	32px	Section margins, major divisions
xxlarge	40px	Page section spacing
xxxlarge	56px	Hero sections, major page divisions

Other Size Tokens

Token	Value	Use
container.maxWidth	1140px	Main content container width
border.standard	2px	Default border thickness

Usage

import theme from '@shelter-england/theme';

// Spacing
theme.size.spacing.medium; // '16px'
theme.size.spacing.large; // '24px'

// Container
theme.size.container.maxWidth; // '1140px'

// Border
theme.size.border.standard; // '2px'

import styled from 'styled-components';

const Card = styled.div`
  padding: ${({ theme }) => theme.size.spacing.large};
  margin-bottom: ${({ theme }) => theme.size.spacing.medium};
`;