Color Palette
Core Text Colors (High Usage)
Dark Gray (primary text)
#0F141A · ×4125
Blue (link)
#006CE0 · ×804
Dark Gray 2
#16191F · ×762
Blue 2 (brand link)
#0073BB · ×366
Mid Gray (placeholder)
#8C8C94 · ×72
Brand & Background Colors
Orange (CTA brand)
#FA6F00 · ×298
White (page)
#FFFFFF · ×285
Dark Gray 3 (surface)
#424650 · ×342
Dark Green (success)
#037F0C · ×85
Dark Blue (nav)
#232F3E · ×5
Orange 2 (AWS logo)
#FF9900 · ×8
Orange 3 (hover CTA)
#C95100 · ×6
Gray Scale & Light Surfaces
Light Gray 2
#DEDEE3 · ×56
Light Gray 3
#B4B4BB · ×29
Light Gray 4 (bg)
#EBEBF0 · ×12
White 3 (info tint)
#F0FBFF · ×3
White 4 (card bg)
#FAFAFA · ×2
Service Category & Gradient Colors
Blue 8 (info)
#42B4FF · ×4
Cyan (border)
#2EA597 · ×1
Purple 2 (border)
#9469D6 · ×1
Light Blue (gradient)
#BFE0FF · ×1
Light Purple (gradient)
#E6ABFF · ×1
Yellow (warning)
#B2911C · ×6
Typography
PRIMARY UI · AMAZON EMBER
Amazon Ember
Reliable. Scalable. The infrastructure you need to succeed in the cloud.
Regular · 400
Bold · 700
CODE · SOURCE CODE PRO (FALLBACK)
Source Code Pro
aws s3 cp ./myfile s3://my-bucket/
Times (base fallback)
Source Code Pro
AWS Cloud Computing Services
Heading 24px · Bold · line-height: 30px · letter-spacing: −0.48px
Build, deploy, and scale applications
Heading 21px · Bold · line-height: 24px · letter-spacing: −0.3px
EC2 · S3 · Lambda · RDS
Heading 20px · Bold · line-height: 24px · letter-spacing: −0.18px
200+ cloud services for compute, storage, and networking.
Body 18px · Regular · line-height: 24px · letter-spacing: −0.08px
Trusted by millions of customers in 190+ countries. 99.99% SLA on core services.
Body 16px · Regular · line-height: 22px · letter-spacing: +0.06px
Last updated 5 minutes ago · us-east-1 · Account: 123456789012
Body 14px · Regular · line-height: 21px · letter-spacing: +0.07px
COMPUTE · STORAGE · DATABASE
Label 12px · Bold · uppercase · letter-spacing: 0.4px
aws ec2 describe-instances --region us-east-1
Code · Source Code Pro · 12px · line-height: 18px
Letter Spacing — Near-Zero to Slightly Negative
Display
--letter-spacing-tight
−0.48px · largest headings (tightest in set)
Heading
--letter-spacing-normal
−0.3px · section headings
Body tight
--letter-spacing-wider
−0.08px · dense body copy
Body open
--letter-spacing-ls-6
+0.07px · smallest text, near-zero
Spacing
Spacing Scale
23 steps — 1px → 158px (includes sub-pixel 4.3125px and outlier 158px)
Borders
Border Radii — 12 tokens (with directional asymmetric variants)
sm (right)
0/7/7/0px · tab right
2xl (left)
7/0/0/7px · tab left
r10 (top)
16/16/0/0px · ×18
Notable: AWS uses paired left/right tab radii (0/7/7/0px and 7/0/0/7px) and top-only tab radii — a telltale CloudScape UI pattern for tabbed navigation panels.
Border Widths
--border-width-hairline
1px · ×346 — standard UI dividers, cards, table rows
--border-width-thin
2px · ×174 — focus rings, selected states, form inputs, CTAs
Shadow / Elevation
Shadow Tokens
6 tokens — navy-tinted shadows unique to CloudScape
sm — Wide bloom
×7
10% near-black · 4px offset, 20px spread — card default elevation
md — Button edge
×2
Tri-directional 1px inset shadows — creates button depth with dark cyan tint
lg — Upward bar
×1
50% black · −2px (upward) — bottom nav bar separator, footer edge
xl — Solid gray
×1
Non-transparent solid #5A5A5A — unique in set, used for dark input borders
shadow-5 — Soft lift
×1
8% black · 4px offset, 4px blur — table row hover, card gentle lift
shadow-6 — Left edge
×1
Horizontal left shadow — sidebar/panel left edge separator in drawer layouts
Z-Index
14 layers — the most comprehensive z-index system in this series. Notable cluster at 799/800/830/850 for CloudScape's layered navigation bar, and a triple-step at 10000/10001/10002 for notification stacking. Unlike most systems, AWS starts at 1 (not negative) and uses no sub-zero values.
| Layer | Value | Usage |
|---|
| z-1 (Base) | 1 | Positioned inline elements, base content |
| z-2 (Raised) | 2 | Hover cards, elevated inline surfaces |
| z-3 (Stack) | 3 | Multi-level cards, compound components |
| z-4 (Navigation) | 10 | Sticky sub-navigation, tab bars |
| z-5 (Nav pre) | 799 | Pre-navigation layer — background of top nav |
| z-6 (Nav main) | 800 | Primary CloudScape top navigation bar |
| z-7 (Nav dropdown) | 830 | Navigation megamenu / service dropdown |
| z-8 (Nav tooltip) | 850 | Navigation tooltips, above dropdown |
| z-9 (Modal+2) | 1002 | Modal content (2 above standard modal base) |
| z-10 (Toast) | 2000 | Toast notifications, flash messages |
| z-11 (Drawer) | 5000 | Side drawers, help panels |
| z-12 (Overlay) | 10000 | Full-screen overlays, loading screens |
| z-13 (Alert) | 10001 | Critical alerts stacked above overlay |
| z-14 (Absolute top) | 10002 | Topmost notifications — nothing above |
Breakpoints
6 breakpoints — 480px → 1020px. The most compact desktop ceiling in this series (1020px max, vs MongoDB's 2500px). A notable pair at 480/482px — a 2px gap between XS and SM — likely used to catch a specific device edge case. Similarly, 699/700px is a 1px straddling pair around the tablet threshold.
Opacity
○
No opacity tokens defined
The AWS design token extraction returned an empty opacity: {} object. No CSS custom property-based opacity tokens are defined. AWS CloudScape handles translucency via inline rgba() values embedded directly in its shadow and background color tokens (e.g., rgba(35,43,55,0.7) for dark nav overlay) rather than through a dedicated opacity scale.
Accessibility
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| #0F141A (Dark Gray) | #FFFFFF (White) | 18.5:1 | AAA |
| #0F141A (Dark Gray) | #FA6F00 (Orange) | 6.46:1 | AA |
| #0F141A (Dark Gray) | #B4B4BB (Light Gray 3) | 8.97:1 | AAA |
| #000000 (Black) | #FFFFFF (White) | 21:1 | AAA |
| #000000 (Black) | #FA6F00 (Orange) | 7.34:1 | AAA |
| #000000 (Black) | #B4B4BB (Light Gray 3) | 10.19:1 | AAA |
| #006CE0 (Blue/link) | #FFFFFF (White) | 4.97:1 | AA |
| #006CE0 (Blue/link) | #FA6F00 (Orange) | 1.74:1 | Fail |
| #006CE0 (Blue/link) | #424650 (Dark Gray 3) | 1.9:1 | Fail |
| #16191F (Dark Gray 2) | #FFFFFF (White) | 17.6:1 | AAA |
| #0073BB (Blue 2) | #FFFFFF (White) | 5.04:1 | AA |
| #037F0C (Dark Green) | #FFFFFF (White) | — | AA Large |
CSS Variables Reference
Dark Gray 3 (surface)--color-dark-gray-3#424650 · ×342
Orange (CTA brand)--color-orange#FA6F00 · ×298
White (page)--color-white#FFFFFF · ×285
Dark Green (success)--color-dark-green#037F0C · ×85
Light Gray 3--color-light-gray-3#B4B4BB · ×29
Light Gray 4--color-light-gray-4#EBEBF0 · ×12
Red (error)--color-red#DB0000 · ×9
Orange 2 (AWS logo)--color-orange-2#FF9900 · ×8
Dark Blue (nav)--color-dark-blue#232F3E · ×5
White 4 (card)--color-white-4#FAFAFA · ×2
White 3 (info tint)--color-white-3#F0FBFF · ×3
Dark Gray (primary text)--color-dark-gray#0F141A · ×4125
Black--color-black#000000 · ×1413
Blue (link)--color-blue#006CE0 · ×804
Dark Gray 2--color-dark-gray-2#16191F · ×762
Blue 2 (brand link)--color-blue-2#0073BB · ×366
Mid Gray (placeholder)--color-mid-gray#8C8C94 · ×72
Purple--color-purple#7300E5 · ×67
Light Gray--color-light-gray#C6C6CD · ×67
Mid Gray 2--color-mid-gray-2#656871 · ×48
Purple 2 (border)--color-purple-2#9469D6 · ×1
Cyan (border)--color-cyan#2EA597 · ×1
Light Blue (gradient)--color-light-blue#BFE0FF · ×1
Times (base/fallback)--font-family-baseTimes
Amazon Ember (brand UI)--font-family-2Amazon Ember
Regular--font-weight-regular400
Bold (only 2 weights)--font-weight-bold700
10px → 24px (9 sizes)2xs → 4xl
Tight ← (display)--letter-spacing-tight−0.48px
Normal ← (headings)--letter-spacing-normal−0.3px
Wide ← (body compact)--letter-spacing-wide−0.18px
Wider ← (dense body)--letter-spacing-wider−0.08px
Widest → (near-zero)--letter-spacing-widest+0.06px
LS-6 → (small text)--letter-spacing-ls-6+0.07px
Instant (90ms)--duration-instant0.09s · ×48
Fast (135ms)--duration-fast0.135s · ×8
Normal (165ms) — most used--duration-normal0.165s · ×189
Slow (200ms)--duration-slow0.2s · ×74
Slower (300ms)--duration-slower0.3s · ×1
Ease In-Out (most used)--easing-ease-in-outease-in-out · ×73
Linear--easing-linearlinear · ×48
No opacity tokensopacity: {}not defined
Base/Raised/Stack--z-1/z-2/z-31/2/3
Navigation--z-410
Nav cluster (pre/main/drop/tip)--z-5/6/7/8799–850
Modal--z-91002
Toast / Drawer--z-10/112000/5000
Overlay / Alert stack--z-12/13/1410000/10001/10002
XS/SM (2px gap!)--breakpoint-xs/sm480/482px
MD/LG (1px straddle)--breakpoint-md/lg699/700px
XL / 2XL (desktop max)--breakpoint-xl/2xl810/1020px
AWS / Amazon Web Services Design System · Generated 16/04/2026 · 56 color tokens · 2 font families · 2 font weights · 9 font sizes · 9 line heights · 6 letter-spacing (mostly negative) · 23 spacing steps · 12 radius · 2 border widths · 6 shadows · 5 durations · 2 easings · 14 z-index layers · 6 breakpoints · 0 opacity tokens