Amazon

---
version: alpha
name: Amazon-design-analysis
description: Amazon's design language is a dense, conversion-optimized e-commerce interface anchored on the signature orange `#ff9900` against a navy `#232f3e` header and white product canvas. Type is utilitarian, spacing is tight, and every element — buttons, price, reviews, badges — is tuned for scannability and action. Orange is used exclusively for the moments that matter: add-to-cart and the Amazon smile.

colors:
  primary: "#ff9900"
  primary_dark: "#e47911"
  primary_light: "#ffb04d"
  navy: "#232f3e"
  navy_deep: "#131a22"
  navy_soft: "#37475a"
  canvas: "#ffffff"
  surface: "#f0f2f2"
  surface_2: "#eaeded"
  fg_default: "#0f1111"
  fg_muted: "#565959"
  link: "#007185"
  border_default: "#d5d9d9"
  on_primary: "#0f1111"

typography:
  display-xxl:
    fontFamily: ""Amazon Ember", Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display-xl:
    fontFamily: ""Amazon Ember", Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.75px
  display-lg:
    fontFamily: ""Amazon Ember", Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-md:
    fontFamily: ""Amazon Ember", Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-lg:
    fontFamily: ""Amazon Ember", Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: ""Amazon Ember", Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: ""Amazon Ember", Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: ""Amazon Ember", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: ""Amazon Ember", Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: ""Amazon Ember", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption:
    fontFamily: ""Amazon Ember", Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
---

# Design System Inspired by Amazon

## 1. Visual Theme & Atmosphere

Amazon is the ultimate utility interface: dense, information-rich, and ruthlessly optimized for purchase. The white product canvas is framed by a deep navy `#232f3e` header, and the orange `#ff9900` of the smile logo is reserved for the single most important action — Add to Cart. There is no decorative flourish; every pixel earns its place.

## 2. Color System

- **Amazon orange** `#ff9900` — add-to-cart, primary CTA, the smile.
- **Navy** `#232f3e` (header/footer) stepping to `#37475a` and `#131a22`.
- Neutral surfaces `#ffffff` / `#f0f2f2` / `#eaeded` with hairline borders `#d5d9d9`.
- Text is near-black `#0f1111`, muted `#565959`; product links use the distinctive teal-blue `#007185`.

## 3. Typography

Amazon Ember (falling back to Arial) with a compact, high-density scale. Body runs 14px/1.4, prices render large and bold, and product titles are line-clamped. Hierarchy comes from size, weight, and color (price orange/red), not whitespace.

## 4. Components & Shape

The signature element is the "add to cart" pill — a full-radius yellow-orange button with a subtle inner gradient. Product cards are 1px-bordered white boxes with hover shadows. Ratings are compact star rows; badges (bestseller, deal) are small colored chips. Everything is clickable and dense.

## 5. Layout & Spacing

A rigid 12-column grid with minimal gutters (8-16px) to maximize product density. The header is a multi-row utility bar; search is oversized and central. Spacing is tight but consistent, favoring information over air.

## 6. Motion

Minimal and functional: hover states reveal shadows and a secondary CTA, and the cart updates without fanfare. Transitions are fast (<150ms) and never obstruct the purchase path.