Learn about the visual foundation of our design system, such as colors, spacing, and iconography.
Discover our library of components. Built with React, they are tested, accessible, and responsive.
Explore our guidelines and best practices for building user experiences.
View Cloudscape in action by browsing through our demos.

Meet Cloudscape

Cloudscape is an open source design system to create web applications. It was built for and is used by Amazon Web Services (AWS) products and services. We created it in 2016 to improve the user experience across web applications owned by AWS services, and also to help teams implement those applications faster. Since then, we have continued enhancing the system based on customer feedback and research. Learn more about the system.

An example of a dashboard built with Cloudscape Design System components.An example of a dashboard built with Cloudscape Design System components.

Get familiar with the system

Each component has a playground where designers and developers can see how the component behaves, along with sample code. To save you time and effort when building, we offer extensive guidance on accessibility options and design solutions. Head over to our demos for examples of Cloudscape in action.

An example of Cloudscape components.An example of Cloudscape components.

Cloudscape on GitHub

We publish our source code on GitHub under the Apache 2.0 License  in the cloudscape-design  organization. In our main components repository  you can find information about our support and contribution model, versioning strategy, and change logs. You can also open issues  and ask a question .

A screenshot of the Cloudscape GitHub repository.A screenshot of the Cloudscape GitHub repository.


Core features

Cloudscape supports various visual modes, accessibility, responsive design, and broad browser coverage. Services built with Cloudscape are designed for all customers, regardless of browser, screen size, or ability.

Start building

For designers

Download our design library to start designing. Use our visual foundation, UX guidelines, and Figma resources to reduce the time needed to get from project inception to wireframe and prototype.

For developers

Integrate with our system to start developing. Use our accessible and responsive React components to quickly create high quality interfaces.