Gaming accessories
ð§
Headset
âĻ
Keyboards
ðą
Mice
ðŠ
Chairs
01 / Colors
Semantic Amazon Tokens
The palette clearly separates brand, search, buy, navigation, canvas, and link states.
nav dark
#131921Main header
nav secondary
#232F3ESubnav, footer proximity
accent
#FF9900Smile, count, brand warmth
search accent
#FEBD69Search button
buy
#FFD814Primary Commerce CTA
ink
#0F1111Main text
canvas
#E3E6E6Page background
link
#2162A1More, help, domain
border
#D5D9D9Forms, buttons
muted
#565959Meta
success
#007600Availability
warning/error
#B12704Warning, price accent
02 / Typography
Arial / Amazon Ember feel
Clear, compact, legible. Headings are heavy, utility text is small and two-line.
Discover Mother's Day deals
Display 48px / 1.05 / 700 / -0.02em
Search-first Marketplace UI
H1 32px / 37px / 700
Gaming accessories
Card H2 21px / 27px / 700
You are on amazon.com. You can also shop millions of products on Amazon Germany with fast local delivery.
Body 14px / 20px / 400
Hello, sign in / Account & Lists / Returns & Orders
Utility 12px / 16px
04 / Cards
Category Tiles and Product Surfaces
Square white modules, minimal shadows, clear product images. At least 8 demo cards in this section.
Game on
ðŪ
Shop gamingNew home items under $50
ð―
Kitchen
ð§
Hardware
ðŠī
Decor
ð
Bathroom
Gifts for Mum
ð
Clothing
ð
Shoes
ð
Jewellery
ð
Bags
Delivery Popover Card
White surface with border, small arrow, and two clear actions.
Dark footer tile
Service directories switch to dark Amazon navy surfaces.
Bestseller slab
ð
View bestsellersDomain notice
You are on amazon.com. Go to Amazon.de
05 / Brand-specific product patterns
Amazon-specific Product Patterns
These patterns make the page Amazon-specific and avoid a generic template.
Search-first header
Dropdown, text field, and submit form a single dominant search engine.
All
Delivery-context popover
Delivery country is explained directly in the header context.
We show items that are delivered to Germany.
Side drawer categories
Hello, sign in
Prime Video âš
Electronics âš
Amazon Live âš
2x2 category grammar
Four quick visual entry points in one tile plus a bottom link.
ð§
âĻ
ðą
ðŠ
Horizontal bestseller carousel
Cut-out products in a white slab surface.
ð
ð
ð
Dense footer ecosystem
Amazon Music, Audible, IMDb, Goodreads, and other services appear as a dense directory.
Bestsellers in Clothing, Shoes & Jewellery
ð
ðĐī
ð
ð
ð
ð§Ķ
ð
06 / Forms
Search, Inputs and Commerce Form States
Forms are compact, rectangular and focus with an orange highlight.
Please select a valid address.
Prime available
Delivery to Germany
International
07 / Spacing
Spacing Scale
Compact UI steps, card padding approx. 20px, section rhythm 22â32px.
xs
4pxsm
8pxmd
12pxlg
16pxcard padding
20pxsection
32px08 / Radius
Nearly Rectangular Shapes
Amazon uses very little rounding. Pills mainly for purchase CTAs.
0px card
3px input
4px search
pill CTA
09 / Elevation
Border-first Elevation
Cards remain flat. Depth appears mainly in popovers, drawers and menus.
Level 0
Standard tile, white on grey.
Level 1
Subtle UI surface.
Popover
Delivery hint, menu.
Strong border
Controls, active surfaces.
10 / Extracted component tokens
Concrete Component Values
Ready-to-use values for HTML/CSS/React agents.
header.belt.height = 60px
header.belt.bg = #131921
header.item.hover.border = 1px solid #fff
header.belt.bg = #131921
header.item.hover.border = 1px solid #fff
subnav.height = 39px
subnav.bg = #232F3E
subnav.padding-x = 10px
subnav.bg = #232F3E
subnav.padding-x = 10px
search.height = 40px
search.columns = 62px 1fr 48px
search.focus = 0 0 0 3px #FF9900
search.columns = 62px 1fr 48px
search.focus = 0 0 0 3px #FF9900
search.submit.bg = #FEBD69
search.submit.hover = #F3A847
search.input.font = 15px Arial
search.submit.hover = #F3A847
search.input.font = 15px Arial
category.card.width ~= 295px
category.card.height ~= 420px
category.card.padding = 20px 20px 15px
category.card.height ~= 420px
category.card.padding = 20px 20px 15px
category.grid = repeat(4, 1fr)
category.inner = 2x2
category.gutter ~= 20px
category.inner = 2x2
category.gutter ~= 20px
carousel.bg = #FFFFFF
carousel.product.bg = #F7FAFA
carousel.controls = left/right overlay
carousel.product.bg = #F7FAFA
carousel.controls = left/right overlay
popover.bg = #FFFFFF
popover.border = #BBBFBF
popover.shadow = 0 2px 8px rgba(15,17,17,.22)
popover.border = #BBBFBF
popover.shadow = 0 2px 8px rgba(15,17,17,.22)
link.color = #2162A1
link.hover = #C7511F
muted.text = #565959
link.hover = #C7511F
muted.text = #565959
buy.bg = #FFD814
buy.hover = #F7CA00
buy.radius = 999px
buy.hover = #F7CA00
buy.radius = 999px
11 / Footer pattern
Dense Amazon Service Directory
Footer is multi-layered: back-to-top, link columns, locale/currency and dark service grid.