Back to designs

DESIGN.md · explainx registry

Amazon Global

Amazon Global (US)

A high-conversion, consumer-focused design system using warmer tones and compact typography to drive discovery and purchase intent.

Design System#design#system#amazon#retail#ui#ux
Get a custom design.md for your product
DESIGN.md (markdown body)
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.

Usage

  1. Copy DESIGN.md into your project or paste it into your IDE agent chat.
  2. Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
  3. When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.

Common questions

What is Amazon Global on explainx.ai?
A high-conversion, consumer-focused design system using warmer tones and compact typography to drive discovery and purchase intent. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
What is DESIGN.md?
DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
Where is the source repo?
Maintainers link to github.com/Amazon/amazon-global. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
How current is this DESIGN.md?
Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
Need a fresh DESIGN.md from scratch?
Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.

Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.

List Your Design.md

Share your design system with AI agents worldwide

GET_STARTED →