Skip to main content

Spacing

Consistent spacing creates visual rhythm and improves readability in Teardrop Design System.

Spacing System​

Teardrop uses an 8px base unit spacing scale. All spacing values are multiples of 8px, ensuring consistency and alignment.

Spacing Scale​

TokenValuePixelsUsage
spacing.xsmall0.54pxTight spacing, icons
spacing.small18pxCompact spacing
spacing.medium216pxDefault spacing
spacing.large324pxComfortable spacing
spacing.xlarge432pxGenerous spacing
spacing.xxlarge648pxSection spacing
spacing.xxxlarge864pxLarge section spacing (Studios)

Using Spacing​

In Components​

import { Box, Stack, Inline } from '@hardwater/teardrop';

// Padding
<Box padding="medium">Content</Box>
<Box paddingX="large" paddingY="small">Content</Box>

// Gap in Stack
<Stack gap="medium">
  <div>Item 1</div>
  <div>Item 2</div>
</Stack>

// Gap in Inline
<Inline gap="small">
  <Button>Action 1</Button>
  <Button>Action 2</Button>
</Inline>

In CSS​

.card {
  padding: var(--teardrop-spacing-medium);
  margin-bottom: var(--teardrop-spacing-large);
}

.flex-container {
  gap: var(--teardrop-spacing-small);
}

With Tokens​

import { tokens } from '@hardwater/teardrop';

const style = {
  padding: tokens.spacing.medium,
  marginTop: tokens.spacing.large,
  gap: tokens.spacing.small,
};

Spacing Patterns​

Component Padding​

Use consistent padding for similar components:

// Cards
<Box padding="medium">Card content</Box>

// Buttons
<Button paddingX="medium" paddingY="small">Click me</Button>

// Inputs
<Input paddingX="small" paddingY="small" />

Layout Spacing​

Use spacing to create visual hierarchy:

<Stack gap="large">
  <Section>
    <Heading>Section 1</Heading>
    <Content />
  </Section>
  <Section>
    <Heading>Section 2</Heading>
    <Content />
  </Section>
</Stack>

Inline Spacing​

Space related elements closely, unrelated elements further:

// Related elements - small gap
<Inline gap="small">
  <Icon />
  <Text>Label</Text>
</Inline>

// Unrelated elements - medium gap
<Inline gap="medium">
  <Button>Save</Button>
  <Button>Cancel</Button>
</Inline>

Spacing Guidelines​

Padding vs Margin​

  • Padding - Space inside a component (between border and content)
  • Margin - Space outside a component (between components)
// Padding - internal spacing
<Box padding="medium">Content</Box>

// Margin - external spacing
<Box marginBottom="large">Content</Box>

Consistent Spacing​

Use the same spacing value for similar relationships:

// All form fields have the same spacing
<Stack gap="medium">
  <Input label="Email" />
  <Input label="Password" />
  <Input label="Confirm" />
</Stack>

Visual Rhythm​

Create visual rhythm with consistent spacing:

// Consistent spacing creates rhythm
<Stack gap="large">
  <Card />
  <Card />
  <Card />
</Stack>

Responsive Spacing​

Adjust spacing for different screen sizes:

<Box
  padding={{ mobile: 'small', desktop: 'medium' }}
  gap={{ mobile: 'small', desktop: 'large' }}
>
  Content
</Box>

Best Practices​

  1. Use the scale - Always use predefined spacing tokens
  2. Be consistent - Use the same spacing for similar relationships
  3. Create rhythm - Use consistent spacing to create visual rhythm
  4. Consider context - Adjust spacing based on content density
  5. Test on mobile - Ensure spacing works on small screens

Spacing Tokens​

Access spacing through the token system:

import { tokens } from '@hardwater/teardrop';

tokens.spacing.xsmall   // 4px
tokens.spacing.small    // 8px
tokens.spacing.medium   // 16px
tokens.spacing.large    // 24px
tokens.spacing.xlarge   // 32px
tokens.spacing.xxlarge  // 48px

Resources​