# 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/
**Visual character:** Console-scale competence: 14px data density, one dependable AWS blue, and patterns that keep a thousand services feeling like one.

---

## Summary

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

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| AWS Blue / Primary | `#0972d3` | `--awsui-color-text-link-default` | Primary actions and links |
| Text | `#000716` | `--awsui-color-text-body-default` | Primary text (near-black navy) |
| Secondary Text | `#5f6b7a` | `--awsui-color-text-body-secondary` | Secondary text |
| White | `#ffffff` | `--awsui-color-background-container-content` | Container surfaces |
| App Background | `#f2f3f3` | `--awsui-color-background-layout-main` | Console background |
| Border | `#d1d5db` | `--awsui-color-border-divider-default` | Dividers |
| Error Red | `#d91515` | `--awsui-color-text-status-error` | Errors |
| Success Green | `#037f0c` | `--awsui-color-text-status-success` | Success |
| Warning | `#8d6605` | `--awsui-color-text-status-warning` | Warnings |

## Typography

- **Body:** Open Sans — weights 400, 700 — `'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif`
- **Mono:** Monaco — weights 400 — `Monaco, Menlo, Consolas, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-xl | `24px` | `30px` |
| heading-l | `20px` | `24px` |
| heading-m | `18px` | `22px` |
| body-m | `14px` | `20px` |
| body-s | `12px` | `16px` |

## Spacing

Base unit: `4px (xxs)`

Scale: `4px` · `8px` · `12px` · `16px` · `20px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `8px` |
| small (inputs) | `8px` |
| badge | `4px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| container | `0 0 1px 1px #e9ebed, 0 1px 8px 2px rgba(0,7,22,0.12)` |

## Motion

| Name | Value |
| --- | --- |
| quick | `90ms` |
| moderate | `165ms ease-out` |

## Quick start (CSS)

```css
/* Cloudscape — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://cloudscape.design/ */

:root {
  /* Color */
  --awsui-color-text-link-default: #0972d3; /* Primary actions and links */
  --awsui-color-text-body-default: #000716; /* Primary text (near-black navy) */
  --awsui-color-text-body-secondary: #5f6b7a; /* Secondary text */
  --awsui-color-background-container-content: #ffffff; /* Container surfaces */
  --awsui-color-background-layout-main: #f2f3f3; /* Console background */
  --awsui-color-border-divider-default: #d1d5db; /* Dividers */
  --awsui-color-text-status-error: #d91515; /* Errors */
  --awsui-color-text-status-success: #037f0c; /* Success */
  --awsui-color-text-status-warning: #8d6605; /* Warnings */

  /* Typography */
  --font-body: 'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif;
  --font-mono: Monaco, Menlo, Consolas, monospace;

  /* Type scale */
  --text-heading-xl: 24px /* line-height 30px */;
  --text-heading-l: 20px /* line-height 24px */;
  --text-heading-m: 18px /* line-height 22px */;
  --text-body-m: 14px /* line-height 20px */;
  --text-body-s: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* Radius */
  --radius-default: 8px;
  --radius-small-inputs-: 8px;
  --radius-badge: 4px;

  /* Elevation */
  --shadow-container: 0 0 1px 1px #e9ebed, 0 1px 8px 2px rgba(0,7,22,0.12);

  /* Motion */
  --motion-quick: 90ms;
  --motion-moderate: 165ms ease-out;
}
```

## 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.

## 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. Character: Console-scale competence: 14px data density, one dependable AWS blue, and patterns that keep a thousand services feeling like one. Use a primary colour near #0972d3, the typeface "Open Sans" (or a close equivalent), corner radius around 8px, a spacing rhythm on a 4px (xxs) base. 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._