> Atmospheric study inspired by Amazon's publicly visible design language. Void Energy is not affiliated with, endorsed by, sponsored by, or licensed by Amazon. The downloadable atmosphere file contains color, motion, and typographic-rhythm tokens only — no brand logos, marks, or proprietary assets. All trademarks are the property of their respective owners.

---

---
name: Amazon
version: alpha
description: Amazon Web Services Console dark mode — transcribed from Cloudscape Design System dark tokens. Signature tinted near-black-blue canvas #161d26 (color-background-layout-main dark; NOT pure black, the cool-blue tint IS the Cloudscape dark signature — distinct from Carbon gray-100 #161616 and Fluent's warm-gray #1f1f1f), surface lifted to #1b232d (color-background-cell-shaded dark) for the raised feel. AWS Blue lifts to #42b4ff (color-background-button-primary-default dark) for AA contrast against the lifted canvas; #75cfff (the documented hover-dark token) holds accent / second-tier hover. Text rides the documented Cloudscape dark heading-default / body-default ramp (#ebebf0 / #c6c6cd / #8c8c94). Brand profile carries the AWS Console chrome: 4-16px modern-institutional radii ladder, 115/165/250ms duration tier (notably faster than Fluent 200ms — engineered to feel responsive under high data density), -7% density expressing the documented compact-comfortable rhythm, Open Sans semibold heading + regular body. Dark-mode only by design — the AWS Console is iconic in its dark register; the retail Amazon register (warm orange over white, amazon.com commerce chrome) lives on the sibling amazon-retail-light entry at its own canonical mode. Distinguished from microsoft-fluent-dark by canvas hue (Cloudscape cool-blue tint vs Fluent warm-gray) and from ibm-carbon-dark by shape and palette ladder (Cloudscape's 4-16px curves + cool-blue tinted canvas vs Carbon's zero-radii rectangles + neutral gray-100).

colors:
  primary: "#42b4ff"
  secondary: "#75cfff"
  neutral: "#8c8c94"
  surface: "#232d39"
  surface-container: "#161d26"
  on-surface: "#ebebf0"
  on-surface-variant: "#c6c6cd"
  outline: "#363C47"
  error: "#ff3c40"

typography:
  display-lg:
    fontFamily: "'Open Sans', sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-lg:
    fontFamily: "'Open Sans', sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.015em"
  headline-md:
    fontFamily: "'Open Sans', sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.01em"
  headline-sm:
    fontFamily: "'Open Sans', sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
  body-lg:
    fontFamily: "'Open Sans', sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
  body-md:
    fontFamily: "'Open Sans', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "'Open Sans', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: "'Open Sans', sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "0.02em"
  label-sm:
    fontFamily: "'Open Sans', sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "0.02em"

spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 48px
  "2xl": 64px
  "3xl": 96px
  "4xl": 128px
  "5xl": 160px

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-container}"
    rounded: "{rounded.full}"
    padding: 16px
    typography: "{typography.label-md}"
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-container}"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface-container}"
    rounded: "{rounded.full}"
    padding: 16px
    typography: "{typography.label-md}"
  button-tertiary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface-variant}"
    rounded: "{rounded.full}"
    padding: 16px
    typography: "{typography.label-md}"
  text-disabled:
    textColor: "{colors.neutral}"
    typography: "{typography.body-sm}"
  button-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.surface-container}"
    rounded: "{rounded.full}"
    padding: 16px
    typography: "{typography.label-md}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 12px
    typography: "{typography.body-md}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 32px
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
---

# Amazon

Amazon Web Services Console dark mode — transcribed from Cloudscape Design System dark tokens. Signature tinted near-black-blue canvas #161d26 (color-background-layout-main dark; NOT pure black, the cool-blue tint IS the Cloudscape dark signature — distinct from Carbon gray-100 #161616 and Fluent's warm-gray #1f1f1f), surface lifted to #1b232d (color-background-cell-shaded dark) for the raised feel. AWS Blue lifts to #42b4ff (color-background-button-primary-default dark) for AA contrast against the lifted canvas; #75cfff (the documented hover-dark token) holds accent / second-tier hover. Text rides the documented Cloudscape dark heading-default / body-default ramp (#ebebf0 / #c6c6cd / #8c8c94). Brand profile carries the AWS Console chrome: 4-16px modern-institutional radii ladder, 115/165/250ms duration tier (notably faster than Fluent 200ms — engineered to feel responsive under high data density), -7% density expressing the documented compact-comfortable rhythm, Open Sans semibold heading + regular body. Dark-mode only by design — the AWS Console is iconic in its dark register; the retail Amazon register (warm orange over white, amazon.com commerce chrome) lives on the sibling amazon-retail-light entry at its own canonical mode. Distinguished from microsoft-fluent-dark by canvas hue (Cloudscape cool-blue tint vs Fluent warm-gray) and from ibm-carbon-dark by shape and palette ladder (Cloudscape's 4-16px curves + cool-blue tinted canvas vs Carbon's zero-radii rectangles + neutral gray-100).

