Amazon

Amazon-the-company holds two visually-distinct design surfaces that have run on different chassis for nearly two decades. AWS Console, the institutional cloud register, runs on Cloudscape — one of the rare design systems with publicly documented token tables, where every border-radius, motion duration, and palette role resolves to a published value rather than an approximation. amazon.com retail, the consumer commerce register, runs on the orange-arrow lineage that predates most contemporary design systems and has barely shifted its global-header chrome across the brand's modern history. The two surfaces share little beyond a humanist-sans type family — Cloudscape ships Open Sans first in its stack, retail ships proprietary Amazon Ember — and the discipline of letting palette do the brand-signal work where ornament could be reached for.

AWS Console Storefront

AWS Console

The AWS Console register, transcribed verbatim from Cloudscape Design System's documented dark tokens. Signature institutional cool-tinted near-black canvas (#161d26, distinct from Carbon gray-100 and Fluent warm-gray), surface lifted to the documented #1b232d cell-shaded tone, AWS Blue brightened to #42b4ff to clear AA against the lifted ground, type rhythm and -7% density tuned for the cluster tables and monitoring dashboards the Console was built around. Cloudscape is one of the rare design systems with publicly documented token tables, and the atmosphere honors that discipline — every palette value here resolves to a Cloudscape token rather than an approximation. Dark-mode only by design: the AWS Console is iconic in its dark register, and pairing it with a light Cloudscape sibling would only differ from amazon-retail-light by primary color (both flat-light on white) rather than register. A study in how a cloud platform's chrome carries identity through tokens rather than typography ornament.

Install at runtime

Run this snippet in any browser console where Void Energy is loaded (or paste it into your app's bootstrap). The atmosphere registers with the engine and renders immediately as a temporary preview — it persists in the visitor's preferences only if they Apply it site-wide.

Physics: flat

Mode: dark

Density: x0.93

Live preview

Two surfaces rendered against the active atmosphere. The hero shows how the brand speaks — display type, conversion chrome, texture. The workspace below shows how it feels in the hand — focus rings, controls, toggle glide, dialog motion. The markup is identical on every brand; the atmosphere's tokens carry every difference.

Rendered live in this atmosphere

Built in minutes. True to Amazon.

Plain Void Energy markup, zero custom CSS — the headline's display weight and tracking, the CTA's comet and pill, and every control below are this brand's tokens doing the talking.

Try the controls

Workspace settings

Welcome back

Configure how you collaborate, then jump back into the channels you were active in.

Workspace name

Invite teammate

Search by name or email — Combobox with descriptions.

Notifications

Atmosphere updates

Mentions and replies

Weekly digest

Recent channels

Typography

Headings, body, and signal text rendered against the active atmosphere.

Typefaces

The active heading and body families — brand override first, atmosphere default second.

Heading · --font-heading

Open Sans

Body · --font-body

Open Sans

Heading scale

Six levels, each picking up the brand's weight, tracking, and transform tokens.

h1 — Amazon

h2 — AWS Console

h3 — Subsection

h4 — Section header

h5 — Subheading

h6 — Minor subheading

Body & secondary text

Standard reading copy and supporting metadata.

Paragraph — body typography, dim color. Standard readable text for descriptions and content.

Small — small typography, mute color. Used for captions and metadata.

Caption — caption level utility class.

Brand overrides

Beyond the typeface, brand profiles can tune weight, tracking, and text-transform per role. Display covers h1/h2, Heading covers h3/h4, Body covers paragraphs and small text, Button covers all .btn-* labels. Anything not declared inherits from the atmosphere's defaults.

Supported overrides & this brand's values

A brand profile can override 4 weights, 4 trackings, and 3 transforms (Body has no transform — prose never gets uppercased).

Display weight (h1, h2) · --weight-display 600
Display tracking (h1, h2) · --tracking-display …
Display transform (h1, h2) · --text-transform-display …
Heading weight (h3, h4) · --weight-heading 600
Heading tracking (h3, h4) · --tracking-heading …
Heading transform (h3, h4) · --text-transform-heading …
Body weight (p, small) · --weight-body …
Body tracking (p, small) · --tracking-body …
Button weight (.btn-*) · --weight-button 600
Button tracking (.btn-*) · --tracking-button …
Button transform (.btn-*) · --text-transform-button …

Palette & shape

The color palette, corner geometry, and motion curves under the active atmosphere. Atmospheres change the values; the architecture never moves.

Energy — Brand axis

The two colors that change most per atmosphere. Primary drives CTAs, focus rings, and active states. Secondary sweeps through the CTA's comet border alongside primary, tints button hover and press feedback, and — in dark mode — paints the resting toggle thumbs in the preview.

energy-primary

energy-secondary

Surfaces

Background layers from the depth model. Canvas is the floor — sunk and spotlight are its recess and ambient variants. Surface is where floating elements live. Every tile carries --border-color at var(--physics-border-width), so the border tier is visible on each outline.

bg-canvas

bg-sunk

bg-spotlight

bg-surface

Signal — Text hierarchy

Three emphasis levels for information hierarchy.

Main Dim Mute

Color extensions

Two additional palettes layered on top of the five-layer system. Semantic colors hold steady by design; the data palette derives from primary, so it re-hues with every brand.

Semantic — four signal colors whose meaning never moves: success is green and error is red on every brand, so users learn them once. Premium (also the warning tier) and system (the feature accent) are the deliberately tunable pair — roughly 40 catalog atmospheres re-tune premium and 15 re-tune system when their energy hues would clash, while none move success or error.

Success

Positive outcome

Error

Destructive, failure

Premium

Attention, cost

System

Informational

Data — 8 categorical slots hue-rotated 45° per step from --energy-primary in OKLCH, so the strip below re-hues with every brand: cool atmospheres yield cool-leaning palettes, warm yield warm-leaning. Use for chart series, chips, tags, kanban columns, avatar fallbacks, and calendar categories — anywhere unrelated-by-severity data needs distinct identity. Not for severity (data-3 means "third slot," not "success"). Auto-contrast handles text color on any bg-data-* tile.

data-1

data-2

data-3

data-4

data-5

data-6

data-7

data-8

Radii — corner geometry

All five radius levels, rendered with the active atmosphere's tokens. Brand-overridden values are emphasized.

--radius-sm 4px

--radius-md 8px

--radius-lg 12px

--radius-xl 16px

--radius-full …

Motion

Brand profiles can also override the system's speeds and easing curves. The square below uses --speed-slow and --ease-spring-snappy — both carried by the brand axis when set, otherwise inherited from the active physics preset. Hover the demo to play.

Supported overrides & this brand's values

A brand profile can override 3 speed levels and 4 easing curves. Anything not declared inherits from the active physics preset (glass / flat / retro). Cascade delays (--delay-cascade, --delay-sequence) are physics-only and not part of the brand axis.

Fast · --speed-fast 115ms
Base · --speed-base 165ms
Slow · --speed-slow 250ms
Flow · --ease-flow cubic-bezier(0, 0, 0, 1)
Spring (gentle) · --ease-spring-gentle …
Spring (snappy) · --ease-spring-snappy cubic-bezier(0.84, 0, 0.16, 1)
Spring (bounce) · --ease-spring-bounce …