AMD DESIGN.md

High-performance computing with sharp technical confidence. AMD's current public site combines deep charcoal foundations, bright white sections, signature red accents, angular hardware imagery, and product-forward storytelling to make CPUs, GPUs, AI PCs, and data center hardware feel powerful, modern, and immediately credible.

1. Visual Theme & Atmosphere

Overall Aesthetic

AMD feels like performance engineering rendered as bold technical marketing. The system mixes dramatic dark sections, red energy accents, and practical product detail. It is visually stronger than minimalist enterprise software, but it stays grounded in specs, hardware renders, and real use cases.

Mood & Feeling

• Fast and performance-led
• Technical, confident, and current
• Gaming-adjacent without becoming loud everywhere
• Serious enough for enterprise and AI workloads
• Bold, sharp, and hardware-native

Design Density

Medium density. AMD surfaces many product categories and partner ecosystems, but it stays readable through large hero framing, strong contrast, and clearly separated product bands.

Visual Character

• Deep charcoal and black backgrounds
• High-contrast white type with AMD red accents
• Large silicon, board, and laptop imagery
• Angular section framing and hard-edged product confidence
• Marketing that blends consumer performance with enterprise scale

2. Color Palette & Roles

Core Foundation

Brand and Support

Utility

3. Typography Rules

Font Stack

css--font-display: "AMD Sans", "Helvetica Neue", Arial, sans-serif;
--font-sans: "AMD Sans", system-ui, -apple-system, sans-serif;
--font-mono: "SF Mono", "Roboto Mono", Menlo, monospace;

Type Scale

Typography Philosophy

AMD typography should feel high-performance and technically grounded. Headlines can be bold and cinematic, but supporting text must still communicate specs, workloads, and platform breadth with clarity.

4. Component Stylings

Buttons

css.button-primary {
  background: #ed1c24;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  min-height: 48px;
  padding: 0 22px;
  font-size: 16px;
  font-weight: 700;
}

.button-primary:hover {
  background: #c2161d;
}

.button-secondary {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  min-height: 48px;
  padding: 0 22px;
}

Cards and Product Panels

css.product-card {
  background: #ffffff;
  color: #111111;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
}

Inputs

css.input {
  background: #111111;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  min-height: 48px;
  padding: 12px 14px;
}

.input:focus {
  outline: none;
  border-color: #ed1c24;
  box-shadow: 0 0 0 4px rgba(255, 180, 182, 0.3);
}

Component Notes

• Product surfaces should foreground chip families, AI platforms, and gaming/workstation contexts
• Dark sections should feel premium and technical rather than noisy
• Hardware renders and benchmark-style proof deserve crisp framing and strong contrast

5. Layout Principles

Spacing Scale

Layout Behavior

• Use strong hero framing to lead each major product family
• Group stories by use case: gaming, creators, AI PCs, data center, enterprise
• Let hardware imagery and product logos do significant visual work
• Keep dense technical content separated into clear modules rather than long paragraphs

Whitespace Philosophy

Whitespace should feel structured and intentional, giving hardware and performance claims room to land without flattening the page into generic black tech minimalism.

6. Depth & Elevation

Elevation Strategy

AMD uses contrast-heavy technical elevation. Dark layers, glows, and crisp product cards create depth more than soft consumer shadows do.

css--shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.16);
--shadow-card: 0 18px 36px rgba(0, 0, 0, 0.18);
--shadow-focus: 0 0 0 4px rgba(255, 180, 182, 0.3);

Surface Hierarchy

• Black and charcoal hero foundation
• Bright white product cards for contrast
• Red accents for CTA and key emphasis
• Technical glow or image-driven highlights for premium product zones

7. Do's and Don'ts

Do

• Keep AMD bold, technical, and product-led
• Use red as a strong action and identity anchor
• Make hardware renders and performance messaging central
• Preserve clear separation between consumer, gaming, and enterprise contexts

Don't

• Do not make AMD feel like generic red-and-black gaming merch
• Do not flatten technical credibility into vague hype copy
• Do not overload every surface with aggressive effects or gradients
• Do not make enterprise sections feel visually disconnected from the main brand

8. Responsive Behavior

Breakpoints

Responsive Rules

• Keep hardware imagery prominent even when layouts collapse
• Stack product families into clear vertical bands on mobile
• Preserve contrast and red CTA visibility across breakpoints
• Avoid shrinking technical headings so far that product differentiation gets lost

9. Agent Prompt Guide

Quick Reference

• Deep charcoal and black structure with bright AMD red accents
• Large hardware imagery, sharp product framing, and technical performance messaging
• High-contrast typography, rounded cards, and modular product proof
• Powerful, current, and hardware-native rather than generic gaming hype

Prompt Template

textDesign this like AMD's current public website:
- black and charcoal foundation with bright red action accents
- large CPU, GPU, and laptop imagery with crisp product-card framing
- bold technical headlines and structured performance messaging
- modern computing, AI, gaming, and enterprise hardware energy
- sharp, high-contrast, product-led design rather than abstract corporate minimalism