Units & Spacing

Units & Spacing

Base-8 design system

Core principles

The Base-8 Design System is built on the fundamental unit of 8 pixels, creating a harmonious and consistent visual language across all design elements. This system promotes clean layouts, predictable spacing, and excellent visual rhythm while maintaining optimal readability across different screen sizes. Exceptions can be made when necessary, but any deviations should be well considered.

Spacing scale

The spacing scale follows geometric progression in base-8:

  • 4px - Nano spacing (0.25x)
  • 8px - Micro spacing (0.5x)
  • 16px - Base spacing (1x)
  • 24px - Medium spacing (1.5x)
  • 32px - Large spacing (2x)
  • 48px - Extra large spacing (3x)
  • 64px - 2X large spacing (4x)
  • 96px - Huge spacing (6x)
  • 128px - Giant spacing (8x)

Typography scale

Heading sizes

  • H1: 48px (6x)
  • H2: 32px (5x)
  • H3: 24px (4x)
  • H4: 18px (3x)
  • H5: 16px (2x)
  • H6: 14px (1.75x)

Body text sizes

  • Extra large: 22px
  • Large: 18px
  • Regular: 16px
  • Small: 14px
  • Micro: 12px

Line heights

In general, use tighter line heights for larger headlines (48px and up).

  • Extra tight headline: 110%
  • Tight headline: 120%
  • Regular headline: 130%
  • Body text: 150%

Component sizing

All component dimensions should align to the 8-pixel grid:

  • Icon sizes: 16px, 24px, 32px, 48px
  • Button heights: 32px, 38px, 44px, 52px, 64px
  • Input heights: 38px, 52px
  • Border radius options: 4px, 8px, 16px
  • Border widths: 1px, 2px

Layout guidelines

Padding rules

  • Cards: 16px or 24px
  • Containers: 24px or 32px
  • Modals: 32px
  • Navigation: 16px

Margin rules

  • Between sections: 48px
  • Between components: 24px
  • Between related elements: 16px
  • Between text blocks: 8px

Usage guidelines

  1. Always align elements to the 8px grid
  2. Use consistent spacing tokens rather than custom values
  3. Maintain hierarchy using the established type scale
  4. Ensure components follow the defined size constraints
  5. Apply padding and margin rules consistently

Implementation principles

  1. All measurements should snap to the 8px grid
  2. Avoid magic numbers; use system tokens
  3. Components should be composed of measurements from the spacing scale
  4. Maintain consistent vertical rhythm using the base-8 system
  5. Ensure responsive layouts follow the grid system
  6. Use provided design tokens for all spacing, sizing, and typography (?)

Accessibility considerations

  • Minimum touch target size: 48px x 48px
  • Minimum text size for readability: 16px
  • Minimum contrast ratio: 4.5:1 for regular text
  • Focus states should have 2px borders
  • Interactive elements should have 8px minimum spacing