Spacing System

The Happy Sasquatch spacing system uses responsive clamp() values to create fluid, proportional layouts that adapt smoothly across all viewport sizes. This ensures consistent visual rhythm while optimizing for different screen sizes.

Space Scale

Our base spacing scale provides consistent values for margins, padding, and gaps throughout the interface.

Size	CSS Variable	Min Value	Max Value	Common Uses
XS	--space-xs	1.07rem	1.69rem	Tight spacing, icon gaps
S	--space-s	1.6rem	2.25rem	Small padding, list spacing
M	--space-m	2.4rem	3rem	Standard padding, card spacing
L	--space-l	3.6rem	4rem	Section padding, larger gaps
XL	--space-xl	5.31rem	5.4rem	Major component spacing
XXL	--space-xxl	6.75rem	8.1rem	Hero sections, major dividers

CSS Definitions:

--space-xs: clamp(1.6883440665rem, calc(-0.6179695824vw + 1.9108131162rem), 1.0666666667rem);
--space-s: clamp(2.2505626407rem, calc(-0.6466825454vw + 2.483368357rem), 1.6rem);
--space-m: clamp(3rem, calc(-0.5964214712vw + 3.2147117296rem), 2.4rem);
--space-l: clamp(3.999rem, calc(-0.3966202783vw + 4.1417833002rem), 3.6rem);
--space-xl: clamp(5.330667rem, calc(0.0689194831vw + 5.3058559861rem), 5.4rem);
--space-xxl: clamp(7.105779111rem, calc(0.9882911421vw + 6.7499942998rem), 8.1rem);

Section Spacing Scale

For larger layout sections, use the section-specific spacing variables. These provide more dramatic spacing for page-level layout.

Size	CSS Variable	Min Value	Max Value	Common Uses
XS	--section-space-xs	4.27rem	5.35rem	Compact sections
S	--section-space-s	6.4rem	6.88rem	Standard sections
M	--section-space-m	9rem	9.6rem	Major sections
L	--section-space-l	11.14rem	14.4rem	Large sections
XL	--section-space-xl	13.99rem	21.6rem	Hero sections
XXL	--section-space-xxl	17.35rem	32.4rem	Full-page dividers

CSS Definitions:

--section-space-xs: clamp(5.0650321995rem, calc(-0.7936039094vw + 5.3507296069rem), 4.2666666667rem);
--section-space-s: clamp(6.751687922rem, calc(-0.3495903797vw + 6.8775404587rem), 6.4rem);
--section-space-m: clamp(9rem, calc(0.5964214712vw + 8.7852882704rem), 9.6rem);
--section-space-l: clamp(11.997rem, calc(2.388667992vw + 11.1370795229rem), 14.4rem);
--section-space-xl: clamp(15.992001rem, calc(5.5745516899vw + 13.9851623917rem), 21.6rem);
--section-space-xxl: clamp(21.317337333rem, calc(11.0165632873vw + 17.3513745496rem), 32.4rem);

Gutter & Padding

Consistent horizontal spacing for content areas and containers.

Variable	Min Value	Max Value	Usage
--section-padding-x	2rem	9rem	Page-level horizontal padding
--gutter	2rem	9rem	Grid gutters, column gaps

CSS Definitions:

--section-padding-x: clamp(2rem, calc(6.958250497vw + -0.5049701789rem), 9rem);
--gutter: clamp(2rem, calc(6.958250497vw + -0.5049701789rem), 9rem);

Spacing Guidelines

When to Use Each Size

Spacing	Use Case Examples
XS	Icon-to-text gaps, tight button groups, inline elements
S	List item spacing, form field spacing, small component padding
M	Card padding, standard component gaps, paragraph spacing
L	Section padding (internal), between major components
XL	Between page sections, hero element spacing
XXL	Major page divisions, before/after hero sections

Spacing Patterns

Component Spacing

/* Card component */
.card {
  padding: var(--space-m);
  gap: var(--space-s);
}

/* Button group */
.button-group {
  gap: var(--space-xs);
}

/* Form fields */
.form-field {
  margin-bottom: var(--space-s);
}

Section Spacing

/* Page section */
.section {
  padding-top: var(--section-space-m);
  padding-bottom: var(--section-space-m);
  padding-left: var(--section-padding-x);
  padding-right: var(--section-padding-x);
}

/* Hero section */
.hero {
  padding-top: var(--section-space-xl);
  padding-bottom: var(--section-space-l);
}

Content Spacing

/* Article content */
.article {
  max-width: 75ch;
  margin: 0 auto;
}

.article > * + * {
  margin-top: var(--space-m);
}

.article h2 {
  margin-top: var(--space-xl);
}

Responsive Behavior

The clamp-based spacing system automatically adjusts between minimum and maximum values based on viewport width. This means:

1. No media queries needed for basic spacing adjustments
2. Smooth scaling rather than abrupt breakpoint changes
3. Consistent proportions maintained across all screen sizes

How Clamp Works

clamp(MIN, PREFERRED, MAX)

• MIN: The smallest value (used on narrow viewports)
• PREFERRED: A viewport-relative calculation
• MAX: The largest value (used on wide viewports)

Example Calculation

For --space-m:

--space-m: clamp(2.4rem, calc(-0.5964214712vw + 3.2147117296rem), 3rem);

• On a 320px viewport: ~2.4rem
• On a 1440px viewport: ~3rem
• Smoothly scales between these values

Best Practices

Do

• Use spacing variables consistently
• Match spacing to content importance (larger spacing = more emphasis)
• Maintain vertical rhythm with consistent spacing
• Use section spacing for page-level layout

Don't

• Mix pixel values with the spacing system
• Create custom spacing values for one-off uses
• Use inconsistent spacing for similar elements
• Apply section spacing to small components

CSS Usage Examples

/* Page layout */
.page-container {
  padding-inline: var(--section-padding-x);
}

/* Content section */
.content-section {
  padding-block: var(--section-space-m);
}

/* Card grid */
.card-grid {
  display: grid;
  gap: var(--gutter);
}

/* Sidebar layout */
.sidebar-layout {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--space-xl);
}

/* Stack layout (vertical) */
.stack > * + * {
  margin-block-start: var(--space-m);
}

/* Inline items */
.inline-items {
  display: flex;
  gap: var(--space-xs);
}