W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
AMD
Advanced Micro Devices, Inc. (AMD) is the silicon company behind Ryzen CPUs, Radeon GPUs, EPYC data-center processors, and Threadripper workstation parts — the long-running counterweight to Intel and, in graphics, to NVIDIA. The corporate identity is built around a single mark — the lowercase "amd" wordmark inside the AMD Arrow — in AMD Red (#ED1C24) on white, or in white- on-red. The marketing voice on amd.com is dark-first: a near- black canvas under product hero modules with white type and the red used as a CTA and emphasis accent.
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/amd/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/amd/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.
AMD
Advanced Micro Devices, Inc. (AMD) is the silicon company behind Ryzen CPUs, Radeon GPUs, EPYC data-center processors, and Threadripper workstation parts — the long-running counterweight to Intel and, in graphics, to NVIDIA. The corporate identity is built around a single mark — the lowercase "amd" wordmark inside the AMD Arrow — in AMD Red (#ED1C24) on white, or in white- on-red. The marketing voice on amd.com is dark-first: a near- black canvas under product hero modules with white type and the red used as a CTA and emphasis accent.
Tags: amd, hardware, cpu, gpu, silicon, semiconductor, red
Atoms
Palette
AMD · [email protected] · Proprietary — All Rights Reserved
AMD (Advanced Micro Devices) is a silicon company whose corporate identity is anchored on a saturated red — the wordmark color and the only chromatic primary in the system. The supporting palette on amd.com is a near-black canvas (#1a1a1b) under the marketing voice, a small neutral ramp (#27282b through #f1f1f2) for surfaces and rules, and a cooler "AMD Blue" (#0051c6) reserved for partner / link contexts. A Bootstrap-derived danger red (#dc3545) appears for system error states distinct from the brand red.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
amd-red |
AMD Red | #ED1C24 |
black |
Black | #1A1A1B |
charcoal |
Charcoal | #27282B |
white |
White | #FFFFFF |
gray-100 |
Gray 100 | #F1F1F2 |
gray-200 |
Gray 200 | #E1E1E2 |
gray-300 |
Gray 300 | #DEE2E6 |
gray-500 |
Gray 500 | #9D9FA2 |
gray-600 |
Gray 600 | #747579 |
gray-700 |
Gray 700 | #636466 |
amd-blue |
AMD Blue | #0051C6 |
danger |
Danger Red | #DC3545 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
gray-100 |
#F1F1F2 |
surface-elevated |
white |
#FFFFFF |
text-primary |
charcoal |
#27282B |
text-secondary |
gray-700 |
#636466 |
text-tertiary |
gray-500 |
#9D9FA2 |
primary |
amd-red |
#ED1C24 |
primary-hover |
amd-red |
#ED1C24 |
accent |
amd-blue |
#0051C6 |
accent-hover |
amd-blue |
#0051C6 |
error |
danger |
#DC3545 |
border |
gray-300 |
#DEE2E6 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
black |
#1A1A1B |
surface |
charcoal |
#27282B |
surface-elevated |
charcoal |
#27282B |
text-primary |
white |
#FFFFFF |
text-secondary |
gray-200 |
#E1E1E2 |
text-tertiary |
gray-500 |
#9D9FA2 |
primary |
amd-red |
#ED1C24 |
primary-hover |
amd-red |
#ED1C24 |
accent |
amd-blue |
#0051C6 |
accent-hover |
amd-blue |
#0051C6 |
error |
danger |
#DC3545 |
border |
charcoal |
#27282B |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
black |
#1A1A1B |
on-identity |
white |
#FFFFFF |
primary |
amd-red |
#ED1C24 |
primary-hover |
amd-red |
#ED1C24 |
accent |
amd-blue |
#0051C6 |
mark |
amd-red |
#ED1C24 |
error |
danger |
#DC3545 |
background-light |
white |
#FFFFFF |
background-dark |
black |
#1A1A1B |
surface-light |
gray-100 |
#F1F1F2 |
surface-dark |
charcoal |
#27282B |
text-primary-light |
charcoal |
#27282B |
text-primary-dark |
white |
#FFFFFF |
text-secondary-light |
gray-700 |
#636466 |
text-tertiary-light |
gray-500 |
#9D9FA2 |
border-light |
gray-300 |
#DEE2E6 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → roles.colors.mark
- allowed: amd-red, white, black
- forbidden: amd-blue, gray-300, gray-500, gray-700, danger
The AMD wordmark and Arrow appear in AMD Red (#ED1C24) on light surfaces, or in white-on-red / white-on-black on dark surfaces. The system error red (#DC3545) is visually adjacent but distinct from the brand mark and must not stand in for it.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined
The AMD identity is a fixed-proportion wordmark plus arrow. Recoloring (e.g., filling the mark with AMD Blue), skewing, gradient-filling, or placing the mark on a busy photo conflicts with the corporate identity as it appears on the live site.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
White (#FFFFFF) on the near-black canvas (#1A1A1B) gives ~20:1 — clears AA at the body-text floor decisively. The dark-first marketing posture is built around this high- contrast pairing.
colorChoice → roles.colors.primary
- allowed: amd-red
- forbidden: amd-blue, danger, charcoal, gray-700
AMD Red (#ED1C24) is the brand's sole identity primary. AMD Blue is a secondary partner / link color, not the primary action color. The danger red is reserved for destructive UI states and must not be substituted for the brand red.
contextRestriction → roles.colors.error
- forbiddenContexts: marketing-headline, hero-background, cta
- allowedContexts: error-state, destructive-action
Danger Red (#DC3545) is the system error / destructive accent inherited from the Bootstrap ramp on amd.com. It is not a CTA color and must not appear in marketing context — the brand AMD Red occupies that role, and confusing the two collapses the destructive-state affordance.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. AMD Red on white measures ~4.6:1 (clears AA body text by a narrow margin); white on AMD Red measures ~4.6:1 in reverse. AA is the appropriate target for a high-saturation brand red of this hue.
💡 recommendation (2)
compositionConstraint → roles.colors.primary
- pairsWith: white, black, charcoal, gray-100
- doesNotPairWith: amd-blue, danger
AMD Red reads cleanest against neutrals — white, the near- black canvas, or the gray-100 surface. Pairing it adjacent to the secondary AMD Blue creates a red-blue clash without hierarchy resolution, and pairing it adjacent to the danger red is ambiguous semantically.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.3
AMD's marketing surfaces use a single sans family for both display and body, distinguished by size and weight rather than two families. Maintain at least a 1.3× ratio between display and prose to preserve hierarchy when one family carries both roles.
Provenance
- Source: https://www.amd.com/
- License:
Proprietary — All Rights Reserved - Attribution: Advanced Micro Devices, Inc. — identity values captured from the deployed stylesheet on amd.com (clientlib-webpack.min.css color declarations). AMD, the AMD Arrow, Ryzen, Radeon, EPYC, Threadripper, and Instinct are trademarks of Advanced Micro Devices, Inc.
- Imported:
2026-05-18 - Notes: Derived from live site CSS at https://www.amd.com/ on 2026-05-18; the published brand-resources page is not publicly accessible. The AMD wordmark uses a proprietary typeface; this atom references Inter@1 as the open-source rendering substitute. Scope is the parent corporate identity only — Ryzen, Radeon, EPYC, and Threadripper sub- brands are deferred to their own atoms. assets: [] per the encyclopedia's trademark-redistribution policy.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by AMD
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.
AMD
A clear hierarchy in AMD'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
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
→ amd-blue #0051C6 background-dark
→ black #1A1A1B background-light
→ white #FFFFFF border-light
→ gray-300 #DEE2E6 error
→ danger #DC3545 identity
→ black #1A1A1B mark
→ amd-red #ED1C24 on-identity
→ white #FFFFFF primary
→ amd-red #ED1C24 primary-hover
→ amd-red #ED1C24 surface-dark
→ charcoal #27282B surface-light
→ gray-100 #F1F1F2 text-primary-dark
→ white #FFFFFF text-primary-light
→ charcoal #27282B text-secondary-light
→ gray-700 #636466 text-tertiary-light
→ gray-500 #9D9FA2 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from amd)
Light mode (12 roles)
accent
→ amd-blue accent-hover
→ amd-blue background
→ white border
→ gray-300 error
→ danger primary
→ amd-red primary-hover
→ amd-red surface
→ gray-100 surface-elevated
→ white text-primary
→ charcoal text-secondary
→ gray-700 text-tertiary
→ gray-500 Dark mode (12 roles)
accent
→ amd-blue accent-hover
→ amd-blue background
→ black border
→ charcoal error
→ danger primary
→ amd-red primary-hover
→ amd-red surface
→ charcoal surface-elevated
→ charcoal text-primary
→ white text-secondary
→ gray-200 text-tertiary
→ gray-500 Rules (8 typed constraints)
error · 6 rules
colorChoice roles.colors.mark allowed amd-red, white, black forbidden amd-blue, gray-300, gray-500, gray-700, danger The AMD wordmark and Arrow appear in AMD Red (#ED1C24) on light surfaces, or in white-on-red / white-on-black on dark surfaces. The system error red (#DC3545) is visually adjacent but distinct from the brand mark and must not stand in for it.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined The AMD identity is a fixed-proportion wordmark plus arrow. Recoloring (e.g., filling the mark with AMD Blue), skewing, gradient-filling, or placing the mark on a busy photo conflicts with the corporate identity as it appears on the live site.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA White (#FFFFFF) on the near-black canvas (#1A1A1B) gives ~20:1 — clears AA at the body-text floor decisively. The dark-first marketing posture is built around this high- contrast pairing.
colorChoice roles.colors.primary allowed amd-red forbidden amd-blue, danger, charcoal, gray-700 AMD Red (#ED1C24) is the brand's sole identity primary. AMD Blue is a secondary partner / link color, not the primary action color. The danger red is reserved for destructive UI states and must not be substituted for the brand red.
contextRestriction roles.colors.error forbiddenContexts marketing-headline, hero-background, cta allowedContexts error-state, destructive-action Danger Red (#DC3545) is the system error / destructive accent inherited from the Bootstrap ramp on amd.com. It is not a CTA color and must not appear in marketing context — the brand AMD Red occupies that role, and confusing the two collapses the destructive-state affordance.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. AMD Red on white measures ~4.6:1 (clears AA body text by a narrow margin); white on AMD Red measures ~4.6:1 in reverse. AA is the appropriate target for a high-saturation brand red of this hue.
recommendation · 2 rules
compositionConstraint roles.colors.primary pairsWith white, black, charcoal, gray-100 doesNotPairWith amd-blue, danger AMD Red reads cleanest against neutrals — white, the near- black canvas, or the gray-100 surface. Pairing it adjacent to the secondary AMD Blue creates a red-blue clash without hierarchy resolution, and pairing it adjacent to the danger red is ambiguous semantically.
fontPairing typography.display requires prose minSizeRatio 1.3 AMD's marketing surfaces use a single sans family for both display and body, distinguished by size and weight rather than two families. Maintain at least a 1.3× ratio between display and prose to preserve hierarchy when one family carries both roles.
Provenance
- Source
- https://www.amd.com/
- License
Proprietary — All Rights Reserved- Attribution
- Advanced Micro Devices, Inc. — identity values captured from the deployed stylesheet on amd.com (clientlib-webpack.min.css color declarations). AMD, the AMD Arrow, Ryzen, Radeon, EPYC, Threadripper, and Instinct are trademarks of Advanced Micro Devices, Inc.
- Imported
2026-05-18- Notes
- Derived from live site CSS at https://www.amd.com/ on 2026-05-18; the published brand-resources page is not publicly accessible. The AMD wordmark uses a proprietary typeface; this atom references Inter@1 as the open-source rendering substitute. Scope is the parent corporate identity only — Ryzen, Radeon, EPYC, and Threadripper sub- brands are deferred to their own atoms. assets: [] per the encyclopedia's trademark-redistribution policy.