Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Foundation


  • Visual foundation

    • Colors
    • Content density
    • Data visualization colors
    • Design tokens
    • Iconography
    • Layout
    • Motion
    • Spacing
    • Theming
    • Typography
    • Visual context
    • Visual modes
    • Visual style

  • Core principles

    • Accessibility
      • Focus management principles
      • Building accessible experiences
    • Responsive design
  1. Cloudscape Design System
    • Foundation
    • Visual foundation: Spacing

    Spacing

    Spacing is used to define paddings and margins of the elements on the interface. Consistent spacing creates predictable layouts, favors visual rhythm and helps you create a clear hierarchy.

    On this page

    1. Spacing system
    2. Spacing scale
    3. Key concepts
    4. Implementation

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.

    Spacing system

    Our design system's grid system is based on a 4-pixel base unit, which is used to calculate the spacing and scale of elements on the screen. The base unit is at the core of the visual foundation, and also provides the basis for the typography and iconography systems. The result is a consistent set of rules that allow you to create a coherent and balanced visual experience across your service.


    Spacing types

    Spacing can be used inside components (paddings), and between components (margins). Spacing inside components often uses smaller spacing units to achieve a closer relationship of elements. On the other side, spacing between components uses larger spacing units, to establish a visual separation of the content.

    Spacing inside components is already built into the coded components so that you can focus on creating the layout that better serves your users’ needs. If you build custom components, remember that they should use the same spacing scale to bring consistency and create a natural and familiar flow from page to page.

    Spacing scale

    The spacing scale is based on progressive increments of the 4-pixel base unit.

    Spacing unit
    Size (px)
    Preview
    Examples
    xxx-small2