Amazon Web Services · Design system breakdown

Cloudscape

AWS's open design system, shaped by console-grade complexity.

Cloudscape docs Cloudscape on GitHub Tokens reference

Origin

Cloudscape was the internal design system behind the AWS Console for years. AWS open-sourced it in 2022 under Apache 2.0. It now ships standalone React components, design tokens, and a public documentation site.

Governance

AWS design and engineering teams own the system. Open-source on GitHub with active triage. Stable component API with a clear deprecation policy.

What it's known for, what's underrated, what to watch out for.

Known for

Enterprise console patterns — table layouts, wizards, settings pages, and forms designed for genuinely high information density.
First-class wizard, split-panel, and app-layout components that most public design systems duck.
Strong asynchronous-action patterns (long-running tasks, polling, optimistic UI).

Underrated

The AppLayout component is a battle-tested template for console-style products with multiple side panels.
Cloudscape's accessibility documentation is detailed and shipped alongside components.

Watch out for

The visual identity is unmistakably AWS Console; retheming for a non-Amazon product is real work.
The component model assumes a console-like product. For marketing or content sites, it is overkill.

Token snapshot

Token	Value	Role
color-background-layout-main	#fafafa	Console page surface
color-text-body-default	#414d5c	Default text
color-background-button-primary-default	#0972d3	Primary action
space-scaled-l	20px	Section spacing
border-radius-button	20px	Button radius (notably rounded)
shadow-container	0 0 1px rgba(0,7,22,0.12)	Subtle container shadow

Token names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.

Components worth studying

01AppLayoutMulti-region console layout with collapsible side panels and tools panel.
02WizardMulti-step flow with built-in validation, navigation, and progress.
03TableConsole-grade data table with virtualized rows and configurable column visibility.

If you're evaluating this system

Pick Cloudscape if you're building a developer or operator console — anything resembling AWS, Azure, or GCP in product shape. For consumer or marketing surfaces, look elsewhere.

Compare more systems

What it's known for, what's underrated, what to watch out for.

Known for

Enterprise console patterns — table layouts, wizards, settings pages, and forms designed for genuinely high information density.
First-class wizard, split-panel, and app-layout components that most public design systems duck.
Strong asynchronous-action patterns (long-running tasks, polling, optimistic UI).

Underrated

The AppLayout component is a battle-tested template for console-style products with multiple side panels.
Cloudscape's accessibility documentation is detailed and shipped alongside components.

Watch out for

The visual identity is unmistakably AWS Console; retheming for a non-Amazon product is real work.
The component model assumes a console-like product. For marketing or content sites, it is overkill.

Token

Value

Role

color-background-layout-main

#fafafa

Console page surface

color-text-body-default

#414d5c

Default text

color-background-button-primary-default

#0972d3

Primary action

space-scaled-l

20px

Section spacing

border-radius-button

20px

Button radius (notably rounded)

shadow-container

0 0 1px rgba(0,7,22,0.12)

Subtle container shadow