A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
11type steps
3radius steps
8pxspacing base
Amazon, in one page
Amazon's iOS app is a relentlessly functional storefront — a design that has been A/B-tested down to the pixel, where every element is optimized to move a customer from "I might want that" to "Place your order" in the fewest possible taps. There is no pretense of minimalism here. The screen is dense, the hierarchy is aggressive, and every product tile packs photo, title, rating, review count, price, Prime badge, delivery date, and an Add-to-Cart button into a tight rectangle. The visual language is Amazon's own take on "utility first": whatever the design sacrifices in breathing room, it recovers in decision-enabling information density. The top search bar is the emotional anchor of the app — it's tall, bright, and sits above every screen like a lighthouse.
The accent system is built around two hard colors: Amazon's iconic yellow-orange (#FF9900) — the "Add to Cart" color, the smile-arrow color, the primary-CTA color — and a deep navy (#131921) that forms the top navigation bar. The yellow is not the warm, friendly yellow of food apps; it's a saturated, commercial yellow that signals "buy this now" on every screen. The navy is the voice of the chrome — it holds the search bar, the shipping-address banner, and the category breadcrumbs. Below the nav bar, the canvas is pure white (#FFFFFF) to let product photography breathe. Red (#B12704) does the work of "price" and "savings" — struck-through original prices, "Limited-time deal" banners, countdown timers. A teal blue (#007185) handles Prime-branded UI and in-link colors. Five-star ratings use a rich gold (#FFA41C) that's warmer than the primary yellow.
Typography is Amazon Ember — Amazon's proprietary typeface since 2015, a humanist sans designed for e-commerce legibility at small sizes. It's what you see on every product tile, review, and button across the app. Hierarchy is assertive: prices at 20-28pt weight 700 (sometimes with the cents in superscript for visual snap), product titles at 15-16pt weight 400 clamped to two lines, metadata at 13pt. The Prime checkmark is often inline with the price — a blue prime wordmark that signals "this ships free and fast". Amazon's typography is never decorative; it's engineered for fast-scanning shopping lists where every byte of information has a reason to be there.
Key Characteristics:
- Amazon Yellow-Orange (
#FF9900) as the singular CTA color — Add to Cart, Checkout, Buy Now - Deep Navy (
#131921) top nav bar with bright search bar and yellow Search button - Dense product grids and lists — photo + title + rating + price + Prime + delivery packed tight
- Amazon Ember font across the app — weights 300/400/500/700, optimized for small UI
- Price Red (
#B12704) for deals, savings, and struck-through original prices - Prime Teal Blue (
#007185) for Prime badging, in-app links, membership UI - Five-star ratings rendered in gold (
#FFA41C) with review count in tiny blue link style - Search bar at the top of every screen — voice mic + barcode-scanner camera icons
- "FREE Delivery by [date]" line beneath price — the delivery promise as UI
- Bottom tab bar: Home | Menu | Cart (badge) | You | Search-expand — not the 5 tabs of design-led apps
Do's and don'ts
Do
- Use Amazon Yellow (
#FF9900) on every primary purchase CTA — Add to Cart, Buy Now, Search button - Use black text on yellow buttons (
#0F1111on#FF9900) — the iconic contrast - Keep the top nav in deep navy
#131921with a white/yellow search bar - Pack product tiles with photo + title (2-line clamp) + rating + price + Prime + delivery
- Render prices in Ember 700 at 18-28pt — money is never light
- Use superscript cents on hero prices ($28 + small 99 superscript)
- Use gold (
#FFA41C) for rating stars — not yellow, not orange - Use teal blue (
#007185) for the Prime wordmark and in-body links - Use price red (
#B12704) for strike-throughs, savings, and deal banners - Show "FREE Delivery by [date]" in green on every eligible product
Don't
- Don't swap the yellow CTA for another color — Add to Cart is Amazon Yellow, period
- Don't use white text on yellow buttons — intentionally black
- Don't use black canvas — the app is light-first; dark mode is a variant
- Don't over-round buttons — 8pt radius, not pills (the utility feel is the brand)
- Don't hide the search bar — it's the anchor of every screen
- Don't use decorative fonts for prices or headlines — Ember only, weight 700 for prices
- Don't use italics — emphasis via weight
- Don't use 5-star ratings in orange — gold
#FFA41Cis the brand - Don't collapse product tile metadata — Amazon customers expect rating, price, Prime, delivery visible simultaneously
- Don't introduce gradients on the yellow CTA — the flat color is load-bearing
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Amazon design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Amazon Yellow-Orange: #ff9900
- Yellow Pressed: #e68a00
- Yellow Tint: #fff4df
- Deep Navy: #131921
- Secondary Navy: #232f3e
- Navy Pressed: #0f141c
- Canvas White: #ffffff
- Surface Muted: #f3f3f3
- Surface Tint: #f7f8f8
- Divider: #dddddd
Type:
- families: Amazon Ember, Fallback Stack, SF Mono, Monospace
- scale: 10, 11, 12, 13, 14, 15, 16, 18, 20
- weights: 400, 500, 700
Shape:
- radius: 4, 8, 20
- elevation: Shadow: `rgba(0,0,0,0.1) 0 1px 2px` | Background: `#FFFFFF` with `rgba(0,0,0,0.15) 0 -4px 12px` shadow
Spacing: 8, 10, 12
Rules:
- Use Amazon Yellow (`#FF9900`) on every primary purchase CTA — Add to Cart, Buy Now, Search button
- Use black text on yellow buttons (`#0F1111` on `#FF9900`) — the iconic contrast
- Keep the top nav in deep navy `#131921` with a white/yellow search bar
- Pack product tiles with photo + title (2-line clamp) + rating + price + Prime + delivery
- Render prices in Ember 700 at 18-28pt — money is never light
- Use superscript cents on hero prices ($28 + small 99 superscript)
Avoid:
- Don't swap the yellow CTA for another color — Add to Cart is Amazon Yellow, period
- Don't use white text on yellow buttons — intentionally black
- Don't use black canvas — the app is light-first; dark mode is a variant
- Don't over-round buttons — 8pt radius, not pills (the utility feel is the brand)
- Don't hide the search bar — it's the anchor of every screen
- Don't use decorative fonts for prices or headlines — Ember only, weight 700 for prices
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Brand)
- Amazon Yellow-Orange (
#FF9900): Primary CTA — Add to Cart, Buy Now, Search button, Prime Day badges. The defining CTA color. - Yellow Pressed (
#E68A00): Pressed/active state for yellow buttons. - Yellow Tint (
#FFF4DF): Promotional banner backgrounds, deal-tag fills. - Yellow Hover (Web cross-reference) (
#FFD275): Used rarely in iOS; included for parity.
Navy / Chrome
- Deep Navy (
#131921): Top navigation header, primary chrome surface. - Secondary Navy (
#232F3E): Sub-nav, category strip, account menu panel. - Navy Pressed (
#0F141C): Pressed state on navy surfaces.
Canvas & Text
- Canvas White (
#FFFFFF): Primary background below nav. - Surface Muted (
#F3F3F3): Sectional backgrounds, search panel fill, chip fills. - Surface Tint (
#F7F8F8): Secondary row background, quiet cards. - Divider (
#DDDDDD): Hairline dividers, list row separators. - Border Default (
#D5D9D9): Input borders, card borders. - Text Primary (
#0F1111): Product titles, prices, primary body text. - Text Secondary (
#565959): Metadata, "shipped by", review date, helper text. - Text Tertiary (
#848A8C): Disabled state, placeholder.
Semantic
- Price Red (
#B12704): Deal prices, savings amounts, struck-through originals, "Limited time deal" chips. - Alert Red (
#CC0C39): Error states, "Out of stock", destructive actions. - Success Green (
#007600): "In stock" indicator, delivery-date emphasis ("FREE Delivery Tomorrow"). - Prime Teal (
#007185): Prime badge, checkout links, "Prime" membership UI, in-body links. - Prime Sky (
#00A8E1): Prime Video accent, supporting Prime visual. - Rating Gold (
#FFA41C): 5-star rating glyphs. - Low Stock Amber (
#C45500): "Only 3 left in stock" warnings.
Status / Prime
- Prime Badge Stroke (
#007185): Prime checkmark badge outline. - Prime Wordmark Blue (
#00A8E1): Theprimeword mark next to products. - Checkmark Green (
#067D62): Order confirmation, subscription-eligible.
Dark Mode
- Dark Canvas (
#0F1111): Primary dark background. - Dark Surface 1 (
#1A1F25): Elevated surface, card background on dark. - Dark Surface 2 (
#232F3E): Higher elevation, modal sheets (matches secondary navy). - Dark Divider (
#3A4553). - Dark Text Primary (
#F5F5F5). - Dark Text Secondary (
#AAB7B8).
Type scaleRead the full spec
Font Family
- Brand / UI:
Amazon Ember(proprietary since 2015 — used across every Amazon surface: app, web, packaging, Kindle) - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif - Monospace:
SF Monofor order numbers, promo codes, ASINs - CJK / Non-Latin: Ember's global cuts ship for Arabic (Ember Arabic) and Chinese/Japanese/Korean; otherwise falls back to Noto or system
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Nav Hero Title | Ember | 22pt | 700 | 1.15 | -0.2pt | Category page hero |
| Section Title | Ember | 20pt | 700 | 1.2 | -0.1pt | "Frequently bought together", "Buy again" |
| Product Title | Ember | 16pt | 400 | 1.3 | 0pt | Product card title (2-line clamp) |
| Product Title (PDP) | Ember | 20pt | 500 | 1.3 | -0.1pt | Full product detail title |
| Price Hero | Ember | 28pt | 700 | 1.0 | -0.3pt | PDP price with superscript cents |
| Price Card | Ember | 18pt | 700 | 1.1 | -0.1pt | Price on product tile |
| Price Struck | Ember | 14pt | 400 | 1.2 | 0pt | Original price, strikethrough, gray |
| Body | Ember | 15pt | 400 | 1.45 | 0pt | Descriptions, review text, bullets |
| Rating Count | Ember | 13pt | 400 | 1.3 | 0pt | "(12,345)" — blue link style |
| Delivery Line | Ember | 13pt | 500 | 1.3 | 0pt | "FREE Delivery Tomorrow" |
| Meta | Ember | 12pt | 400 | 1.3 | 0pt | Review date, "Verified Purchase" |
| Button (Primary) | Ember | 15pt | 500 | 1.0 | 0pt | "Add to Cart", "Buy Now" |
| Button (Secondary) | Ember | 14pt | 400 | 1.0 | 0pt | "See all reviews", text links |
| Prime Badge | Ember | 11pt | 700 | 1.0 | 0.3pt | "prime" wordmark (lowercase) |
| Tab Label | Ember | 10pt | 500 | 1.0 | 0pt | Tab bar labels |
| Search Placeholder | Ember | 16pt | 400 | 1.0 | 0pt | "Search Amazon" placeholder |
| Badge / Promo | Ember | 11pt | 700 | 1.0 | 0.5pt | "Limited time deal" uppercase |
Principles
- Price is always bold: Every price in the UI sits at weight 700, minimum 16pt, often 20-28pt. Money is never light.
- Superscript cents on hero prices: The dollar figure is 28pt, the cents are 14pt superscript — a signature Amazon move.
- Product titles are 2-line clamped: No matter the shelf, titles wrap to exactly two lines with ellipsis on the third.
- Star-rating inline with count: Five 12pt gold stars followed by "(12,345)" in 13pt teal-blue link color — tappable.
- Weights concentrated at 400 / 500 / 700: No thin, no black. 400 is body, 500 is buttons, 700 is prices and headlines.
- No italics: Emphasis via weight or color.
Components and layoutRead the full spec
Buttons
Primary CTA — "Add to Cart" (Yellow)
- Background:
#FF9900 - Text:
#0F1111(intentionally black-on-yellow for contrast, not white) - Padding: 12pt vertical, 16pt horizontal
- Height: 44pt standard, 48pt on PDP
- Corner radius: 8pt (rounded rectangle — not a pill)
- Font: Amazon Ember 15pt weight 500
- Pressed: background
#E68A00, scale 0.98, light haptic - Border: 1pt
#FCD200highlight on top edge (subtle 3D cue) - Shadow:
rgba(0,0,0,0.1) 0 1px 2px - Used for: "Add to Cart", "Buy Now", "Proceed to Checkout"
Orange CTA — "Buy Now" / Checkout
- Background:
#F08804(slightly deeper than Amazon Yellow to distinguish urgency) - Same padding, radius, font as primary
- Used for single-click "Buy Now" and the final "Place your order" on checkout
Secondary Button (Outline)
- Background:
#FFFFFF - Border: 1pt
#D5D9D9 - Text:
#0F1111, Ember 14pt weight 400 - Padding: 10pt vertical, 12pt horizontal
- Corner radius: 8pt
- Pressed:
#F7F8F8fill - Used for: "See all options", "Compare with similar"
Link Button (Teal)
- Background: transparent
- Text:
#007185, Ember 14pt weight 400 - No underline default; underline appears on tap
- Used for: review count, "See more", in-body product links
Icon Button (Nav — Mic, Barcode)
- Size: 44pt hit area
- Icon: 22pt,
#FFFFFFon navy nav,#565959on white - Pressed: 20% overlay
Cards & Containers
Product Card (Grid Tile)
- Width: 50% of viewport minus gaps (2-column grid default), or 150pt in a carousel
- Aspect: product photo square 1:1, white background, padded 8pt
- Content stack beneath image:
- Product title: Ember 15pt w400
#0F1111, 2-line clamp - Rating row: 5 gold stars (12pt each,
#FFA41C) +(#### )review count in Ember 12pt teal-blue - Price line: "$24.99" Ember 18pt w700, struck-through original "$34.99" in Ember 13pt w400
#565959 - Prime line: blue
primewordmark + "FREE Delivery Tomorrow" in Ember 12pt w500 - Optional "Add to Cart" yellow button at bottom (on grid list variant)
- Corner radius: 4pt on the image, 0pt on the wrapper
- Divider: 1pt
#DDDDDDhairline between rows in list view
Product Detail Page (PDP) Structure
- Image carousel at top (full-width, 1:1 aspect, page dots)
- Title block: 20pt w500 product title, brand link, 5-gold-stars + review count
- Price block: $28.99 hero (28pt w700) with superscript cents, struck-through "$34.99", "You save $6" in red
- Prime + delivery block: "FREE delivery Tuesday, Oct 12" in 14pt w500 green
- Variant picker: color swatches 44pt circles, size chips 44pt tall pills
- Quantity stepper: leading "−" | "1" | "+" →
#F3F3F3tile 32pt tall, 8pt radius - Add to Cart yellow + Buy Now orange buttons stacked, full-width 48pt tall each
- "Secure transaction" line with lock icon underneath
- Sections below: "About this item" bullets, "From the manufacturer" photos, reviews
Review Card
- Avatar (32pt circle) + reviewer name + "Verified Purchase" green tag
- Title: Ember 16pt w700
- Date: Ember 12pt w400
#565959 - Rating: 5 gold stars
- Body: Ember 15pt w400
- "Helpful" button: outline, 14pt w400, shows count
Cart Row
- Image: 80×80pt product photo with 4pt radius
- Title: Ember 16pt w400
#0F1111, 2-line clamp - Stock line: "In Stock" in
#007600Ember 13pt w500 - Delivery: Ember 13pt w400
#565959 - Quantity stepper (as above) + "Delete" | "Save for later" | "Compare" text links in blue
- Trailing: price Ember 16pt w700
Navigation
Top Nav Header
- Height: 56pt + safe area
- Background:
#131921deep navy - Leading: 28pt Amazon smile logo white
- Center-right: 44pt tall pill search bar (full width minus logo)
- Search bar background:
#FFFFFF - Corner radius: 8pt
- Leading: 20pt
#565959magnifying-glass icon - Placeholder: Ember 16pt w400
#565959"Search Amazon" - Trailing inside: yellow 44pt
#FF9900square with#0F1111mic + barcode glyphs, 8pt right radius only - Tapping the bar expands to full-screen search
- Trailing: bell notification icon + optional cart mini-badge
Sub-Nav (Deliver To)
- Directly beneath main nav:
#232F3Esecondary navy strip - Height: 36pt
- Content: "Deliver to [Name] — City Zip" Ember 14pt w400 white, leading pin icon
- Tap opens address sheet
Bottom Tab Bar
- Height: 50pt + safe area
- Background:
#FFFFFFwith 0.5pt top border#DDDDDD - Tabs: Home | Menu (hamburger) | Cart (badge) | You | Search
- Icon size: 24pt
- Active color:
#FF9900(Amazon Yellow) with filled icon variant - Inactive:
#565959 - Labels: Ember 10pt w500, always shown
- Cart badge: red
#CC0C39circle with white count, top-right of Cart icon
Category Breadcrumbs / Departments
- Horizontal scroll chips right below sub-nav
- Background:
#FFFFFF - Chip: Ember 14pt w400
#007185(link-styled), no pill background, 16pt gaps
Input Fields
Search Input (Expanded)
- Height: 44pt
- Background:
#FFFFFF - Border: 1pt
#D5D9D9 - Focus: border
#FF99002pt - Corner radius: 8pt
- Font: Ember 16pt w400
#0F1111
Filter Chip
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | 2-column product grid, 135pt tiles |
| iPhone 13/14/15 | 390pt | 2-column standard, 150pt tiles |
| iPhone 15/16 Pro | 393pt | Dynamic Island pushes nav 8pt lower |
| iPhone 15/16 Pro Max | 430pt | 2-column with 170pt tiles, 3-column in landscape |
| iPad | 768pt+ | 3-4 column grid, PDP gets side-by-side image + buy-box |
Dynamic Type
- Product titles, body, reviews: full scale
- Prices: scale up to 140% then cap (layout-sensitive)
- Prime wordmark: fixed size always (visual consistency)
- Tab labels: fixed 10pt
- Nav search placeholder: scales modestly up to 18pt
Orientation
- Home, Browse, PDP: portrait-preferred (landscape supported on iPad)
- Image carousel on PDP: rotates to landscape for full-screen zoom
- Video reviews: rotate to landscape
Touch Targets
- Add to Cart yellow button: 44-48pt tall — the primary hit zone
- Star rating row: 44pt effective hit area (tap opens reviews)
- Product tile: full tile tappable, entire 240pt tall card is one hit zone
- Quantity stepper: 32pt tall but with 44pt effective touch on + / − cells
Safe Area Handling
- Top: navy nav bar extends under status bar; content respects top safe area
- Bottom: cart drawer extends to home indicator; tab bar floats above it
- Sides: 16pt content insets; product grid goes edge-to-edge with internal padding
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-amazon {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #0f1111;
--heading-color: #0f1111;
--link-color: #9b5d00;
--link-hover-color: #683e00;
--border-color: #d4d4d4;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(15,17,17,0.06);
--card-hover-shadow: 0 6px 18px rgba(15,17,17,0.12);
--header-bg: #0f1111;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #636464;
--button-bg: #ff9900;
--button-text-color: #000000;
--button-hover-bg: #cc7a00;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #0f1111;
--button-secondary-hover-bg: #e2e2e2;
--button-secondary-border: 1px solid #d4d4d4;
--prompt-bg: #f3f3f3;
--prompt-text-color: #0f1111;
--base-font: var(--font-mono);
--heading-font: var(--font-mono);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- grammarly 80.2%
- coffee meets bagel 79.7%
- clubhouse 78.9%
- plenty of fish 78.8%
- goodreads 78.0%
Where this came from
- Source document
ios/design-md/misc/amazon/DESIGN.md· 25.1 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.