Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Spacing

Consistent spacing system using rem units for layout and component design. Provides predictable, scalable spacing that respects user font size preferences.

0.5rem (8px)

1rem (16px)

1.5rem (24px)

2rem (32px)

3rem (48px)

CSS

/* Spacing Scale (based on 16px root font size) */
/* 0.5rem = 8px */
/* 1rem = 16px */
/* 1.5rem = 24px */
/* 2rem = 32px */
/* 2.5rem = 40px */
/* 3rem = 48px */

/* Utility Classes */
.ads-mb-1 { margin-bottom: 0.5rem; }
.ads-mb-2 { margin-bottom: 1rem; }
.ads-mb-3 { margin-bottom: 1.5rem; }
.ads-mb-4 { margin-bottom: 2rem; }
.ads-mb-5 { margin-bottom: 2.5rem; }
.ads-mb-6 { margin-bottom: 3rem; }

.ads-mt-1 { margin-top: 0.5rem; }
.ads-mt-2 { margin-top: 1rem; }
.ads-mt-3 { margin-top: 1.5rem; }
.ads-mt-4 { margin-top: 2rem; }
.ads-mt-5 { margin-top: 2.5rem; }
.ads-mt-6 { margin-top: 3rem; }

.ads-mr-1 { margin-right: 0.5rem; }
.ads-mr-2 { margin-right: 1rem; }

/* Component Example */
.ads-card {
    padding: 1.5rem;
    margin-bottom: 2rem;
    gap: 1rem;
}

Accessibility Guidelines

Key Requirements

  • Use rem units: Respects user browser font size settings for better accessibility
  • Consistent scale: Predictable spacing helps users with cognitive disabilities understand page structure
  • Touch targets: Minimum 44x44px (2.75rem) for interactive elements
  • Spacing between sections: Clear visual separation helps users scan and navigate content
  • White space: Adequate spacing reduces cognitive load and improves readability

Custom Implementation Notes

Why rem over px? Using rem units allows spacing to scale proportionally when users change their browser's default font size. This is crucial for users with low vision who need to increase text size. Pixel values don't scale and can break layouts or create reading difficulties.

Spacing for touch targets: Interactive elements (buttons, links, form controls) should have adequate spacing between them. WCAG 2.5.8 requires minimum 24px spacing between targets or 44x44px target size. Our spacing scale makes it easy to achieve this.

Usage Examples

  • 0.5rem (8px): Small gaps between related items, like icon and text
  • 1rem (16px): Standard gap between form elements, list items
  • 1.5rem (24px): Spacing between form groups, card padding
  • 2rem (32px): Section spacing, large component padding
  • 3rem (48px): Major section breaks, page-level spacing

References