01 — Color

## Color Palette

A single saturated brand green doing all the work, sitting on top of an architectural black/white/gray neutral system. Editorial accents (purples, pales) appear sparingly inside long-form content but never on chrome.

Brand & Accent

NVIDIA Green (primary)

#76b900

Every primary CTA, active state, link affordance on dark, brand wordmark, decorative corner square

NVIDIA Green Dark

#5a8d00

Pressed state for the primary button

Accent Green Pale

#bff230

Editorial highlight tint, decorative micro-blocks

Surface

Page Canvas

#ffffff

Body of every page, card backgrounds

Soft Surface

#f7f7f7

Breadcrumb strip, sub-nav, comparison panels, alternating rows

Black Canvas

#000000

Hero chapter, dark CTA strip, footer, primary nav

Surface Elevated

#1a1a1a

Nested dark panels inside footer

Hairline

#cccccc

1px card border, table rule, footer link section divider

Hairline Strong

#5e5e5e

1px divider on dark surfaces (footer column rules)

Text

Ink

#000000

Headlines and body text on canvas

Body

#1a1a1a

Long-form paragraph text where pure black is too heavy

Mute

#757575

Metadata, breadcrumb separators, footer copyright

Stone

#898989

Least-emphasis text, disabled state

Ash

#a7a7a7

Disabled icon color, faint utility text

On Dark

#ffffff

Primary text on Black Canvas

On Dark Mute

rgba(255,255,255,0.7)

Secondary footer link text, dark-canvas body copy

Semantic

Error

#e52020

Validation, destructive confirmation

Error Deep

#650b0b

Pressed error state

Warning

#df6500

Caution callouts, deprecated banners

Warning Bright

#ef9100

Inverse warning on dark canvas

Success Deep

#3f8500

Positive confirmation where brand green clashes

Link Blue

#0046a4

Inline body-prose anchor link — only blue in the system

Editorial Accents (long-form content only)

Accent Purple

#952fc6

Research / scientific computing accent

Accent Purple Deep

#4d1368

Paired dark for purple lockups

Accent Purple Pale

#f9d4ff

Editorial callout wash

Accent Yellow Pale

#feeeb2

Documentation tip, soft callout fill

02 — Typography

## Typography Scale

NVIDIA-EMEA at weights 400 and 700 across a 12-tier hierarchy. Hierarchy is built almost entirely from size and weight — color is reserved for emphasis and never used to separate type tiers.

display-xlNVIDIA-EMEA
48px / 700 / lh 1.25
Accelerated Computing
display-lgNVIDIA-EMEA
36px / 700 / lh 1.25
Explore Our AI Solutions
heading-xlNVIDIA-EMEA
24px / 700 / lh 1.25
Sub-section title or dark CTA
heading-lgNVIDIA-EMEA
22px / 400 / lh 1.75
A long-form intro paragraph that doubles as a heading.
heading-mdNVIDIA-EMEA
20px / 700 / lh 1.25
Card group title
heading-smNVIDIA-EMEA
18px / 700 / lh 1.4
Side-rail filter group
card-titleNVIDIA-EMEA
17px / 700 / lh 1.47
Resource Card Title
body-mdNVIDIA-EMEA
16px / 400 / lh 1.5
Body copy carries product descriptions, technical specifications, and any long-form prose at 16px regular weight.
body-strongNVIDIA-EMEA
16px / 700 / lh 1.5
Inline emphasis or primary nav link
body-smNVIDIA-EMEA
15px / 400 / lh 1.67
Card description and secondary copy at 15px.
button-mdNVIDIA-EMEA
16px / 700 / lh 1.25
Get Started
button-smNVIDIA-EMEA
14.4px / 700 / lh 1 / +0.144px
Compact CTA Label
link-mdNVIDIA-EMEA
15px / 400 / lh 1.5
Inline body link
caption-mdNVIDIA-EMEA
14px / 700 / lh 1.43 / uppercase
Eyebrow Over Section
caption-smNVIDIA-EMEA
12px / 400 / lh 1.25
Footnote, metadata, table caption
caption-xsNVIDIA-EMEA
11px / 700 / lh 1
Pill chip · utility-bar text
utility-xsNVIDIA-EMEA
10px / 700 / lh 1.5 / uppercase
Legal fine-print row

03 — Components

## Button Variants

Single-accent button system. Primary fill is reserved for the most important action per viewport; outline and ghost-link variants carry secondary actions with the same green color.

button-primary

bg primary · text on-primary · rounded sm · 44px height · pad 0/24

button-primary-active

bg primary-dark · text on-primary

button-outline

transparent · text ink · 2px primary border · rounded sm

button-outline-on-dark

transparent · text on-dark · 1px on-dark border

button-ghost-link

text primary · no bg · button-md weight

button-disabled

bg surface-soft · text ash

pill-tab + pill-tab-active

default: transparent + 1px hairline · active: ink fill + on-dark text

