Amazon

Overview

Amazon is a customer-centric e-commerce and cloud services platform serving millions of users globally. The design system embodies **Pragmatic Minimalism**—a philosophy that prioritizes clarity, efficiency, and trust over decorative flourish. Every visual element serves a functional purpose: the interface recedes to let products and information take center stage. The emotional response is one of confidence and ease: users should feel empowered to find, compare, and purchase with minimal friction. The brand personality is direct, helpful, and data-driven. Amazon's voice is conversational yet authoritative, avoiding hyperbole and marketing jargon. Vocabulary favors action words ("Get," "Save," "Shop") and concrete benefits over abstract promises. Example sentence in brand voice: "Get free delivery on millions of items—join Prime today."

Colors

The color palette is anchored by a warm, energetic primary (Febd69 #febd69) used exclusively on call-to-action buttons, search submit, and key interactive elements. This golden-yellow creates visual urgency without aggression. Secondary (2162a1 #2162a1), a professional blue, anchors navigation, links, and hero sections, conveying trust and stability. Tertiary (cc0c39 #cc0c39), a deep crimson, is reserved for alerts, limited-time offers, and error states—commanding attention when necessary. The surface stack is anchored in pure white (#ffffff) for maximum content legibility, with carefully calibrated grays (f0f2f2 #f0f2f2 for container-low, e6e6e6 #e6e6e6 for container, d5d9d9 #d5d9d9 for container-high) that provide subtle visual separation without creating harsh contrast. On-surface text

Typography

The type system uses a three-tier hierarchy: Amazon Ember Modern Display (a proprietary geometric sans-serif optimized for headlines) at 40px–56px for display and headline levels, Amazon Ember Modern Text (a refined variant) at 20px for titles, and system Arial at 14px–18px for body and labels. This pairing communicates premium product positioning while maintaining web-safe fallback reliability. Display (56px, 700 weight, -0.02em tracking) is reserved for hero statements and major page titles. Headline-lg (40px, 700 weight) anchors section headers. Body-md (16px, 400 weight, 24px line-height) is the default reading size, optimized for product descriptions and instructional copy. Label-md (14px, 600 weight, 0.01em tracking) is used for buttons, form labels, and UI chrome. On small labels ov

Layout

The layout uses a 12-column fluid grid with a maximum container width of 1400px, allowing content to scale gracefully from mobile (single column) to desktop (multi-column). The gutter is 20px on desktop, reducing to 12px on tablet and 8px on mobile. Section separation uses lg spacing (40px) between major content blocks, creating a breathing rhythm that guides users through the page. The hero section spans full width with 40px padding on desktop, establishing visual dominance. Product cards are arranged in a 4-column grid on desktop, 2 columns on tablet, and 1 column on mobile. White space is used strategically: the search bar sits in a contained 100% width header (height 56px) with 12px internal padding, and category navigation below uses 24px horizontal padding. Container max-width of 140

Elevation & Depth

Depth in Amazon's design is achieved through subtle layering rather than dramatic shadows. The elevation system uses three levels: Level 1 (Base) is the white surface (ffffff #ffffff) with no shadow, representing the primary content plane. Level 2 (Card/Container) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that lifts cards 8px above the base. This shadow is applied to product cards, modals, and dropdowns. Level 3 (Modal/Overlay) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), creating deeper separation for full-page modals and critical overlays. Hover sta

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are used to soften the utilitarian grid while maintaining clarity and scannability. Border-radius follows a deliberate scale: sm (2px) for minimal softening on small UI elements like badges and inline buttons, DEFAULT (4px) for standard containers and form inputs, md (5px) for product cards and list items, lg (8px) for larger cards and modals, and xl (12px) for hero banners and featured sections. Buttons use md (5px) radius, creating a subtle roundness that feels modern without appearing playful. Product cards use md (5px) to maintain

Components

Action Elements Buttons are the primary interaction affordance. The button-primary component uses primary yellow (febd69 #febd69) background with on-primary text (0f1111 #0f1111), 40px height, 8px vertical and 16px horizontal padding, and md (5px) border-radius. On hover, the background transitions to primary-container (f3a847 #f3a847) over 150ms (transition: background-color 150ms ease-out). On active/press, the background shifts to inverse-primary (ff9900 #ff9900), providing tactile feedback. The search submit button follows the same styling but is positioned absolutely within the search input at 40px height, with pointer-events: auto to ensure clickability. Button-secondary uses a transparent background with a 1px outline-variant border, allowing secondary actions to coexist without

Do's and Don'ts

**Do**

• Do use primary yellow (#febd69) exclusively on CTAs and interactive affordances—never on backgrounds or body text.
• Do maintain 40px minimum spacing between major content sections to create visual breathing room and guide user attention.
• Do apply focus outlines (3px rgba(33, 98, 161, 0.3)) to all interactive elements for keyboard navigation accessibility.
• Do use the three-tier shadow system (Level 1 none, Level 2 0 3px 8px, Level 3 0 8px 24px) consistently across cards and modals.
• Do pair Amazon Ember Modern Display with Arial body text to balance premium positioning with web-safe reliability.
• Do use secondary blue (#2162a1) for navigation, links, and section headers to establish visual hierarchy and trust.

**Don't**

• Don't use primary yellow on backgrounds, body text, or non-interactive elements—it is reserved exclusively for CTAs.
• Don't apply shadows exceeding 24px blur radius or 12px vertical offset; maintain a grounded, trustworthy aesthetic.
• Don't mix border-radius values arbitrarily; use the defined scale (2px, 4px, 5px, 8px, 12px) to maintain visual consistency.
• Don't use tertiary red (#cc0c39) for general UI elements; reserve it for alerts, errors, and time-sensitive offers only.
• Don't reduce line-height below 1.4× font-size for body text; maintain 24px line-height at 16px base for readability.
• Don't apply more than one shadow level to a single element; use Level 2 for standard cards and Level 3 for modals, never both.