About Cloudscape

Cloudscape is an open source design system for building user experiences at scale.

On this page

Meet Cloudscape

Cloudscape Design System. An open source design system for the cloud.

Created for and used by Amazon Web Services (AWS) since 2016, the Cloudscape Design System was designed to improve the user experience across web applications owned by AWS services, and to help them implement those applications faster. Since 2016, we have continued enhancing the system’s features, including additional responsiveness, improved accessibility and usability. Over time, we have also modified the visual identity to adapt to customer expectations and the needs of the teams building with it. These modifications bring a new, more approachable look and feel that reaches beyond the technical user audience into more consumer-friendly interfaces.

Cloudscape is built on atomic design principles, has a functional, theme-able color palette with both light and dark modes and content density settings. It comes with a set of simple, functional icons, effective motion design, and is responsive at multiple breakpoints. The Cloudscape website provides articles for all components and patterns in the design system, with a playground for each component that has examples pre-configured for exploration. The configured code can be copied straight out of the playground and into your application’s code for quick implementation. The Figma library for designers provides additional flexibility and configurability, simplifying the creation of intuitive, engaging and inclusive web applications.

Try it today!

What is Cloudscape?

Cloudscape Design System is an open source solution for building intuitive, engaging, and inclusive user experiences at scale. Cloudscape consists of an extensive set of guidelines to create web applications, along with the design resources and front-end components to streamline implementation.

Cloudscape 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. If you’ve ever used the AWS Management Console , you’ve seen Cloudscape in action.

Is Cloudscape for me?

We are releasing Cloudscape as open source so that anyone building cloud products can benefit from our design system, and join a community of designers and developers continually improving it. Whether you are building a product that extends the AWS Management Console, designing a user interface for a hybrid cloud management system, or thinking of setting up an on-premises solution that uses AWS, Cloudscape offers a solid base of 60+ components, 30+ pattern guidelines, and 20+ demos to make your work easier. To customize your user experience, Cloudscape offers theming, dark mode, and content density modes.

Overview

Designers can use our visual foundation, UX guidelines, and Figma resources to reduce the time needed to get from project inception through wireframe to prototype. Our UX guidelines include recommendations for designing common patterns and flows, backed by user research and best practices.

Developers can use our accessible and responsive React components to quickly create high quality interfaces. All components undergo visual and functional testing on all supported browsers , so you can rely on them to perform as expected, regardless of the project. Cloudscape follows the principles of atomic design , which means developers can also combine components to create new components and patterns, resulting in near-endless possibilities. Each component comes with its own usage and writing guidelines.

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 .

You can see Cloudscape in action by browsing through our demos.

Connect with us

To reach us, see our connect page. Ready to start building? Our get started section has everything you need.