Amazon Global

name Amazon Global (US)

version 3.0.0

colors primary: "#febd69" # Amazon Smile Orange (Primary CTAs) secondary: "#232f3e" # Squid Ink (Header/Nav) link: "#007185" # Global Link Teal background: "#f3f3f3" # Neutral Grey Background surface: "#ffffff" # White Card Surface text-base: "#0f1111" # Primary Text Black text-muted: "#565959" # Secondary Metadata Grey

typography fontFamily: "Amazon Ember, Arial, sans-serif" baseSize: "14px" # Global retail standard is tighter headings: weight: 700 color: "#0f1111"

rounded button: "8px" # Standard retail roundness card: "4px" # Sharper card edges input: "3px"

Design System: Amazon Global Retail

Overview

A high-conversion, consumer-focused design system. Unlike the Business variant, this system uses warmer tones (Smile Orange) and a more compact typography scale to drive discovery and "buy now" intent.

Colors

• Squid Ink (#232f3e): The foundational color for navigation and identity. High contrast against white.

• Smile Orange (#febd69): Reserved strictly for high-value actions like "Add to Cart" or "Proceed to Checkout."

• Link Teal (#007185): Used for all interactive text and navigational links within the body.

• Neutral Backgrounds: Use #f3f3f3 for page gutters to make white product cards (#ffffff) pop.

Typography

• Primary Brand Font: Amazon Ember.

• Scale:

• Body: 14px (Retail standard for high scannability).

• Price Whole: 28px, Bold (The most important data point).

• Metadata: 12px for shipping and stock info.

• Line Height: 20px (Compact) to maximize vertical information density.

Components

• Buttons:

• Primary (Action): Gradient or solid fill of #febd69, black text, subtle 1px border.

• Secondary: Light grey/white fill with a clear #d5d9d9 border.

• Product Cards:

• Border-less or very subtle 1px border.

• Image takes priority (usually 180px - 220px squares).

• Navigation (The Belt):

• Dark Squid Ink background with white icons and light-grey subtext.

Layout & Spacing

• Container: Max-width of 1500px for homepages; 1200px for search results.

• Gutter: 20px between product grid items.

• Elevation: Use very subtle "Shadow-sm" on hover only; maintain flat surfaces by default.

Do's and Don'ts

• DO: Use "Amazon Prime" blue (#00a8e1) as a status badge only.

• DO: Keep product images on pure white (#ffffff) backgrounds.

• DON'T: Use the corporate blue scale from the .in portal; it feels too "B2B" for the Global store.

• DON'T: Use overly rounded corners (pill-shaped) for standard retail buttons.