# aws.amazon.com Design System

> High-contrast utility architecture defined by deep slate foundations, Amazon Ember Display typography, and generous 40px radius containers.

**Source:** https://aws.amazon.com | **Captured:** 2026-06-17 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
The AWS design system is a high-density, utility-first framework built for technical clarity. It utilizes a primary palette of deep charcoal (#161d26) and slate (#232b37) against a clean white canvas, punctuated by a functional "Signal Blue" (#006ce0) for interactive elements. Typography is anchored by **Amazon Ember Display**, favoring a medium weight (500) for both display and UI labels to maintain legibility across complex information hierarchies. A distinctive 40px border radius is applied to major content containers and primary buttons, creating a "soft-tech" aesthetic that balances the rigorous, grid-heavy layout.

## Signature DNA
1. **The Slate Foundation** (#232b37 and #161d26 used for text, inverted surfaces, and primary UI borders to create a high-contrast, authoritative environment).
2. **Ember Medium Display** (Amazon Ember Display at weight 500 is used for everything from 40px heroes to 16px UI labels, providing a consistent brand voice).
3. **Hyper-Rounded Containers** (The use of 40px radii on primary cards and buttons softens the technical density of the cloud infrastructure data).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| None captured | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--rg-color-text-primary` | `#161d26` | Primary text, inverted backgrounds, high-contrast borders | 168 | 1 | Computed style |
| `--rg-color-background-page` | `#ffffff` | Primary page background | 50 | 1 | Computed style |
| `--rg-color-background-object` | `#f3f3f7` | Secondary surfaces, card backgrounds, code windows | 49 | 1 | Computed style |
| `--rg-color-base-gray-100` | `#f9f9fb` | Tertiary surfaces, subtle section backgrounds | 11 | 1 | Computed style |
| `--rg-color-base-grey-950` | `#0f141a` | Inverted page backgrounds, dark mode surfaces | 7 | 1 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--rg-color-text-body` | `#232b37` | Secondary text, subheadings, inverted object backgrounds | 84 | 1 | Computed style |
| `--rg-color-link-default` | `#006ce0` | Primary links, focus states, info status | 5 | 1 | Declared token |
| `--rg-color-accent-blue` | `#0972d3` | Interactive text and link states | 99 | 0.8 | Computed style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--rg-color-status-success` | `#00802f` | Success states |
| `--rg-color-status-error` | `#db0000` | Error states |
| `--rg-color-status-warn` | `#d14600` | Warning states |
| `--rg-color-status-info` | `#006ce0` | Informational states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Amazon Ember Display | 400, 500 | Primary UI, Headings, Body | Inter | Proprietary |
| Arial | 400, 700 | Fallback, secondary body | Arial | Standard |
| Amazon Ember Mono | 400 | Code snippets, technical captions | JetBrains Mono | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{display.xl}` | 40px | 44px | normal | 500 | Homepage hero h1 | `h1.rghr_8711ccd9` |
| `{heading.lg}` | 32px | 40px | normal | 500 | Section headers | `h2.rgic_8711ccd9` |
| `{heading.md}` | 28px | 36px | normal | 500 | Sub-section headers | `h2.rgca_8711ccd9` |
| `{title.md}` | 18px | 24px | normal | 500 | Component titles | `h4.rgic_8711ccd9` |
| `{body.lg}` | 18px | 26px | normal | 400 | Lead paragraphs | `p.rgic_8711ccd9` |
| `{body.md}` | 16px | 24px | normal | 400 | Default body text | `a.rgca_8711ccd9` |
| `{body.sm}` | 14px | 22px | normal | 400 | Secondary body/labels | `span` |
| `{caption.mono}` | 12px | 16px | normal | 400 | Technical metadata | `span.rgca_8711ccd9` |

### Principles
1. **Medium is the Message**: Use weight 500 for all structural text (headings, button labels, navigation) to ensure authority.
2. **Technical Mono**: Use Amazon Ember Mono for any string representing infrastructure, code, or data values.
3. **High Contrast Text**: Body text must maintain at least 14:1 contrast (Slate #232b37 on White #ffffff).

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 50 |
| `{space.sm}` | 8px | 32 |
| `{space.md}` | 16px | 31 |
| `{space.lg}` | 24px | 38 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default layout blocks | 314 occurrences |
| `{radius.sm}` | 8px | Interactive controls | 21 occurrences |
| `{radius.md}` | 16px | Standard content cards | 96 occurrences |
| `{radius.lg}` | 40px | Hero buttons, primary containers | 37 occurrences |

## Elevation
Not captured in source. The system relies on flat surfaces and 1px-2px borders for depth.

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary CTAs
**Pages observed:** https://aws.amazon.com, https://aws.amazon.com/pricing
**Spec:** Background: transparent (secondary) or #161d26 (primary) / Text: #333333 / Radius: 40px / Padding: 10px 26px / Typography: 14px 400
**States observed:** Default | Hover: captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 2: Patterns
#### Content Card
**Role:** Feature highlights and customer stories
**Pages observed:** https://aws.amazon.com, https://aws.amazon.com/pricing
**Spec:** Background: #f3f3f7 / Radius: 16px / Padding: 24px / Typography: 14px (Body)
**States observed:** Default | Hover: captured

#### Pricing Card
**Role:** Service pricing tiers
**Pages observed:** https://aws.amazon.com/pricing
**Spec:** Background: #ffffff / Border: 2px #0f141a / Radius: 40px / Padding: 8px 24px
**States observed:** Default

### Tier 3: Surface-specific
#### Infrastructure Panel
**Role:** Region and availability zone selection
**Pages observed:** https://aws.amazon.com
**Spec:** Background: #f3f3f7 / Radius: 0px / Typography: 14px Arial
**States observed:** Default

#### Global Navigation
**Role:** Top-level site routing
**Pages observed:** https://aws.amazon.com
**Spec:** Background: #ffffff / Text: #161d26 / Height: ~64px
**States observed:** Default

#### Footer
**Role:** Sitemap and legal
**Pages observed:** https://aws.amazon.com
**Spec:** Background: #161d26 / Text: #ffffff / Typography: 14px Arial
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1280px (approx) |
| Grid | 12-column |
| Section Padding | 40px - 80px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; 40px radius maintained on primary cards. |
| Desktop | 1440px | Multi-column grids for feature cards (3-up or 4-up). |

## Imagery & decoration
AWS uses high-quality automotive and industrial photography to ground abstract cloud concepts. Decorative elements include geometric "shards" in brand colors (magenta, orange, blue) used as background accents in hero sections.

## Do's
- Use `#161d26` for primary headings to ensure maximum contrast.
- Apply `{radius.lg}` (40px) to all primary "Get Started" buttons.
- Use `Amazon Ember Mono` for any technical identifiers or region codes.
- Maintain a minimum of 24px padding within content cards.
- Use `#f3f3f7` for secondary background sections to break up long white pages.

## Don'ts
- **Wrong:** Using `#006ce0` (Signal Blue) for large background surfaces. **Right:** Use it only for links and status indicators. **Reason:** Overuse of accent colors dilutes the technical authority of the slate palette.
- **Wrong:** Labeling a sub-brand's orange button as "AWS Primary." **Right:** AWS Primary is always Slate `#161d26` or White `#ffffff`.
- Do not use border radii smaller than 16px for content-containing cards.
- Do not use weight 700 for Amazon Ember Display; stick to 500 for emphasis.

## Similar brands
- Google Cloud
- Microsoft Azure
- IBM Cloud
- DigitalOcean

## Quick start
```css
/* CSS Custom Properties */
:root {
  --aws-slate-deep: #161d26;
  --aws-slate-body: #232b37;
  --aws-blue-signal: #006ce0;
  --aws-gray-surface: #f3f3f7;
  --aws-radius-card: 16px;
  --aws-radius-pill: 40px;
  --font-display: "Amazon Ember Display", sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using the AWS system: background #161d26, text #ffffff, 40px border radius, and Amazon Ember Display Medium."
- "Generate a feature card with a #f3f3f7 background, 16px border radius, and 24px internal padding."
- "Design a technical metadata label using 12px Amazon Ember Mono on a #f9f9fb background."

## Known gaps
- Shadow tokens were not captured in the evidence; the system appears to favor flat borders or high-contrast background shifts.
- Hover state hex values for primary buttons were not explicitly tokenized in the source.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main Homepage | https://aws.amazon.com | 1440px | 2026-06-17 |
| Pricing Page | https://aws.amazon.com/pricing | 1440px | 2026-06-17 |
| Mobile Homepage | https://aws.amazon.com | 390px | 2026-06-17 |