White Paper Webinar Blog Case Study Documentation

badge-tag

bg surface-soft · text body · uppercase caption-md · rounded sm

04 — Cards

## Card Examples

Cards sit flat on canvas with a 1px Hairline border and the small green corner square as ornament. No drop shadow, no tilt, no soft chrome — just rectangle, ruler line, and the brand mark.

### Product Card Title

Short description of the product, capability, or platform offering rendered in body-sm.

Learn More →

#### Agentic AI

Capability description rendered in body-md as part of a 3- or 4-up grid that explains product features.

Learn More →
White Paper

### Resource Card Title

A longer-form description of the resource — typically 2 lines — that gives the reader enough to decide whether to download.

Read More →

Stat Callouts

4×

Faster training

60%

Lower cost

10x

Inference throughput

2.5x

Energy efficiency

Hero Chapter & Dark CTA Strip

Industries — Healthcare

### Accelerate Discovery, Diagnostics, and Patient Care

Full-bleed dark chapter that anchors the top of every primary landing page with a single green CTA paired with an outline-on-dark secondary.

### Ready to Build with NVIDIA AI Foundry?

Disclosure Rows

Specifications▾
System Requirements▾
Documentation▾

05 — Navigation

## Utility · Primary · Breadcrumb · Sub-nav

A 4-tier navigation stack: utility bar (locale + account), primary nav (product taxonomy), breadcrumb strip (uppercase trail), and a section sub-nav with the active anchor underlined in NVIDIA Green.

06 — Forms

## Form Elements

2px-radius inputs with a Hairline border by default; on focus the border becomes a 2px NVIDIA Green outline — the only focus signal in the system.

Default Input canvas bg · 1px hairline · rounded sm · 44px height
Focused Input 2px primary border
Error Input 1px error border
Search Input canvas bg · 1px hairline · 40px height
Textarea canvas bg · 1px hairline · rounded sm · min-height 96px
Submit
button-primary · always full-width below stacked fields

07 — Layout

## Spacing Scale

8px base unit. Section rhythm sits at 64px — the universal vertical gap between major content blocks across every page.

xxs · 2
xs · 4
sm · 8
md · 12
lg · 16
xl · 24
xxl · 32
section · 64

08 — Shapes

## Border Radius Scale

Aggressively angular. Outside avatar/icon circles, no element exceeds 2px radius. Just enough to soften optical aliasing without softening the brand.

none · 0

Hero, footer, dark CTA strip, primary nav

xs · 1

Decorative micro-rules and inset accent strips

sm · 2

Every interactive element — buttons, cards, inputs

full · 9999

Avatar circles, social icons

09 — Depth

## Elevation & Depth

No drop-shadow elevation in card or content surfaces. Depth is built from hairline borders and surface-color contrast.

Level 0 — Flat
no border / no shadow
Level 1 — Hairline
1px solid #cccccc
Level 2 — Hairline Strong
1px solid #5e5e5e
Level 3 — Soft Shadow
0 0 5px 0 rgba(0,0,0,0.3)

10 — Footer

## Footer Section

Dense 6-column link grid on Black Canvas — the global navigation anchor that closes every page.

11 — Responsive

## Responsive Behavior

7 breakpoint zones with a predictable collapse strategy. Section rhythm shrinks from 64px → 48px → 32px on the way down.

Name | Width | Key Changes
--- | --- | ---
ultrawide | 1920px+ | Content max-width 1280px; gutters grow to ~80px
desktop-large | 1440px | Default — 4-up cards, 6-col footer
desktop | 1280px | Same as large with narrower gutters
desktop-small | 1024px | 4-up cards collapse to 3-up; sub-nav stays horizontal
tablet | 768px | 3-up cards collapse to 2-up; primary nav becomes hamburger
mobile | 480px | Single-column; footer columns collapse to accordion
mobile-narrow | 320px | Hero display-xl scales 48px → 32px

320m-narrow
480mobile
768tablet
1024desktop-sm
1440desktop-lg

### Touch Targets

- WCAG AA (≥ 44×44px): button-primary, button-outline, and text-input all sit at 44px height with 24px horizontal padding.
- Pill tab: ~40px height with extended hit-target padding to 44×44.
- Footer links: 18–20px line-height with 8–12px vertical padding (~36–44px tap target).

### Collapsing Strategy

- Primary nav: desktop center cluster → tablet hamburger drawer at 768px.
- Card grid: 4-up → 3-up → 2-up → 1-up at 1024, 768, and 480px; gutters drop from 24px to 16px on mobile.
- Footer: 6-up → 2-up at tablet → full accordion at mobile.
- Hero display: 48px → 36px → 32px; line-height stays at 1.25.
- Sub-nav strip: desktop horizontal anchor row → tablet horizontal scroll → mobile select dropdown.
- Section padding: 64px desktop → 48px tablet → 32px mobile.