This document describes the **AWS Console** atmosphere (`amazon-cloudscape-dark`) — a dark/flat reading of Amazon produced by the Void Energy design system. Render it live at https://voidenergy.dev/atmospheres/amazon, or boot it in any Void Energy app:

```js
voidEngine.loadExternal('https://voidenergy.dev/atmospheres/amazon/cloudscape-dark.json');
```

## Overview

Amazon's **AWS Console** reading. The mood: opaque surfaces with crisp shadows; the mode: dark. Headings are set in Open Sans; body copy is Open Sans.

Two principles govern everything below:

1. **Generous whitespace over dense packing.** Surfaces breathe. When a gap feels tight, go one size up rather than down. Void Energy's spacing scale is intentionally wide (8 → 160px).
2. **Sentence case controls over uppercase shouting.** Buttons, inputs, and labels use natural sentence case with medium weight by default. Uppercase is an intentional, infrequent choice — never applied to metrics, chrome, or dashboard cards by default.

## Colors

The palette is built on three layers:

- **Primary (`#42b4ff`)** — the single interactive accent. Used for buttons, links, focused inputs, and selection states. Do not repurpose for decoration.
- **Secondary (`#75cfff`)** — companion accent for secondary actions, charts, and data-series 2. Always distinguishable from primary; never a competing focal point.
- **Surface stack** — three background layers that convey depth:
  - `surface-container` (`#161d26`) — the page canvas.
  - `surface` (`#232d39`) — floating cards, panels, and chrome.
  - `outline` (`#363C47`) — borders and dividers. Low-contrast by design: borders should whisper structure, not shout.

Text forms a descending-contrast hierarchy:

- `on-surface` (`#ebebf0`) — primary text. WCAG AA against surface layers.
- `on-surface-variant` (`#c6c6cd`) — secondary text, captions, metadata.
- `neutral` (`#8c8c94`) — disabled states and tertiary hints only.

Semantic signal:

- `error` (`#ff3c40`) — destructive actions and validation failures. Reserved for genuinely negative states; not for warnings or info.

## Typography

This atmosphere pairs **Open Sans** for headings and **Open Sans** for body. The full nine-level scale (display through label) is in the frontmatter `typography` block.

### Brand typography overrides

Amazon's identity carries explicit overrides on the typographic axis. Anything not listed inherits the system default.

- **Display weight** (h1, h2): `600`
- **Heading weight** (h3, h4): `600`
- **Button weight** (.btn-*): `600`

## Layout & Spacing

Void Energy uses an **8px base grid** with a wide scale:

- **Component level** (tight): xs (8), sm (16), md (24), lg (32)
- **Layout level** (accelerated): xl (48), 2xl (64), 3xl (96), 4xl (128), 5xl (160)

Apply along two axes:

1. **Surface padding floor.** Floating surfaces use `lg` (32px) minimum padding and `lg` inner gaps. Sunk/inset surfaces drop to `md` (24px). Never use `sm` or `xs` on a floating card.
2. **Layout gaps.** Page sections use `2xl` (64px) between them. Content blocks inside a section use `xl` (48px). Grouped controls use `md` (24px). Tight couplings (label → input, icon + text) use `xs` (8px).

The scale density-scales at runtime across five presets: Compact (×0.8), Cozy (×0.9), Standard (×1), Roomy (×1.1), Airy (×1.2). Static snapshots assume Standard.

## Elevation & Depth

This is a **flat-physics** atmosphere. Surfaces are opaque (`#232d39`); shadows are minimal (5–10% opacity in light mode, 30–40% in dark mode for visibility). Hover has no Y translation and no scale by default — flat physics expresses interactivity through tint changes, not lift.

### Brand motion overrides

Amazon's identity carries explicit overrides on the motion axis. Speeds are in milliseconds; easings are CSS `<easing-function>` values. Anything not listed inherits the active physics preset.

- `--speed-fast`: 115ms
- `--speed-base`: 165ms
- `--speed-slow`: 250ms
- `--ease-flow`: `cubic-bezier(0, 0, 0, 1)`
- `--ease-spring-snappy`: `cubic-bezier(0.84, 0, 0.16, 1)`

## Shapes

Amazon's radii reflect the brand's shape language. The active scale:

- `rounded.sm`: 4px
- `rounded.md`: 8px
- `rounded.lg`: 12px
- `rounded.xl`: 16px
- `rounded.full`: 9999px

## Components

The frontmatter `components` block covers the canonical atoms. Notes on applying them:

### Buttons

- `button-primary` — primary action, anchored on `#42b4ff`. One per view.
- `button-secondary` — companion action, on `#75cfff`.
- `button-tertiary` — quietest button; for cancel, dismiss, tertiary navigation.

### Inputs & Cards

- `input` — surface background, `body-md` typography, 12px padding. Native `<input>` / `<select>` / `<textarea>` with SCSS providing the visual treatment.
- `card` — surface background, generous 32px padding (`lg`). The default container for content groups.

