Spacing & Layout

The design system uses an 8px grid system for consistent spacing across all components.

Base Grid

All spacing values are multiples of 8px:

Token	Value	Usage
$spacing-xs	4px	Tight spacing (icon gaps)
$spacing-sm	8px	Compact spacing
$spacing-md	12px	Default component padding
$spacing-base	16px	Standard spacing
$spacing-lg	24px	Section spacing
$spacing-xl	32px	Large gaps
$spacing-2xl	48px	Page-level spacing

Border Radius

Token	Value	Usage
$radius-sm	4px	Small elements (chips, badges)
$radius-md	8px	Default (cards, inputs)
$radius-lg	12px	Large containers (dialogs)
$radius-full	9999px	Pills and circular elements

Component Sizing

Button Sizes

Size	Height	Padding
small	36px	8px 16px
large	44px	12px 24px

Input Sizes

Size	Height
small	36px
medium	40px
large	44px

Responsive Breakpoints

@use '@yellowcard/b2b-design-system/scss' as *;

// Available breakpoints via include-media
// sm: 576px
// md: 768px
// lg: 992px
// xl: 1200px

@include media('>=md') {
  .container {
    max-width: 720px;
  }
}