W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Amazon
Amazon.com, Inc. is the global retail, devices, advertising, and cloud-services company headquartered in Seattle. The Amazon consumer brand is anchored on the "smile" wordmark — the orange arrow that runs from the "a" to the "z" — set in Amazon Ember against a white retail canvas with a deep-navy navigation band. The voice is utilitarian, customer-obsessed, and product-first; visual identity stays out of the way of the catalog while the signature orange does the brand-identity work at the page header and in the call-to-action buttons.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/amazon/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/amazon/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Amazon
Amazon.com, Inc. is the global retail, devices, advertising, and cloud-services company headquartered in Seattle. The Amazon consumer brand is anchored on the "smile" wordmark — the orange arrow that runs from the "a" to the "z" — set in Amazon Ember against a white retail canvas with a deep-navy navigation band. The voice is utilitarian, customer-obsessed, and product-first; visual identity stays out of the way of the catalog while the signature orange does the brand-identity work at the page header and in the call-to-action buttons.
Tags: retail, ecommerce, amazon, orange, corporate, parent-brand
Atoms
Palette
Amazon · [email protected] · Proprietary — All Rights Reserved
Amazon corporate palette built around Amazon Orange (#FF9900) — the signature "smile" color of the Amazon wordmark — paired with the deep-navy Amazon Squid Ink (#232F3E) used across the retail site chrome and the AWS console. The orange-on-navy contrast is the most recognizable element of Amazon's visual identity; the warm orange carries the brand voice while the navy provides the structural canvas.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Amazon Ember ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
body |
Amazon Ember ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
amazon-orange |
Amazon Orange | #FF9900 |
amazon-orange-dark |
Amazon Orange Dark | #E47911 |
amazon-squid-ink |
Amazon Squid Ink | #232F3E |
amazon-squid-ink-light |
Amazon Squid Ink Light | #37475A |
amazon-anchor |
Amazon Anchor | #131A22 |
amazon-yellow |
Amazon Yellow | #FFD814 |
amazon-yellow-dark |
Amazon Yellow Dark | #F7CA00 |
amazon-link |
Amazon Link | #007185 |
amazon-link-hover |
Amazon Link Hover | #C7511F |
amazon-ink |
Amazon Ink | #0F1111 |
amazon-gray |
Amazon Gray | #565959 |
amazon-gray-light |
Amazon Gray Light | #888C8C |
amazon-surface |
Amazon Surface | #EAEDED |
amazon-white |
Amazon White | #FFFFFF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
amazon-white |
#FFFFFF |
surface |
amazon-surface |
#EAEDED |
surface-elevated |
amazon-white |
#FFFFFF |
text-primary |
amazon-ink |
#0F1111 |
text-secondary |
amazon-gray |
#565959 |
text-tertiary |
amazon-gray-light |
#888C8C |
primary |
amazon-orange |
#FF9900 |
primary-hover |
amazon-orange-dark |
#E47911 |
accent |
amazon-yellow |
#FFD814 |
accent-hover |
amazon-yellow-dark |
#F7CA00 |
warning |
amazon-orange |
#FF9900 |
warning-hover |
amazon-orange-dark |
#E47911 |
error |
amazon-link-hover |
#C7511F |
success |
amazon-link |
#007185 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
amazon-anchor |
#131A22 |
surface |
amazon-squid-ink |
#232F3E |
surface-elevated |
amazon-squid-ink-light |
#37475A |
text-primary |
amazon-white |
#FFFFFF |
text-secondary |
amazon-surface |
#EAEDED |
text-tertiary |
amazon-gray-light |
#888C8C |
primary |
amazon-orange |
#FF9900 |
primary-hover |
amazon-orange-dark |
#E47911 |
accent |
amazon-yellow |
#FFD814 |
accent-hover |
amazon-yellow-dark |
#F7CA00 |
warning |
amazon-orange |
#FF9900 |
warning-hover |
amazon-orange-dark |
#E47911 |
error |
amazon-link-hover |
#C7511F |
success |
amazon-link |
#007185 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
amazon-orange |
#FF9900 |
on-identity |
amazon-ink |
#0F1111 |
background |
amazon-white |
#FFFFFF |
surface |
amazon-surface |
#EAEDED |
surface-elevated |
amazon-white |
#FFFFFF |
text-primary |
amazon-ink |
#0F1111 |
text-secondary |
amazon-gray |
#565959 |
text-tertiary |
amazon-gray-light |
#888C8C |
primary |
amazon-orange |
#FF9900 |
primary-hover |
amazon-orange-dark |
#E47911 |
accent |
amazon-yellow |
#FFD814 |
accent-hover |
amazon-yellow-dark |
#F7CA00 |
mark |
amazon-orange |
#FF9900 |
text-emphasis |
amazon-ink |
#0F1111 |
text-muted |
amazon-gray |
#565959 |
chrome |
amazon-squid-ink |
#232F3E |
chrome-deep |
amazon-anchor |
#131A22 |
link |
amazon-link |
#007185 |
link-hover |
amazon-link-hover |
#C7511F |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.wordmark.fill
- allowed: amazon-orange, amazon-ink, amazon-white
- forbidden: amazon-orange-dark, amazon-yellow, amazon-link, amazon-gray
The Amazon wordmark renders in Amazon Orange (the smile), near-black, or reversed white. The yellow and teal-link values are interactive-element colors and the orange-dark is a hover state — none are valid wordmark fills.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, smile-detached
The Amazon "smile" mark — the orange arrow from a-to-z — is one of the most-protected commercial marks in retail. The smile is integral to the wordmark and must never be detached, recolored, or applied to a busy photographic background that breaks its legibility.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Amazon Ink on Amazon White gives ~18:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on Amazon retail surfaces.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Amazon Orange on Amazon White is contrast-marginal at small sizes — the rule enforces the AA-large floor and forbids reducing the orange CTA below sizes where it stops meeting that floor.
contextRestriction → roles.colors.accent
- forbiddenContexts: error-state, validation-failure, destructive-action
Amazon Yellow is the Add-to-Cart affordance — a positive, commerce-forward action. Repurposing it for errors or destructive actions conflicts with its established meaning on every Amazon retail page.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The retail site's reach across global markets and assistive-tech users makes AA the floor for any new role pairing.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 500, 700
Amazon Ember on amazon.com retail headlines uses Medium (500) and Bold (700). Lighter cuts read as body copy and compromise the catalog-clarity voice the retail site depends on.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.4
Amazon retail product-detail headings run modestly larger than body copy — the catalog density favors a tighter hierarchy than marketing-led brands. A 1.4× floor preserves the display-to-prose distinction without overpowering the dense product information.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: amazon-squid-ink, amazon-ink, amazon-white
- doesNotPairWith: amazon-link-hover
The signature orange pairs cleanly with the navy chrome and the white canvas. Combining brand orange with the rust-toned link-hover orange on the same surface creates a two-orange composition that reads as a brand-hierarchy error.
Provenance
- Source: https://www.aboutamazon.com/news/company-news/our-brand
- License:
Proprietary — All Rights Reserved - Attribution: Amazon.com, Inc. — Amazon, the Amazon "smile" wordmark, Amazon Ember, and associated marks are registered trademarks of Amazon.com, Inc. This atom captures brand-atoms' read of Amazon's publicly available brand-resources page and the visible style values on amazon.com; it is not an official Amazon brand-guidelines document.
- Imported:
2026-05-17 - Notes: The retail site (amazon.com) is light-mode-first with a fixed dark navigation band; the AWS console and developer surfaces operate bilingual light/dark themes. The yellow Add-to-Cart CTA is brand-distinct from the orange Buy Now CTA and is encoded as the accent role here.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Amazon
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Amazon
A clear hierarchy in Amazon's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Amazon
[email protected]font · heading
Amazon Ember
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Amazon Ember
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ amazon-yellow #FFD814 accent-hover
→ amazon-yellow-dark #F7CA00 background
→ amazon-white #FFFFFF chrome
→ amazon-squid-ink #232F3E chrome-deep
→ amazon-anchor #131A22 identity
→ amazon-orange #FF9900 link
→ amazon-link #007185 link-hover
→ amazon-link-hover #C7511F mark
→ amazon-orange #FF9900 on-identity
→ amazon-ink #0F1111 primary
→ amazon-orange #FF9900 primary-hover
→ amazon-orange-dark #E47911 surface
→ amazon-surface #EAEDED surface-elevated
→ amazon-white #FFFFFF text-emphasis
→ amazon-ink #0F1111 text-muted
→ amazon-gray #565959 text-primary
→ amazon-ink #0F1111 text-secondary
→ amazon-gray #565959 text-tertiary
→ amazon-gray-light #888C8C Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Amazon Ember prose
→ body Amazon Ember wordmark
→ heading Amazon Ember Palette mode mappings (from amazon)
Light mode (14 roles)
accent
→ amazon-yellow accent-hover
→ amazon-yellow-dark background
→ amazon-white error
→ amazon-link-hover primary
→ amazon-orange primary-hover
→ amazon-orange-dark success
→ amazon-link surface
→ amazon-surface surface-elevated
→ amazon-white text-primary
→ amazon-ink text-secondary
→ amazon-gray text-tertiary
→ amazon-gray-light warning
→ amazon-orange warning-hover
→ amazon-orange-dark Dark mode (14 roles)
accent
→ amazon-yellow accent-hover
→ amazon-yellow-dark background
→ amazon-anchor error
→ amazon-link-hover primary
→ amazon-orange primary-hover
→ amazon-orange-dark success
→ amazon-link surface
→ amazon-squid-ink surface-elevated
→ amazon-squid-ink-light text-primary
→ amazon-white text-secondary
→ amazon-surface text-tertiary
→ amazon-gray-light warning
→ amazon-orange warning-hover
→ amazon-orange-dark Rules (9 typed constraints)
error · 6 rules
colorChoice logo.wordmark.fill allowed amazon-orange, amazon-ink, amazon-white forbidden amazon-orange-dark, amazon-yellow, amazon-link, amazon-gray The Amazon wordmark renders in Amazon Orange (the smile), near-black, or reversed white. The yellow and teal-link values are interactive-element colors and the orange-dark is a hover state — none are valid wordmark fills.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, smile-detached The Amazon "smile" mark — the orange arrow from a-to-z — is one of the most-protected commercial marks in retail. The smile is integral to the wordmark and must never be detached, recolored, or applied to a busy photographic background that breaks its legibility.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Amazon Ink on Amazon White gives ~18:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on Amazon retail surfaces.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Amazon Orange on Amazon White is contrast-marginal at small sizes — the rule enforces the AA-large floor and forbids reducing the orange CTA below sizes where it stops meeting that floor.
contextRestriction roles.colors.accent forbiddenContexts error-state, validation-failure, destructive-action Amazon Yellow is the Add-to-Cart affordance — a positive, commerce-forward action. Repurposing it for errors or destructive actions conflicts with its established meaning on every Amazon retail page.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The retail site's reach across global markets and assistive-tech users makes AA the floor for any new role pairing.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 500, 700 Amazon Ember on amazon.com retail headlines uses Medium (500) and Bold (700). Lighter cuts read as body copy and compromise the catalog-clarity voice the retail site depends on.
fontPairing typography.heading requires body minSizeRatio 1.4 Amazon retail product-detail headings run modestly larger than body copy — the catalog density favors a tighter hierarchy than marketing-led brands. A 1.4× floor preserves the display-to-prose distinction without overpowering the dense product information.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith amazon-squid-ink, amazon-ink, amazon-white doesNotPairWith amazon-link-hover The signature orange pairs cleanly with the navy chrome and the white canvas. Combining brand orange with the rust-toned link-hover orange on the same surface creates a two-orange composition that reads as a brand-hierarchy error.
Provenance
- Source
- https://www.aboutamazon.com/news/company-news/our-brand
- License
Proprietary — All Rights Reserved- Attribution
- Amazon.com, Inc. — Amazon, the Amazon "smile" wordmark, Amazon Ember, and associated marks are registered trademarks of Amazon.com, Inc. This atom captures brand-atoms' read of Amazon's publicly available brand-resources page and the visible style values on amazon.com; it is not an official Amazon brand-guidelines document.
- Imported
2026-05-17- Notes
- The retail site (amazon.com) is light-mode-first with a fixed dark navigation band; the AWS console and developer surfaces operate bilingual light/dark themes. The yellow Add-to-Cart CTA is brand-distinct from the orange Buy Now CTA and is encoded as the accent role here.