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

Get started


  • Guides

    • Get started for designers
    • Get started for developers

  • Resources

    • Design resources

  • Integration

    • Using Cloudscape components
    • Global styles

  • Development guides

    • Collection hooks package
    • Content security policy (CSP)
    • Responsive development
    • State management
    • Z-index

  • Testing

    • Introduction to testing
    • Testing frameworks integration
    • Testing core classes
  1. Cloudscape Design System
    • Get started
    • Guides: Get started for designers

    Get started for designers

    Welcome to Cloudscape. Let’s start building. Here, you'll find links to our design library, visual foundation, and information about our components, patterns, and demos.

      On this page

      • Explore the system
      • Start with the foundation
      • Explore design resources

      Explore the system

      Explore our components

      Each of our component articles offers usage guidelines, a comprehensive list of the component’s features, design do’s and dont’s, writing guidelines and accessibility guidelines. Teams can use the playground to test out how components look and behave, even if you have no coding experience.

      Check out our patterns

      Our patterns provide design guidance on how to assemble common flows and solutions out of our components. Our pattern articles clarify key UX concepts, and provide writing and accessibility guidelines for creating solutions.

      Use our design patterns as a base for common design solutions, to easily maintain consistency.

      See our demos

      Our demos show how our components and patterns can be arranged into ready-made flows and pages.

      You can use them as reference for how to build consistent pages with Cloudscape.

      Start with the foundation

      Our visual foundation consists of the core elements of the system, such as typography, iconography, and colors.

      TypographyTypography

      Typography

      The latest version of Open Sans is designed for both mobile and web usage.

      iconicon

      Iconography

      Basic icon set representing status, object, function, and layout controls, available as SVGs.

      ColorsColors

      Colors

      Color palettes can be found inside the design resources on this page.

      Explore design resources

      The design library for Figma contains all components within one single file. The design library file can be used both as a sticker sheet (to copy and paste elements to your design files) and as a library (which you can install to access all components from any design file). For more details, check out the getting started guide inside the Cloudscape design library in Figma.

      Figma design libraryFigma design library

      Figma design library

      A collection of all components, variants, and fundamentals, including color, text, and layer styles.

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