## Do's and Don'ts

**Do:**

- Use `primary` (`#42b4ff`) for exactly one action per view.
- Default to sentence case on buttons and labels. Uppercase is a choice, not a default.
- Maintain WCAG AA contrast (4.5:1 for body text, 3:1 for UI components).
- Apply `lg` (32px) padding minimum to cards.
- Wrap native `<button>`, `<input>`, `<select>` rather than rebuilding interaction from `<div>`.

**Don't:**

- Don't substitute the canvas with pure #000000 or with Carbon gray-100 #161616 — Cloudscape dark canvas is the tinted #161d26 per the documented color-background-layout-main dark token; the cool-blue tint IS the AWS Console dark signature, and pure black collapses this onto Netflix marquee territory while gray-100 collapses it onto Carbon.
- Don't drop to the light-token #006ce0 as primary — at the lifted dark canvas it fails the 3:1 interactive floor against #1b232d. The lift to #42b4ff IS the Cloudscape color-background-button-primary-default dark token; lift-to-lighter is the documented mode adaptation, not arbitrary engineering.
- Don't substitute Open Sans with Inter — Cloudscape's documented font-family-base puts Open Sans first in the stack and Open Sans IS the AWS Console chrome typeface; Inter is neo-grotesque (Helvetica lineage) and reads as generic SaaS chrome, losing the institutional voice.
- Don't add an amazon-cloudscape-light sibling — the AWS Console is iconic in its dark register, and a light Cloudscape would visually overlap with amazon-retail-light (both flat-light on white surfaces, near-identical text ramps, differing only in primary color). The atmospheric studies here are deliberately differentiated by register AND mode.
- Don't repurpose `primary` (`#42b4ff`) for decoration. It is a load-bearing interaction signal.
- Don't use `error` (`#ff3c40`) for warnings. Error is reserved for destructive and failure states.
- Don't use `neutral` for body text — it is for disabled states and tertiary hints only.

## Responsive Behavior

Void Energy is mobile-first. Breakpoints:

- **mobile** 0px (default)
- **tablet** 768px
- **desktop** 1024px

Spacing, control heights, and typography all density-scale at runtime. Touch targets have a floor: 44px on coarse pointers (mobile/tablet), 36px on fine pointers (desktop).

## Agent Prompt Guide

When asked to build UI "in the AWS Console aesthetic," default to:

- **Backgrounds:** `#161d26` for the page canvas; `#232d39` for floating cards.
- **Text:** `#ebebf0` for primary, `#c6c6cd` for secondary.
- **Accents:** `#42b4ff` for the single most important action; `#75cfff` for companion actions.
- **Radii:** 8px on surfaces and inputs; pill on buttons.
- **Padding:** 32px on cards, 16px on buttons, 12px on inputs.
- **Typography:** Open Sans for headings; Open Sans for body and labels.

## Sources

The AWS Console palette and shape language derive from publicly visible Amazon surfaces:

- https://cloudscape.design
- https://cloudscape.design/foundation/visual-foundation/design-tokens/
- https://cdn.jsdelivr.net/npm/@cloudscape-design/design-tokens@latest/index-visual-refresh.json
- https://aws.amazon.com/console/

## License

Void Energy ships under the Business Source License (BSL 1.1). Source is visible; production use requires a license from DGRS Labs until the four-year auto-convert clause elapses. This DESIGN.md file itself is distributed under the same license as the repository it lives in.

This atmosphere is an atmospheric study of publicly visible Amazon design language. Void Energy is not affiliated with, endorsed by, sponsored by, or licensed by Amazon. The atmosphere file contains color, motion, and typographic-rhythm tokens only — no brand logos, marks, or proprietary assets.

## The Full System

This file describes the **AWS Console** atmosphere as a single snapshot. The Void Energy runtime is larger:

- **Amazon variants** — see https://voidenergy.dev/atmospheres/amazon for the full set of atmospheres in this brand (alternate modes, eras, or interpretations).
- **Three physics presets:** glass (translucent + blur), flat (opaque + crisp shadows), retro (CRT phosphor + steps motion). Physics controls blur, border width, motion, and radius behavior — never color.
- **Two color modes:** light and dark. Glass requires dark; flat and retro work with both.
- **Density scaling:** Compact / Cozy / Standard / Roomy / Airy (×0.8 – ×1.2), applied multiplicatively to the spacing scale.
- **Component library:** Svelte 5 components (Runes) with a native-first pattern — wrappers around `<button>`, `<input>`, `<select>`, `<dialog>`, etc.
- **JSON download:** https://voidenergy.dev/atmospheres/amazon/cloudscape-dark.json is a portable artifact. Boot it in any Void Energy app via `voidEngine.loadExternal()`, or hand it to any tool that consumes the @void-energy/atmosphere-spec format.

For the full installable system, see the Void Energy repository. For agent-to-agent communication outside the live runtime, this DESIGN.md is the authoritative snapshot of the Amazon AWS Console aesthetic.