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

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

iconicon

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

ColorsColors

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 library
Figma design library

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