Amazon Web Services · Design system breakdown
AWS's open design system, shaped by console-grade complexity.
A community-authored style reference in Markdown — colors, type, spacing, and an AI-ready prompt. Unofficial; not affiliated with Amazon Web Services.
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.
AWS design and engineering teams own the system. Open-source on GitHub with active triage. Stable component API with a clear deprecation policy.
The identity-bearing decisions, rendered. Names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
color-background-layout-main
Console page surface
color-text-body-default
Default text
color-background-button-primary-default
Primary action
space-scaled-l
Section spacing
border-radius-button
Button radius (notably rounded)
shadow-container
Subtle container shadow
Exactly what ships in amazon-design-design.md — plus the same token snapshot restated as CSS custom properties. Copy either, or feed the Markdown straight to an AI coding tool as styling context.
# Cloudscape — Design Style Reference > **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Amazon Web Services. "Cloudscape" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values. **System:** Cloudscape **Owner:** Amazon Web Services **Official documentation:** https://cloudscape.design/ --- ## Summary AWS's open design system, shaped by console-grade complexity. ## 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. ## 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. ## Design tokens (illustrative) Representative token values, restated as facts for reference. Names and values are illustrative — refer to the official tokens reference for the canonical, current set. | 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 | ## Style brief The identity-bearing decisions, at a glance: - **Brand / primary action:** `#0972d3` (Primary action) - **Surface:** `#fafafa` (Console page surface) - **Body text:** `#414d5c` (Default text) - **Corner radius:** `20px` (Button radius (notably rounded)) - **Base spacing:** `20px` (Section spacing) - **Elevation:** `0 0 1px rgba(0,7,22,0.12)` (Subtle container shadow) ## Components worth studying - **AppLayout** — Multi-region console layout with collapsible side panels and tools panel. - **Wizard** — Multi-step flow with built-in validation, navigation, and progress. - **Table** — Console-grade data table with virtualized rows and configurable column visibility. ## When to choose Cloudscape 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. ## Apply this style with an AI tool Paste this into your AI coding assistant as a direction, then iterate: > Design in the spirit of Cloudscape by Amazon Web Services — AWS's open design system, shaped by console-grade complexity. Use a primary action colour near #0972d3, corner radius around 20px, and a restrained, consistent scale. Lean into what it's known for: Enterprise console patterns — table layouts, wizards, settings pages, and forms designed for genuinely high information density. Match the intent, not the pixels; adapt it to my product rather than cloning it. ## Official references - [Cloudscape docs](https://cloudscape.design/) - [Cloudscape on GitHub](https://github.com/cloudscape-design/components) - [Tokens reference](https://cloudscape.design/foundation/visual-foundation/design-tokens/) --- _Generated by [designsystems.one](https://www.designsystems.one/design-systems/amazon-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._
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.
Where next
