<Card className="p-md">         {/* padding: 16px on all sides */}

// Horizontal padding (left + right)
<Button className="px-sm">      {/* padding-left: 12px, padding-right: 12px */}

// Vertical padding (top + bottom)
<Input className="py-xs">       {/* padding-top: 8px, padding-bottom: 8px */}

// Individual sides
<CardHeader className="pt-lg">  {/* padding-top: 24px */}
<CardContent className="pb-md"> {/* padding-bottom: 16px */}
<FormLabel className="pl-sm">   {/* padding-left: 12px */}
<Badge className="pr-xs">       {/* padding-right: 8px */

// All sides margin
<Section className="m-lg">      {/* margin: 24px on all sides */}

// Horizontal margin (left + right)
<Dialog className="mx-xl">      {/* margin-left: 32px, margin-right: 32px */}

// Vertical margin (top + bottom)
<Alert className="my-sm">       {/* margin-top: 12px, margin-bottom: 12px */}

// Individual sides
<Title className="mt-md">       {/* margin-top: 16px */}
<Content className="mb-lg">     {/* margin-bottom: 24px */}
<Icon className="ml-xs">        {/* margin-left: 8px */}
<Text className="mr-sm">        {/* margin-right: 12px */

// Flex and grid gap
<View className="gap-sm">       {/* gap: 12px between all children */}
<FormItem className="gap-xs">   {/* gap: 8px between form elements */}

// Directional gaps (when supported)
<View className="gap-x-md">     {/* column-gap: 16px (horizontal spacing) */}
<View className="gap-y-lg">     {/* row-gap: 24px (vertical spacing) */

// Vertical spacing between children
<View className="space-y-sm">   {/* margin-top: 12px on all children except first */}
<AlertDialog className="space-y-md"> {/* margin-top: 16px between dialog elements */}

// Horizontal spacing between children
<ButtonGroup className="space-x-xs"> {/* margin-left: 8px on all children except first */

// From card.tsx - Complex padding combinations
<Card className="p-lg">              {/* 24px padding all sides */}
  <CardHeader className="pb-xs">     {/* 8px bottom padding */}
    <CardTitle className="mb-sm">Card Title</CardTitle>
  </CardHeader>
  <CardContent className="gap-md">   {/* 16px gap between children */}
    <Text>Content here</Text>
  </CardContent>
</Card>

// From form.tsx - Form spacing patterns
<FormItem className="gap-sm">        {/* 12px gap between form elements */}
  <FormLabel className="mb-xs">Email</FormLabel>
  <Input className="px-sm py-xs" />  {/* 12px horizontal, 8px vertical padding */}
  <FormDescription className="mt-xs"> {/* 8px top margin */}
    Enter your email address
  </FormDescription>
</FormItem>

// From menubar.tsx - Navigation spacing
<MenubarItem className="px-xs py-xs gap-xs"> {/* 8px padding and gap */}
  <Icon className="mr-xs" />         {/* 8px right margin */}
  <Text>Menu Item</Text>
</MenubarItem>

.custom-component {
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  gap: var(--space-sm);
}

/* Responsive spacing with custom properties */
.responsive-section {
  padding: var(--space-md);
}

@media (min-width: 768px) {
  .responsive-section {
    padding: var(--space-lg);
  }
}

// T-shirt sizing spacing constants
const spacing = {
  none: 0,      // NONE
  xxs: 4,       // XXS - Extra Extra Small
  xs: 8,        // XS - Extra Small  
  sm: 12,       // SM - Small
  md: 16,       // MD - Medium (base)
  lg: 24,       // LG - Large
  xl: 32,       // XL - Extra Large
  xxl: 40,      // XXL - Extra Extra Large
  xxxl: 48,     // XXXL - Extra Extra Extra Large
  xxxxl: 64,    // XXXXL - Maximum
};

const dynamicSpacing = {
  paddingHorizontal: spacing.md,    // 16px - Medium spacing
  paddingVertical: spacing.sm,      // 12px - Small spacing  
  marginBottom: spacing.lg,         // 24px - Large spacing
};

<View style={dynamicSpacing}>
  <Content />
</View>

// Minimum spacing between interactive elements
<View className="space-y-2">    {/* 8px minimum for touch targets */}
  <Button>Action 1</Button>
  <Button>Action 2</Button>
</View>

// Generous spacing for better accessibility
<View className="space-y-4">    {/* 16px for improved usability */}
  <Button>Primary action</Button>
  <Button>Secondary action</Button>
</View>

# Find arbitrary spacing values
grep -r "m-\[" components/
grep -r "p-\[" components/

# Find spacing patterns
grep -r "className.*p-" components/ | sort | uniq -c