Spacing

The Roadie Design System uses a consistent spacing scale through PandaCSS tokens. These tokens help maintain visual rhythm and consistency across your application.

Spacing scale

Our spacing scale follows an 8px base unit (where 100 = 8px), providing a predictable and harmonious spacing system:

{
  '025': '2px',  // Quarter base unit
  '050': '4px',  // Half base unit
  '075': '6px',  // Three-quarter base unit
  '100': '8px',  // Base unit
  '150': '12px', // 1.5x base unit
  '200': '16px', // 2x base unit
  '300': '24px', // 3x base unit
  '400': '32px', // 4x base unit
  '500': '40px', // 5x base unit
  '600': '48px', // 6x base unit
  '800': '64px', // 8x base unit
  '1000': '80px', // 10x base unit
  '1200': '96px', // 12x base unit
  '1600': '128px' // 16x base unit
}

Visual scale

Using spacing with View

The View component is our primary layout component and accepts all spacing-related style props from PandaCSS. Here are the most commonly used spacing properties:

Padding and margin

// Using individual padding properties
<View pt='100' pb='200' px='100'>
  Content
</View>

// Using shorthand padding
<View p='100'>
  Content
</View>

// Note: Avoid margins, use gap instead
// Using individual margin properties
<View mt='100' mb='200' mx='100'>
  Content
</View>

// Using shorthand margin
<View m='100'>
  Content
</View>

Gap

When using View as a flex container, you can control the space between items using the gap property:

<View gap='100'>
  <View>Item 1</View>
  <View>Item 2</View>
  <View>Item 3</View>
</View>

You can also set different horizontal and vertical gaps:

<View display='grid' gridTemplateColumns='repeat(2, 1fr)' rowGap='200' columnGap='400'>
  <View bg='neutral.surface.subtle' p='100'>Item 1</View>
  <View bg='neutral.surface.subtle' p='100'>Item 2</View>
  <View bg='neutral.surface.subtle' p='100'>Item 3</View>
  <View bg='neutral.surface.subtle' p='100'>Item 4</View>
</View>

Best practices

1. Use tokens, not magic numbers

// ✅ Good
<View pt='100'>

// ❌ Bad
<View pt='17px'>

2. Consistent spacing patterns

• Use smaller spacing (025-100) for related elements
• Use medium spacing (100-400) for separating components
• Use larger spacing (500+) for major layout sections

3. Responsive spacing

<View
  mt={{ base: '100', md: '200', lg: '300' }}
  px={{ base: '100', md: '200' }}
>
  Content
</View>

4. Layout composition

// Stack items with consistent spacing
<View gap='100' alignItems='stretch'>
  <View p='100' bg='neutral.2'>Item 1</View>
  <View p='100' bg='neutral.2'>Item 2</View>
</View>

5. Nesting and spacing

• Avoid mixing margin and padding at the same nesting level
• Use gap for consistent spacing between children
• Consider using padding for container elements

Common patterns

Card layout

<View p='200' gap='200'>
  <Heading>Card Title</Heading>
  <Text>Card content goes here</Text>
  <Button>Action</Button>
</View>

List layout

<View as='ul' gap='050'>
  <View as='li'>List item 1</View>
  <View as='li'>List item 2</View>
  <View as='li'>List item 3</View>
</View>

Grid layout

<View
  display='grid'
  gap='100'
  gridTemplateColumns='repeat(auto-fit, minmax(200px, 1fr))'
>
  <View p='100'>Grid item 1</View>
  <View p='100'>Grid item 2</View>
  <View p='100'>Grid item 3</View>
</View>

Tips for responsive design

1. Start with mobile spacing and scale up
2. Use responsive arrays or objects for different breakpoints
3. Consider content density at different screen sizes
4. Use consistent spacing patterns within components

Remember that consistent spacing is key to creating a polished, professional interface. Always use the spacing scale tokens rather than arbitrary values to maintain visual harmony across your application.