W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Amazon Web Services
Amazon Web Services (AWS) is the cloud-computing subsidiary of Amazon.com, Inc., providing on-demand compute, storage, networking, databases, machine-learning, and developer-platform services. The AWS sub-brand carries Amazon Smile Orange forward — the same orange arrow that signs the Amazon wordmark — but operates against a deep- navy Squid Ink canvas (#232F3E) that defines the AWS Management Console and the AWS architecture-diagram visual language. The voice is engineering-direct, service-density forward, and welcoming to the long-form technical reader: AWS docs, AWS re:Invent slides, and AWS Architecture Center diagrams all share the same dark-canvas / orange-accent dialect.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/aws/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/aws/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 Web Services
Amazon Web Services (AWS) is the cloud-computing subsidiary of Amazon.com, Inc., providing on-demand compute, storage, networking, databases, machine-learning, and developer-platform services. The AWS sub-brand carries Amazon Smile Orange forward — the same orange arrow that signs the Amazon wordmark — but operates against a deep- navy Squid Ink canvas (#232F3E) that defines the AWS Management Console and the AWS architecture-diagram visual language. The voice is engineering-direct, service-density forward, and welcoming to the long-form technical reader: AWS docs, AWS re:Invent slides, and AWS Architecture Center diagrams all share the same dark-canvas / orange-accent dialect.
Tags: tech, cloud, aws, amazon, infrastructure, dark-canvas, parent-amazon
Atoms
Palette
Amazon Web Services · [email protected] · Proprietary — All Rights Reserved
Amazon Web Services palette anchored on AWS Smile Orange (#FF9900) — the arrow-and-smile signature carried over from the Amazon parent brand — paired with AWS Squid Ink (#232F3E), the deep navy that defines the AWS Management Console chrome and the AWS architecture diagrams. Where the Amazon retail palette leans on warm orange against a white retail canvas, the AWS palette runs darker: console-first, diagram-first, and engineered for the long-form technical surfaces of the AWS Architecture Center, the docs site, and re:Invent keynote slides.
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 |
|---|---|---|
aws-smile-orange |
AWS Smile Orange | #FF9900 |
aws-rind |
AWS Rind | #EC7211 |
aws-squid-ink |
AWS Squid Ink | #232F3E |
aws-anchor |
AWS Anchor | #161E2D |
aws-navy-light |
AWS Navy Light | #37475A |
aws-link |
AWS Link | #0972D3 |
aws-link-hover |
AWS Link Hover | #033160 |
aws-success |
AWS Success | #037F0C |
aws-error |
AWS Error | #D13212 |
aws-warning |
AWS Warning | #B7740D |
aws-ink |
AWS Ink | #16191F |
aws-gray |
AWS Gray | #545B64 |
aws-gray-light |
AWS Gray Light | #879596 |
aws-surface |
AWS Surface | #F2F3F3 |
aws-white |
AWS White | #FFFFFF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
aws-white |
#FFFFFF |
surface |
aws-surface |
#F2F3F3 |
surface-elevated |
aws-white |
#FFFFFF |
text-primary |
aws-ink |
#16191F |
text-secondary |
aws-gray |
#545B64 |
text-tertiary |
aws-gray-light |
#879596 |
primary |
aws-smile-orange |
#FF9900 |
primary-hover |
aws-rind |
#EC7211 |
accent |
aws-link |
#0972D3 |
accent-hover |
aws-link-hover |
#033160 |
warning |
aws-warning |
#B7740D |
warning-hover |
aws-rind |
#EC7211 |
error |
aws-error |
#D13212 |
success |
aws-success |
#037F0C |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
aws-anchor |
#161E2D |
surface |
aws-squid-ink |
#232F3E |
surface-elevated |
aws-navy-light |
#37475A |
text-primary |
aws-white |
#FFFFFF |
text-secondary |
aws-surface |
#F2F3F3 |
text-tertiary |
aws-gray-light |
#879596 |
primary |
aws-smile-orange |
#FF9900 |
primary-hover |
aws-rind |
#EC7211 |
accent |
aws-link |
#0972D3 |
accent-hover |
aws-link-hover |
#033160 |
warning |
aws-warning |
#B7740D |
warning-hover |
aws-rind |
#EC7211 |
error |
aws-error |
#D13212 |
success |
aws-success |
#037F0C |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
aws-squid-ink |
#232F3E |
on-identity |
aws-smile-orange |
#FF9900 |
primary |
aws-smile-orange |
#FF9900 |
primary-hover |
aws-rind |
#EC7211 |
accent |
aws-link |
#0972D3 |
accent-hover |
aws-link-hover |
#033160 |
background |
aws-white |
#FFFFFF |
surface |
aws-surface |
#F2F3F3 |
surface-elevated |
aws-white |
#FFFFFF |
text-primary |
aws-ink |
#16191F |
text-secondary |
aws-gray |
#545B64 |
text-tertiary |
aws-gray-light |
#879596 |
chrome |
aws-squid-ink |
#232F3E |
chrome-deep |
aws-anchor |
#161E2D |
chrome-light |
aws-navy-light |
#37475A |
mark-orange |
aws-smile-orange |
#FF9900 |
mark-canvas |
aws-squid-ink |
#232F3E |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.arrow.fill
- allowed: aws-smile-orange
- forbidden: aws-rind, aws-warning, aws-link
The AWS arrow-and-smile is canonical Smile Orange (#FF9900) — the same arrow as the Amazon parent wordmark. AWS Rind is a pressed CTA hover, not a mark fill. The Cloudscape Warning amber and Link blue carry semantic UI meanings and must not substitute for the brand mark.
colorChoice → roles.colors.chrome
- allowed: aws-squid-ink, aws-anchor, aws-navy-light
- forbidden: aws-smile-orange, aws-white
AWS Management Console chrome and AWS architecture-diagram canvases use the Squid Ink navy family. Replacing the navy chrome with Smile Orange or pure White breaks the AWS visual contract — the orange is a signature accent, not the canvas.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, arrow-detached, gradient-fill
The AWS arrow-and-smile is a registered Amazon trademark. The arrow must never be detached from the wordmark, recolored outside Smile Orange, or composed against a busy photographic surface that breaks its legibility. Gradient fills are not part of the AWS visual system.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
AWS Ink (#16191F) on AWS White gives ~17:1 — comfortably above WCAG 2.1 Level AA. Cloudscape's accessibility guidance specifies AA as the floor for any text-on-background pairing on the console and the docs site.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Smile Orange on AWS White sits around 3:1 — it clears AA-large for headlines and large interactive text but is unsafe for body-sized text. The rule encodes the AA-large floor so the orange CTA cannot be downsized into illegibility.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Cloudscape's published tokens are AA-compliant by construction; consumers must not derive intermediate stops that defeat that property.
💡 recommendation (2)
compositionConstraint → roles.colors.primary
- pairsWith: aws-squid-ink, aws-anchor, aws-white
- doesNotPairWith: aws-link, aws-warning
The signature AWS composition is orange-on-navy or orange-on- white. Pairing Smile Orange directly with the Cloudscape link blue or warning amber creates a hue conflict that competes with the AWS brand signature.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.4
AWS marketing and console surfaces use Amazon Ember at a modest heading-to-body ratio — the dense technical-reference voice of the AWS docs favors a tighter hierarchy than marketing-led brands. A 1.4× floor preserves the display-to- prose distinction without overpowering the content density.
Provenance
- Source: https://aws.amazon.com/architecture/icons/
- License:
Proprietary — All Rights Reserved - Attribution: Amazon Web Services, AWS, the AWS logo, the AWS arrow-and-smile, Amazon, and Amazon Ember are trademarks of Amazon.com, Inc. or its affiliates. Brand colors and identity guidance documented here are derived from the AWS Architecture Icons toolkit (aws.amazon.com/architecture/icons/), the AWS Brand Guidelines, and the AWS Cloudscape Design System (cloudscape.design).
- Imported:
2026-05-18 - Notes: AWS is documented separately from the Amazon parent brand because AWS carries its own canvas convention (dark-first navy), its own interactive-blue link color (Cloudscape #0972D3), and its own audience (developers and architects) distinct from the Amazon retail consumer brand. The shared Smile Orange and Amazon Ember typography preserve the Amazon family resemblance. No assets are bundled here — AWS marks are trademarked and must be retrieved from the AWS Architecture Icons toolkit under Amazon's stated terms.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Amazon Web Services
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 Web Services
A clear hierarchy in Amazon Web Services'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 Web Services
[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
→ aws-link #0972D3 accent-hover
→ aws-link-hover #033160 background
→ aws-white #FFFFFF chrome
→ aws-squid-ink #232F3E chrome-deep
→ aws-anchor #161E2D chrome-light
→ aws-navy-light #37475A identity
→ aws-squid-ink #232F3E mark-canvas
→ aws-squid-ink #232F3E mark-orange
→ aws-smile-orange #FF9900 on-identity
→ aws-smile-orange #FF9900 primary
→ aws-smile-orange #FF9900 primary-hover
→ aws-rind #EC7211 surface
→ aws-surface #F2F3F3 surface-elevated
→ aws-white #FFFFFF text-primary
→ aws-ink #16191F text-secondary
→ aws-gray #545B64 text-tertiary
→ aws-gray-light #879596 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Amazon Ember prose
→ body Amazon Ember Palette mode mappings (from aws)
Light mode (14 roles)
accent
→ aws-link accent-hover
→ aws-link-hover background
→ aws-white error
→ aws-error primary
→ aws-smile-orange primary-hover
→ aws-rind success
→ aws-success surface
→ aws-surface surface-elevated
→ aws-white text-primary
→ aws-ink text-secondary
→ aws-gray text-tertiary
→ aws-gray-light warning
→ aws-warning warning-hover
→ aws-rind Dark mode (14 roles)
accent
→ aws-link accent-hover
→ aws-link-hover background
→ aws-anchor error
→ aws-error primary
→ aws-smile-orange primary-hover
→ aws-rind success
→ aws-success surface
→ aws-squid-ink surface-elevated
→ aws-navy-light text-primary
→ aws-white text-secondary
→ aws-surface text-tertiary
→ aws-gray-light warning
→ aws-warning warning-hover
→ aws-rind Rules (8 typed constraints)
error · 6 rules
colorChoice logo.arrow.fill allowed aws-smile-orange forbidden aws-rind, aws-warning, aws-link The AWS arrow-and-smile is canonical Smile Orange (#FF9900) — the same arrow as the Amazon parent wordmark. AWS Rind is a pressed CTA hover, not a mark fill. The Cloudscape Warning amber and Link blue carry semantic UI meanings and must not substitute for the brand mark.
colorChoice roles.colors.chrome allowed aws-squid-ink, aws-anchor, aws-navy-light forbidden aws-smile-orange, aws-white AWS Management Console chrome and AWS architecture-diagram canvases use the Squid Ink navy family. Replacing the navy chrome with Smile Orange or pure White breaks the AWS visual contract — the orange is a signature accent, not the canvas.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, arrow-detached, gradient-fill The AWS arrow-and-smile is a registered Amazon trademark. The arrow must never be detached from the wordmark, recolored outside Smile Orange, or composed against a busy photographic surface that breaks its legibility. Gradient fills are not part of the AWS visual system.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA AWS Ink (#16191F) on AWS White gives ~17:1 — comfortably above WCAG 2.1 Level AA. Cloudscape's accessibility guidance specifies AA as the floor for any text-on-background pairing on the console and the docs site.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Smile Orange on AWS White sits around 3:1 — it clears AA-large for headlines and large interactive text but is unsafe for body-sized text. The rule encodes the AA-large floor so the orange CTA cannot be downsized into illegibility.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Cloudscape's published tokens are AA-compliant by construction; consumers must not derive intermediate stops that defeat that property.
recommendation · 2 rules
compositionConstraint roles.colors.primary pairsWith aws-squid-ink, aws-anchor, aws-white doesNotPairWith aws-link, aws-warning The signature AWS composition is orange-on-navy or orange-on- white. Pairing Smile Orange directly with the Cloudscape link blue or warning amber creates a hue conflict that competes with the AWS brand signature.
fontPairing typography.heading requires body minSizeRatio 1.4 AWS marketing and console surfaces use Amazon Ember at a modest heading-to-body ratio — the dense technical-reference voice of the AWS docs favors a tighter hierarchy than marketing-led brands. A 1.4× floor preserves the display-to- prose distinction without overpowering the content density.
Provenance
- Source
- https://aws.amazon.com/architecture/icons/
- License
Proprietary — All Rights Reserved- Attribution
- Amazon Web Services, AWS, the AWS logo, the AWS arrow-and-smile, Amazon, and Amazon Ember are trademarks of Amazon.com, Inc. or its affiliates. Brand colors and identity guidance documented here are derived from the AWS Architecture Icons toolkit (aws.amazon.com/architecture/icons/), the AWS Brand Guidelines, and the AWS Cloudscape Design System (cloudscape.design).
- Imported
2026-05-18- Notes
- AWS is documented separately from the Amazon parent brand because AWS carries its own canvas convention (dark-first navy), its own interactive-blue link color (Cloudscape #0972D3), and its own audience (developers and architects) distinct from the Amazon retail consumer brand. The shared Smile Orange and Amazon Ember typography preserve the Amazon family resemblance. No assets are bundled here — AWS marks are trademarked and must be retrieved from the AWS Architecture Icons toolkit under Amazon's stated terms.