Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About
  • Foundation
    • Overview
  • 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
    • Responsive design
  1. Cloudscape Design System
    • Foundation
    • Foundation: Overview

    Foundation

    Learn about the visual foundation of Cloudscape, and the core principles we include in our designs.

      On this page

      • Overview
      • Browse our foundation

      Overview

      Visual foundation

      A great user experience is comprised of more than components and individual patterns. Cloudscape visual foundation includes our color palettes, iconography, use of spacing, motion, and more.

      Core principles

      Core principles are a set of principles Cloudscape includes in our designs. You can find out more about our approach to accessibility and responsive design in their respective articles.

      Browse our foundation

      ColorsColors

      Colors

      Colors set the emotional tone of a user interface and are a powerful way to establish consistency. Each color, as well as the palette as a whole, has specific usage guidelines and role definitions to meet accessibility requirements.

      Content densityContent density

      Content density

      Content density is defined by the ratio of information visible compared to the space available in the interface.

      Data visualization colorsData visualization colors

      Data visualization colors

      Color can be used as a powerful element to augment a chart or other data visualization when applied with a clear sense of purpose. 

      Design tokensDesign tokens

      Design tokens

      A design token is an abstraction of a visual property, such as color, size, or animation.

      icongraphyicongraphy

      Iconography

      Iconography is a visual language used to represent features, functionality, or content. Icons are intended to be simple visual elements that are recognized and understood immediately.

      LayoutLayout

      Layout

      Layout refers to the arrangement of elements on the interface to serve a specific purpose. It’s the integration of the spatial and organizational principles of the system that result in a final visual composition.

      Motion Motion

      Motion

      Motion helps enhance the user experience by making a user interface both easy to use and more expressive.

      SpacingSpacing

      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.

      Theming- foundations hubpageTheming- foundations hubpage

      Theming

      Theming allows for the customization of specific visual attributes across the product interface. 

      TypographyTypography

      Typography

      With typography, you can organize and style information with purpose. It provides hierarchy and structure, serves as guidance, and has a fundamental impact on the user experience.

      Visual modesVisual modes

      Visual modes

      Visual modes are used to optimize the user interface based on environmental conditions and user preferences. The design system elements are customized with a unique color palette and color contrast to help users complete their tasks in the most efficient way. We support both light and dark modes.

      visual stylesvisual styles

      Visual style

      Visual style defines how the elements of Cloudscape work together to create a consistent visual aesthetic that reinforces our brand.

      Visual contextsVisual contexts

      Visual context

      Visual context helps create a different look and feel for components placed in a specific area.

      AccessibilityAccessibility

      Accessibility

      Cloudscape provides guidelines, patterns, and components to help you create delightful experiences for your users.

      ResponsivenessResponsiveness

      Responsive design

      Responsive web design responds to the needs of the users, and the devices they're using. It also ensures that what you’re building looks good and functions properly, regardless of use case.

      • About
      • Connect
      • Privacy 
      • Site terms 
      • © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
      Made with love atAWS