Cloudscape

AWS's open-source system for cloud consoles. Built for scale and density: hundreds of service teams held to one learnable interface.

Why we like it

Cloudscape earns its place the hard way, by running the AWS Management Console since 2016 before it was ever open-sourced. What we like is how far past components it reaches: a separate library for draggable dashboard widgets, dedicated charting, generative-AI components, all around a core of tested React components.

It's built for scale in the practical ways too. Internationalization is a configuration step, an I18nProvider plus ICU-formatted message bundles covering thirteen locales out of the box, and content density is a global mode you flip between comfortable and compact for dense operational views. It even publishes an llms.txt for agents.

Where it fits

Cloudscape fits large React consoles and data-heavy admin apps that need localization, density control and dashboard widgets, held to one learnable interface across many teams. For a simple marketing site it's far more than you'd need.

The built-in locale set is left-to-right only, so right-to-left languages need extra work.

Ideas to borrow

  1. 01.

    Pattern fidelity

    Write patterns with the fidelity of components: labeled anatomy, the exact modal title format, the default confirmation word, writing rules per element. Fifty-nine patterns held to that standard means a team adopting one stops redeciding the thirty small things that make a Delete modal good.

  2. 02.

    Theming

    Offer content density as a global runtime mode (comfortable and compact), so one system serves both readable pages and dense operational views without a fork.

  3. 03.

    Architecture

    Ship ICU message bundles behind an I18nProvider, so localization across a dozen-plus locales is configuration, not a component rewrite.

Screenshots

Fig. 1Cloudscape's design token reference, 413 colors across 42 pages, each row giving the token name, whether it's themeable, and its hex value.
Fig. 2Cloudscape's status and severity palette, demonstrated on a pie chart of resource states and a donut chart of findings severity.
Fig. 3Cloudscape's component index: 113 components in a grid, each card pairing a rendered preview with a one-line description.
Fig. 4Cloudscape's pattern library, with cards for cross-cutting patterns like announcing beta features, attribute editing, and chart metric drill down.

Further reading

Related