The Story of Festa's spacing
Breathing Room for Purpose
Spacing is more than empty pixels—it's the breath between words in a conversation, the pause that gives meaning to movement. Our spacing system creates visual rhythm and hierarchy that guides users through transformative journeys with clarity and calm.
Every margin, every padding value, every gap serves a greater purpose: to reduce cognitive overwhelm, honor user attention, and create digital spaces where social impact organizations can share their mission without visual noise. Generous whitespace is not wasted space—it's intentional design that respects both content and reader.
Why 4/8px Grid?
The 4/8px grid system provides mathematical harmony and flexibility for both small and large spacing needs:
- Base Unit (4px): Small enough for fine-tuned control, large enough to remain visible
- Major Unit (8px): Creates strong vertical rhythm and comfortable breathing room
- Scalable: All values are multiples of 4px, ensuring pixel-perfect alignment
- Accessible: Generates sufficient whitespace for readability and tap targets (min 44px)
- Predictable: Developers and designers share a common spacing language
Spacing Scale
Our spacing scale follows Tailwind CSS conventions, using a numeric scale from 0 to 96. Each unit corresponds to a specific pixel and rem value.
Spacing Tokens
| Token | Pixels | REM | Usage |
|---|---|---|---|
| 0 | 0px | 0rem | Reset spacing, remove gaps |
| 0.5 | 2px | 0.125rem | Hairline spacing, fine details |
| 1 | 4px | 0.25rem | Tight spacing, inline elements |
| 1.5 | 6px | 0.375rem | Extra tight spacing |
| 2 | 8px | 0.5rem | Base spacing unit, small gaps |
| 2.5 | 10px | 0.625rem | Compact spacing |
| 3 | 12px | 0.75rem | Small spacing between elements |
| 3.5 | 14px | 0.875rem | Medium-small spacing |
| 4 | 16px | 1rem | Standard spacing, comfortable gaps |
| 5 | 20px | 1.25rem | Medium spacing between groups |
| 6 | 24px | 1.5rem | Large spacing, section padding |
| 7 | 28px | 1.75rem | Extra large spacing |
| 8 | 32px | 2rem | Major spacing, section breaks |
| 9 | 36px | 2.25rem | Generous spacing |
| 10 | 40px | 2.5rem | XL spacing, large sections |
| 11 | 44px | 2.75rem | Extra XL spacing |
| 12 | 48px | 3rem | 2XL spacing, major sections |
| 14 | 56px | 3.5rem | 3XL spacing, hero sections |
| 16 | 64px | 4rem | 4XL spacing, large hero padding |
| 20 | 80px | 5rem | 5XL spacing, major dividers |
| 24 | 96px | 6rem | 6XL spacing, extra-large sections |
Note: Values use rem units for accessibility. 1rem = 16px at default browser settings, allowing users to scale text size.
Stack Patterns (Vertical Spacing)
Stack utilities (space-y-*) create consistent vertical rhythm between stacked elements. Use these for lists, paragraphs, and vertically flowing content.
Tight Stack
space-y-1
Gap: 4px
Dense lists, inline metadata, tightly packed content
Example: User profile metadata, tag lists, breadcrumb navigation
Live Preview:
Compact Stack
space-y-2
Gap: 8px
List items, form labels, navigation menus
Example: Sidebar navigation, form field groups, bullet lists
Live Preview:
Comfortable Stack
space-y-4
Gap: 16px
Paragraphs, card content, form sections
Example: Article paragraphs, form sections, card layouts
Live Preview:
Generous Stack
space-y-6
Gap: 24px
Section content, major groups, card grids
Example: Content sections, feature cards, step indicators
Live Preview:
Spacious Stack
space-y-8
Gap: 32px
Major sections, page sections, distinct content areas
Example: Page sections, hero content, major dividers
Live Preview:
Extra Spacious Stack
space-y-12
Gap: 48px
Large page sections, landing pages, hero areas
Example: Landing page sections, hero layouts, major page divisions
Live Preview:
Cluster Patterns (Horizontal Spacing)
Cluster utilities (gap-*) create consistent horizontal spacing between flex or grid items. Use these for button groups, navigation, and horizontally flowing content.
Tight Cluster
gap-1
Gap: 4px
Icon + text pairs, inline badges, chip groups
Example: Icon buttons, status badges, tag groups
Live Preview:
Compact Cluster
gap-2
Gap: 8px
Button groups, navigation items, form inputs
Example: Toolbar buttons, pagination, breadcrumbs
Live Preview:
Comfortable Cluster
gap-4
Gap: 16px
Card grids, form fields, content groups
Example: Card layouts, form rows, feature grids
Live Preview:
Generous Cluster
gap-6
Gap: 24px
Major content groups, large card grids
Example: Service cards, team member grids, feature sections
Live Preview:
Spacious Cluster
gap-8
Gap: 32px
Wide layouts, major page sections
Example: Landing page sections, hero layouts, footer columns
Live Preview:
Section Spacing Patterns
Section spacing patterns define consistent padding for major page sections. These ensure vertical rhythm and breathing room across different screen sizes.
Compact Section
py-8 px-4
Secondary sections, sidebar content
Standard Section
py-12 px-4 md:px-8
Default content sections, feature areas
Comfortable Section
py-16 px-4 md:px-8
Major content sections, service descriptions
Spacious Section
py-24 px-4 md:px-8 lg:px-16
Hero sections, landing page features
Extra Spacious Section
py-32 px-4 md:px-8 lg:px-16
Homepage hero, major landing sections
Spacing in Action
See how Festa's spacing system creates consistent rhythm and hierarchy in real UI components. These examples demonstrate production-ready implementations of our spacing patterns.
Vertical Stack (space-y-*)
Using space-y-4 creates consistent 16px vertical rhythm between content elements.
Trauma-Informed Design Principles
Creating safe digital spaces requires intentional design decisions that prioritize user agency, clarity, and emotional wellbeing.
Every interaction should feel supportive rather than triggering, offering clear choices and exit options throughout the experience.
Horizontal Cluster (gap-*)
Using gap-4 on flex containers creates 16px spacing between inline elements.
Primary Actions
Icon + Text Pairs (gap-2)
Grid Gaps (gap-6)
Using gap-6 creates 24px spacing in grid layouts for comfortable card separation.
Plan
Strategic research and discovery phase
Build
Design and development execution
Activate
Launch and optimization phase
Section Padding (py-16 px-8)
Using py-16 px-8 creates comfortable 64px vertical and 32px horizontal padding for major content sections.
Ready to Transform Your Digital Impact?
Join the social impact organizations using trauma-informed design to create safer, more accessible digital experiences.
Responsive Spacing (space-y-4 md:space-y-6 lg:space-y-8)
Spacing adapts across breakpoints: 16px mobile → 24px tablet → 32px desktop for optimal rhythm at each viewport.
Mobile (16px spacing)
Compact spacing for smaller screens
Tablet (24px spacing)
Comfortable spacing for medium screens
Desktop (32px spacing)
Generous spacing for large screens
Best Practices
1. Use Stack Utilities for Vertical Flow
Prefer space-y-* over individual margin-top/bottom classes. This creates consistent rhythm and is easier to maintain.
2. Use Gap Utilities for Flex and Grid
Use gap-* instead of margin on child elements. Gap utilities automatically handle spacing between items without affecting outer margins.
3. Maintain Consistent Section Rhythm
Use the same section spacing pattern throughout a page. Don't mix py-12 and py-16 unless there's a semantic reason (e.g., hero sections).
4. Increase Spacing on Larger Screens
Use responsive spacing utilities to add more breathing room on larger screens: space-y-4 md:space-y-6 lg:space-y-8
5. Never Use Arbitrary Values
Avoid arbitrary spacing values like p-[13px]. Stick to the spacing scale to maintain consistency and align with the 4/8px grid.
6. Ensure Minimum Touch Target Size
Interactive elements should have at least 44px × 44px touch targets for accessibility. Use p-3 (12px) or larger on buttons.
Trauma-Informed Spacing
Generous whitespace reduces cognitive overwhelm. Our spacing system prioritizes breathing room and visual clarity over density, creating calm interfaces that don't trigger stress or anxiety.
- Use comfortable or generous stacks (space-y-4, space-y-6) for content sections
- Avoid tight spacing in high-stakes or stressful contexts (forms, checkout flows)
- Increase spacing around primary actions to prevent accidental clicks
- Use extra spacious sections (py-24, py-32) for hero areas to create calm entry points