Skip to main content

Styles

Design tokens providing colours, typography, and spacing values. Import the theme to access tokens directly or use them within styled-components.

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

// Direct colour access
theme.colors.red; // #EB001F
theme.colors.grey80; // #333333

// Semantic palette
theme.palette.brand.shelter; // #EB001F
theme.palette.text.default; // #333333
theme.palette.text.link; // #2462F5

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

// Typography sizes
theme.size.text.base; // 18px
theme.size.lineHeight.base; // 1.4

Sections​

  • Colours - Brand palette, UI colours, and accessibility-tested combinations
  • Typography - Typefaces, scales, and text styles
  • Spacing - Consistent spacing scale based on 4px increments