AWS Design System

Overview

AWS's marketing homepage operates on a different register than its console. Editorial Restraint for 200 Services. Where the AWS Management Console runs dense charcoal surfaces with 4px rounding, the marketing site is a white editorial canvas: a 40px Amazon Ember Display headline, a measured body paragraph, and a scrolling grid of news cards and service thumbnails. Where Cloudflare puts its brand color on the full hero canvas and Vercel uses matte black as the floor, AWS uses white — the most neutral possible stance for a platform that must sell compute, AI, storage, networking, and databases without privileging any one domain.

The chromatic system is minimal for a company with 200+ services: one cerulean-blue voltage ({colors.primary} — #0972d3) for links and interactive states, four near-black prose tones for the text hierarchy, and an above-fold thumbnail strip that cycles spectral gradient stops (mint-to-cerulean, fuchsia-to-indigo) as editorial variety rather than brand color. The orange Amazon smile mark is present in the wordmark but absent from any interactive or structural role; the marketing color story is cold.

The radius scale is notably generous for enterprise infrastructure: 16px default on cards, 40px pill CTAs, 8px on nav chips. This softness is a deliberate distance from the Console's tighter chrome. Amazon Ember Mono — appearing in service-tag chips and pricing metadata — is the system's quiet technical signal.

Key Characteristics:

• White canvas ({colors.canvas} — #ffffff) with a barely-there #f3f3f7 surface tone for card backgrounds. No dark hero, no brand-color floor.
• Single cerulean-blue voltage ({colors.primary} — #0972d3) wired as link, focus, selected, status-info across 354 captured occurrences.
• Four near-black prose tones: ink-heading (#161d26), ink-body (#232b37), ink-secondary (#333333), ink-muted (#72747e) — zero pure black in prose.
• Amazon Ember Display across all display and body tiers; Amazon Ember Mono for service metadata and code annotations.
• 40px hero h1 at weight 500 — restrained for the scale of the brand; not the 700-weight hero that fintech brands lean on.
• Generous-soft radius: 16px default (71 occurrences), 40px pill CTA (26 occurrences), 8px nav chips (30 occurrences).
• Pitch-black top nav (#0f141a) with white link text — the single dark surface on an otherwise all-white page.
• Five named spectral gradients (blue, teal, purple, fuchsia, orange) used on hero thumbnails and editorial illustration, not on interactive chrome.

Colors

Brand / Interactive

• Primary Blue ({colors.primary} — #0972d3): frequency 354. Used as text (173), border (173), gradient stop (8). Wired as --rg-color-link-default, --rg-color-link-focus, --rg-color-link-selected, --rg-color-status-info. The single interactive voltage across the entire marketing surface — carries every link, every CTA underline, every focus ring.
• Primary Dark ({colors.primary-dark} — #003b8f): frequency 0 (declared, not rendered on captured surface). Hover state for the primary voltage, wired as --rg-color-link-hover.

Text

• Ink ({colors.ink} — #161d26): frequency 228. Used as text (109) and border (109). The dominant heading color — title, eyebrow, and high-contrast text wired as --rg-color-text-title, --rg-color-text-primary, --rg-color-text-heading.
• Ink Body ({colors.ink-body} — #232b37): frequency 137. Used as text (68) and border (68). Default running text: --rg-color-text-body, --rg-color-text-secondary.
• Ink Secondary ({colors.ink-secondary} — #333333): frequency 874. Used as text (438) and border (432). The structural label and subhead tone. Wired as --rg-color-base-gray-700.
• Ink Muted ({colors.ink-muted} — #72747e): frequency 12. Used in faded text states and medium-contrast borders. Wired as --rg-color-text-faded, --rg-color-border-mediumcontrast.
• Ink Faded ({colors.ink-faded} — #a4a4ad): frequency 72. Used as text (36) and border (36). The footer and caption gray. Wired as --rg-color-base-gray-450.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 189. The page floor, card interiors, and body content. Pure white.
• Surface-1 ({colors.surface-1} — #f3f3f7): frequency 32, all as background. Card background, code-window fill, thumbnail tile background. Wired as --rg-color-background-object, --rg-color-code-window.
• Surface-2 ({colors.surface-2} — #dedee3): frequency 1, background. A slightly-darker gray for elevated chips and dividers.
• Nav Background ({colors.nav-bg} — #0f141a): frequency 6. The pitch-black top-nav and footer surface. Wired as --rg-color-background-page-inverted.

Hairlines

• Hairline ({colors.hairline} — #ccccd1): frequency 1. Low-contrast border for card outlines and dividers. Wired as --rg-color-border-lowcontrast.

Semantic

• Error ({colors.error} — #db0000): frequency 1, background. Status error, wired as --rg-color-base-red-600 / --rg-color-status-error.

Typography

Font Families

Two Amazon-proprietary voices: Amazon Ember Display for every spoken surface — headlines, headings, body paragraphs, buttons, nav links — and Amazon Ember Mono for every annotated surface — service-tag chips, pricing metadata, and code-style annotations. Fallback stacks walk "Amazon Ember", "Helvetica Neue", Helvetica, Arial, sans-serif and Consolas, "Andale Mono WT", "Andale Mono", monospace.

This is the same two-voice split as Cloudflare (sans + mono), but where Cloudflare's Apercu Mono Pro carries 138+ samples, Amazon Ember Mono is used more sparingly — confined to service-category chips and pricing tables.

Hierarchy

Principles

Display weight tops out at 500. The hero h1 at 40px / 500 is the loudest typographic moment — measured for a brand that must carry 200+ services without privileging any one. Bold (700) appears only on emphasized inline <strong> text, not in structural headings. The weight discipline mirrors Cloudflare's: confidence through scale and proportion, not through weight.

Note on Font Substitutes

Both Amazon Ember families are proprietary. For Amazon Ember Display, Inter at the same weights transfers cleanly; the proportions are close at 16–18px body sizes and at the 28–40px display tier. For Amazon Ember Mono, IBM Plex Mono or JetBrains Mono at the same 10–14px sizing are functional substitutes.

Layout

Spacing System

• Base unit: 4px (appearing 32 times as the smallest gap value).
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 40px · {spacing.3xl} 56px · {spacing.4xl} 120px.
• Section padding: ~120px top/bottom on major hero bands (--rg-margin-1 / --rg-padding-1).
• Card internal padding: {spacing.lg} (24px) on the default card grid.
• CTA padding: 10×26px on the pill primary button.

Grid & Container

• Max content width: ~1280px on the hero; the "What's new" card grid and "From startups to enterprises" section sit in a ~1080px centered container.
• Hero: left-aligned 40px headline + 20px sub-paragraph + pill CTA; right half carries a 2×2 spectral-gradient thumbnail panel.
• "What's new" grid: 3-column grid of editorial thumbnail cards with {colors.surface-1} background and {rounded.md} 16px rounding.
• Feature sections: alternating 2-column split (text left, image/thumbnail right) and full-width editorial bands.

Rhythm

The page alternates between editorial dek (headline + sub-paragraph, white canvas, generous spacing) and dense card grid (3- or 4-up thumbnail rows with {colors.surface-1} cards). Section transitions are hard cuts — no gradient crossfades, no color-band transitions. The pitch-black nav and footer anchor top and bottom without bleeding into the white body.

Elevation

The marketing surface uses a light shadow system rather than a hairline-only approach:

• Card lift: --rg-shadow-gray-elevation-1: 1px 1px 20px rgba(0,0,0,0.1) — used on hover states for thumbnail cards.
• Menu lift: --rg-shadow-gray-elevation-2: 1px 1px 24px rgba(0,0,0,0.25) — used on mega-menu dropdowns.
• Hairline borders: {colors.hairline} (#ccccd1) and {colors.surface-2} on card outlines. The system uses both shadow and hairline — not shadow-only (Cloudflare) and not tonal-lift-only (Spline).

Shapes

The radius scale is generous-soft, centered on 16px with a 40px pill for CTAs:

• {rounded.none} 0px — text inputs and inline dividers only.
• {rounded.xs} 4px — service-tag chips, small nav surfaces.
• {rounded.sm} 8px — nav link hover tiles, smaller cards.
• {rounded.md} 16px — the dominant card radius (71 occurrences); editorial thumbnail cards, feature panels, content tiles.
• {rounded.lg} 24px — larger feature cards (8 occurrences).
• {rounded.pill} 40px — primary and secondary CTA buttons (26 occurrences); the warmest tap target on the page.
• {rounded.full} 9999px — avatar chips and circular logo marks.

There is no tight 2–3px tier. Even the smallest service-tag chip starts at 4px. The scale is substantially softer than AWS's console and softer than Cloudflare's marketing binary (3–8px or full pill).

Components

button-primary — Cerulean-blue {colors.primary} fill, white text, {rounded.pill} 40px radius, 10×26px padding, 44px height. The "Get started" / "Create account" canonical form.

button-primary-inverted — Used in the pitch-black nav band: {colors.nav-bg} fill with cerulean-blue {colors.primary} text. Inverts the CTA figure-ground for dark-surface contexts.

button-secondary — White canvas fill, ink text, {rounded.pill} 40px radius, 1px hairline border. Used alongside the primary for "Learn more" secondary actions.

top-nav — Pitch-black {colors.nav-bg} surface, white text in {typography.nav-link}, 56px height, 32px horizontal padding. Houses the Amazon logo (orange smile mark on dark), dense mega-menu triggers, a search input, and "Sign in to Console" / "Create account" cluster.

nav-link — Transparent fill, white text, {rounded.sm} 8px radius on hover. 14px / 400. The pitch-black surface makes hover states invisible until activated — typical for dark nav bars.

hero-heading — Near-black {colors.ink} text, {typography.display-xl} (40px / 500). Left-aligned against the white canvas — no colored background, no gradient, no hero block.

section-heading — Near-black text, {typography.display-lg} (32px / 500). Used for "What's new," "From startups to enterprises," and similar section-entry headings.

body-paragraph — {colors.ink-body} text at {typography.body-lg} (18px / 400) for the hero sub-paragraph; {typography.body-md} (16px / 400) for section body.

card — {colors.surface-1} (#f3f3f7) fill, ink text, {rounded.md} 16px radius, 24px padding, 1px {colors.surface-2} border. The default content card for the "What's new" editorial grid.

card-hairline — White canvas fill, ink text, {rounded.md} 16px radius, 1px {colors.hairline} border. Used where cards sit on the surface-1 background rather than on white.

thumbnail-card — {colors.surface-1} fill, {rounded.md} 16px radius, 0 padding. The image fills edge-to-edge. Used in the "What's new" 3-up grid and the hero thumbnail panel.

service-tag — {colors.surface-1} fill, ink-body text, {typography.mono-sm} (10px Amazon Ember Mono), {rounded.xs} 4px radius, 4×8px padding. The small service-category chip that identifies AWS compute, storage, AI taxonomy.

text-input — White canvas fill, ink-body text, {rounded.none} 0px radius, 0×16px padding, 44px height. Search bar in the nav uses a variant on {colors.nav-bg} fill.

footer — Pitch-black {colors.nav-bg} fill, faded {colors.ink-faded} text at {typography.body-sm}, 40×32px padding.

link-text — {colors.primary} (#0972d3) text color, underline on hover. The canonical inline link treatment across body paragraphs, card CTAs, and nav anchors.

mono-chip — Amazon Ember Mono at {typography.mono-md}, {colors.surface-1} fill, {rounded.xs} 4px. Used for pricing metadata and service-tab labels.

section-divider — 1px {colors.surface-2} border. Hairline rule separating editorial sections.

Do's and Don'ts

Do keep the hero h1 at weight 500. The 40px / 500 display is deliberate restraint for a platform that sells 200+ services simultaneously — no single headline can dominate. Bumping to 700 turns one section's headline into a brand statement and breaks the editorial neutrality.

Do treat {colors.primary} (#0972d3) as a link and interactive-state voltage only. It does not appear as a button background in the captured hero (the CTA inverts the figure-ground on the dark nav instead). Using it as a fill color below the fold competes with its role as the link signal.

Do use {colors.surface-1} (#f3f3f7) — not white — for card backgrounds that sit on the white page canvas. The barely-visible tonal distinction reads as structural lift without shadows.

Do use the 40px pill radius ({rounded.pill}) only for primary and secondary CTAs. Applying it to cards or section containers breaks the binary logic: soft rounding on cards (16px), pill rounding only on tap targets.

Don't use the spectral gradient families ({colors.gradient-blue-start}, {colors.gradient-purple-start}, etc.) as CTA fills or heading backgrounds. They are thumbnail-illustration fills — mixing them into interactive chrome makes the gradient system feel decorative rather than editorial.

Don't use pure black for prose text. The system runs four near-black tones (ink heading through ink faded) that carry the full prose hierarchy; dropping to pure black at any tier breaks the graduated warmth of the text scale.

Don't introduce a 2–3px radius tier. The scale starts at 4px ({rounded.xs}) — adding tighter corners imports the Console's denser aesthetic into the marketing surface.

Don't remove the pitch-black nav/footer contrast. The {colors.nav-bg} (#0f141a) top and bottom bands are the only dark surfaces on an otherwise all-white page; they anchor the layout's vertical hierarchy. A white or gray nav removes the only structural contrast signal.

Known Gaps

• Brand orange (Amazon smile): the orange Amazon smile mark is visually iconic but does not appear as a rendered color in the extracted marketing surface. The token --rg-color-base-orange-* family exists in CSS but carries no marketing-surface usage — orange is a logo asset, not a system color.
• Dark mode: the captured marketing surface is light-only. The Console has a dark variant, but no dark-mode design tokens are wired into the marketing page's :root.
• Hover and focus states: documented for {component.button-primary} and {component.nav-link} only; the full state matrix (disabled, error, loading) lives in the Cloudscape design system (AWS's internal React component library) not exposed on the marketing surface.
• Mega-menu surfaces: the nav mega-menu (which reveals service categories in a two-column panel) carries its own card and link surface tokens not captured in this spec.
• Product surfaces: this DESIGN.md captures the marketing homepage only. The AWS Console, the service-specific marketing pages (S3, EC2, Bedrock, SageMaker), and the AWS documentation site each carry their own visual systems — Cloudscape for the Console, a different editorial system for documentation.
• Mobile-first breakpoints: the marketing homepage reflows aggressively below 1024px (hero switches to single-column, card grid collapses to 1-up) but breakpoint-specific token overrides are not captured here.
• Animation: the hero thumbnail strip appears to auto-advance through gradient combinations on a timer; easing curves and transition duration are not represented in the extracted static tokens.