Spacing

Synchronicity uses a base-4 spacing scale that creates harmonious, consistent layouts. The scale provides enough granularity for precise control while maintaining visual rhythm.

Spacing Scale

space-14px

space-28px

space-312px

space-416px

space-520px

space-624px

space-832px

space-1040px

space-1248px

space-1664px

space-2080px

space-2496px

Semantic Spacing

Map raw spacing values to semantic purposes:

Token	Value	Usage
xs	4px	Tight spacing, icon gaps
sm	8px	Compact elements, inline spacing
md	16px	Standard padding, card spacing
lg	24px	Section spacing, generous padding
xl	32px	Major sections, screen padding
2xl	48px	Hero spacing, large gaps
3xl	64px	Page sections, major dividers

Layout Spacing

Specific tokens for common layout patterns:

const layout = {
  screenPadding: 16,      // Horizontal screen margins
  sectionGap: 32,         // Between major sections
  cardPadding: 16,        // Inside cards
  listItemGap: 12,        // Between list items
  inlineGap: 8,           // Between inline elements
  iconTextGap: 8,         // Between icon and label
};

Touch Targets

Minimum sizes for interactive elements:

Token	Size	Usage
touch-min	44px	Minimum touch target (Apple HIG)
touch-comfortable	48px	Comfortable touch size
touch-large	56px	Primary action buttons

Caution

Always ensure touch targets are at least 44x44 points for accessibility. This is especially important for the contemplative nature of Synchronicity where rushed, frustrated tapping should be avoided.

Usage in Code

import { useTheme } from '@synchronicity/react-native';

function HexagramCard({ hexagram }) {
  const { spacing } = useTheme();

  return (
    <View style={{
      padding: spacing.md,
      marginBottom: spacing.lg,
      gap: spacing.sm,
    }}>
      <Text>{hexagram.name}</Text>
      <Text>{hexagram.description}</Text>
    </View>
  );
}

Or use primitives directly:

import { spacing } from '@synchronicity/tokens/primitives';

const styles = StyleSheet.create({
  container: {
    padding: spacing['space-4'],
    gap: spacing['space-2'],
  },
});

Best Practices

1. Use the scale - Avoid arbitrary pixel values; stick to the scale
2. Be consistent - Same spacing for same relationships across screens
3. Create breathing room - Contemplative apps need generous whitespace
4. Consider touch - Interactive elements need adequate spacing

Spacing Hierarchy

Screen edge padding    → xl (32px)
Section gaps           → 2xl (48px)
Card padding           → md (16px)
List item gaps         → sm (8px)
Inline element gaps    → xs (4px)

This creates a clear visual hierarchy where major divisions have more space than minor ones.