Spacing
Consistent spacing creates visual harmony, improves readability, and helps users understand relationships between content on a page.InsureKidsNow.gov follows the United States Web Design System (USWDS) spacing standards to ensure our website is accessible, predictable and easy to navigate. Using a shared spacing system helps designers and developers build pages that look and behave consistently. USWDS and CMS both recommend using spacing units based on multiples of 8px and exposing these as design tokens.
Why consistent spacing matters:
- Improves readability - Proper spacing between text and elements makes content easier to read and understand
- Creates visual hierarchy - Different spacing values help users distinguish between headings, body text and UI elements
- Enhances accessibility - Adequate spacing between interactive elements makes them easier to select, especially for users with motor impairments
- Maintains brand consistency - Using the same spacing values across all pages creates a cohesive, professional experience
- Simplifies development - A limited set of spacing values reduces decision-making and speeds up design and development
The 8px Base Unit System
Ideally, InsureKidsNow.gov would use a spacing system based on multiples of 8 pixels (8px). This approach, recommended by USWDS, ensures visual consistency and makes it easier to create responsive layouts that work across all devices.
Why 8px?
- The number 8 is easily divisible (8, 4, 2, 1) before reaching sub-pixel units
- Many popular screen sizes are divisible by 8
- It provides enough flexibility for various design needs while maintaining consistency
Spacing Scale
The following spacing values should be used for margins, padding, and gaps between elements. All values are multiples of 8px, with a few smaller values (1px, 2px, 4px) for precise adjustments.
IKN Spacing Units Overview
| Value (px) | Value (rem) | Multiple of 8 | When to use |
|---|---|---|---|
| 1px | -- | -- | Borders, fine details |
| 2px | -- | -- | Borders, dividers |
| 4px | 0.25rem | 0.5x | Tight spacing, small gaps |
| 8px | 0.5rem | 1x | Base unit - Compact spacing |
| 12px | 0.75rem | 1.5x | Small spacing between related elements |
| 16px | 1rem | 2x | Default spacing - Most common use |
| 20px | 1.25rem | 2.5x | Medium spacing |
| 24px | 1.5rem | 3x | Spacing between sections |
| 32px | 2rem | 4x | Large spacing between components |
| 40px | 2.5rem | 5x | Extra large spacing |
| 48px | 3rem | 6x | Section spacing |
| 56px | 3.5rem | 7x | Major section spacing |
| 64px | 4rem | 8x | Large section spacing |
| 72px | 4.5rem | 9x | Extra large section spacing |
| 80px | 5rem | 10x | Maximum spacing between major sections |
How to Use Spacing Values
Note about design tokens: InsureKidsNow.gov does not currently use design tokens. Until design tokens are implemented, developers should use the pixel (px) or rem values directly in CSS. When design tokens are added in the future, these values will remain the same—only the implementation method will change.
Spacing Guidelines by Use Case
Small spacing (4px - 8px) - use for:
- Gap between icons and text
- Padding inside small buttons or badges
- Space between closely related elements
- Compact lists or tables
Medium spacing (12px - 24px) - use for:
- Padding inside buttons and form fields
- Space between form labels and inputs
- Vertical spacing between paragraphs
- Space between cards in a grid
- Minimum spacing between interactive elements (for accessibility)
Large spacing (32px - 80px) - use for:
- Space between major page sections
- Margin above and below headings
- Space around hero sections
- Page margins and container padding
Typography Spacing
When spacing text elements, consider the size of the heading and adjust spacing accordingly:
IKN Spacing Units Typography
| Heading Size | Space below heading | Example |
|---|---|---|
| H1 (32px+) | 48px - 56px | Major page title |
| H2 (28px) | 40px - 48px | Section heading |
| H3 (24px) | 32px - 40px | Subsection heading |
| H4 (20px) | 24px - 32px | Small heading |
| Body text | 32px between paragraphs | Small spacing between related elements |
Tip: Larger headings need more breathing room below them to maintain visual hierarchy.
Accessibility Considerations
Interactive elements: Maintain at least 24px (1.5rem) between clickable elements like buttons and links to meet accessibility standards
Touch targets: On mobile devices, ensure interactive elements have adequate padding (minimum 44px × 44px total size)
Paragraph spacing: Use 32px (2rem) between paragraphs to improve readability
Focus indicators: Ensure focus outlines have adequate spacing and don't overlap with nearby elements
Future Implementation: Design Tokens
Design tokens are a future enhancement for InsureKidsNow.gov. When implemented, they will provide a more maintainable way to manage spacing values across the website.
What are design tokens? Design tokens are named variables that store design values (like spacing, colors, and typography). Instead of hard-coding values like 16px, you would use a token like spacing-2 or --spacer-2.
Benefits of design tokens:
- Easier to update spacing values site-wide
- Better consistency across components
- Clearer communication between designers and developers
- Simplified theming and customization
When we implement design tokens, the spacing values will remain the same—only the way we reference them in code will change.