Skip to content

Spacing

Stratum uses a 4px base grid. Every spacing value in every component derives from this scale — no hardcoded pixel values exist in the codebase.

Import

import { spacing } from '@/tokens';

Scale

Token	Value	Usage
`spacing.xs`	4px	Tight gaps between related elements (icon + label, chip rows)
`spacing.sm`	8px	Inner component padding, small gaps between elements
`spacing.md`	16px	Section padding, standard gap between components
`spacing.lg`	24px	Generous section padding, wider gaps
`spacing.xl`	32px	Page-level vertical rhythm, large section separation
`spacing['2xl']`	48px	Hero section spacing, large vertical gaps
`spacing['3xl']`	64px	Maximum separation, screen-level whitespace

Usage

import { spacing } from '@/tokens';
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    padding: spacing.md,       // 16
    gap: spacing.sm,           // 8
    marginBottom: spacing.xl,  // 32
  },
  card: {
    paddingHorizontal: spacing.lg,  // 24
    paddingVertical: spacing.md,    // 16
  },
});

In the theme

Spacing tokens are global constants, not theme-specific — the 4px grid is consistent across Slate, Obsidian, and Quartz. Only radius, border, and shadow values vary per theme.

Do / Don’t

Do: Use spacing.* tokens for all layout values.

<View style={{ padding: spacing.md, gap: spacing.sm }}>

Don’t: Hardcode pixel values.

// ✗
<View style={{ padding: 16, gap: 8 }}>
// ✓
<View style={{ padding: spacing.md, gap: spacing.sm }}>