Color Palette
Core Surface Colors — Black Dominant at ×7682 (highest in series)
Black (dominant)
#000000 · ×7682
Dark Gray 3
#1A1A1A · ×282
Light Gray 2
#CCCCCC · ×116
NVIDIA Green Brand Spectrum — the #76B900 identity
Dark Green (tint)
#134D00 · ×4
Green 2 (fill)
#74B71B · ×2
Green (brand)
#76B900 · ×258
Light Green (hero text)
#E2FF8C · ×8
Text Colors — Achromatic Gray Scale
Dark Gray 4
#111111 · ×234
Dark Gray 2
#222222 · ×416
Dark Gray (body)
#666666 · ×780
Border, Shadow & Specialty Colors
Dark Gray 6
#5E5E5E · border
Mid Gray 3
#A7A7A7 · border
Light Gray 3
#C7C5C7 · shadow
Light Gray 5
#D8D8D8 · border
Cyan (border)
#32AE88 · ×2
Dark Blue 2 (fill)
#2E3644 · ×1
Typography
--font-family-2 · NVIDIA-NALA (proprietary display)
NVIDIA NALA
World leader in AI computing. The visual voice of NVIDIA's brand across all product surfaces.
Light · 300
Regular · 400
Medium · 500
Semibold · 600
Bold · 700
--font-family-base · sans-serif · --font-family-3 · Font Awesome 6 Pro
System Sans + Icons
System sans-serif for body text. Font Awesome 6 Pro for the icon system — registered as a font family token, not an image-based icon system.
NALA: display & headlines
sans-serif: body text
FA Pro: icons
AI COMPUTING LEADER
Display 36px · Bold · NVIDIA-NALA · line-height: 45px · letter-spacing: 0.16px
GeForce RTX 50 Series
Heading 28px · Bold · line-height: 37px
Accelerating AI
Heading MD 24px · Semibold · line-height: 30px
Blackwell Architecture
Subheading 20px · Medium · line-height: 26px
The NVIDIA Blackwell platform delivers breakthrough AI computing for data centers, PCs, and edge devices with unprecedented performance per watt.
Body 16px · Regular · line-height: 24px · letter-spacing: 0.144px
CUDA cores: 21,760 · Memory: 24GB GDDR7 · Memory bandwidth: 1,792 GB/s
Body SM 14px · Regular · line-height: 21px · letter-spacing: 0.144px
SPECS · DRIVERS · SUPPORT · ENTERPRISE
Label/Caption 12px · Medium · line-height: 16px · all-positive letter-spacing
★ AI PARTNER OF THE YEAR
Micro 11px · Regular · light green #E2FF8C for hero callouts · line-height: 15px
Line Heights — 17 tokens (most dense in series)
Letter Spacing — All Positive (unique in this series)
Blackwell GPU
--letter-spacing-tight
+0.144px · body text, captions — all positive unlike most systems
COMPUTE LEADER
--letter-spacing-normal
+0.16px · headings, labels, uppercase nav — the widest token
Spacing
Spacing Scale
37 steps — 1px → 326.203px · includes sub-pixel fractional values and two near-identical large tokens (326.195 / 326.203px)
Borders
Border Radii — Near-Sharp aesthetic (1–3px)
Border Widths — 3 Tokens including 12px accent
--border-width-hairline
1px · ×88 — cards, inputs, dividers
--border-width-thin
2px · ×72 — focus rings, hero cards
--border-width-base
12px · ×4 — thick accent bars and product card decorations
Shadows / Elevation
Shadow Tokens
6 tokens — all use rgba black or named gray values with tight spread radii
sm — Omni-directional
×85 (dominant)
rgba(0,0,0,0.3) 0px 0px 5px — 30% opacity omni-shadow, used on almost all card elements
md — Bottom lift
×2
rgba(0,0,0,0.19) 0px 2px 6px — 19% bottom-only drop shadow for cards
lg — Side panel
×1
rgba(0,0,0,0.2) 3px 0px 15px — 20% right-side shadow for lateral panels
xl — Sub-pixel blur
×1
2-stop: 24% 4.7px 0.3px + 16% 5.88px 0.12px — fractional spread values
shadow-5 — Named gray
×1
rgb(153,153,153) 0px 2px 10px -3px — uses named gray instead of rgba
shadow-6 — Corner highlight
×1
rgb(199,197,199) -3px -3px 5px -2px — inward top-left corner highlight
Z-Index
16 layers — starts at −999 (deepest background), includes a nav cluster at 551/552/553, escalates through 999/1000/1001/1004/1005, a mega-menu at 10000, and ends with dual INT_MAX values (2147483646 + 2147483647) — unique across all 28 systems.
| Layer | Value | Usage |
|---|
| --z-1 (Deep bg) | -999 | Deep background canvas, GPU render layers |
| --z-2 (Below content) | -1 | Decorative background elements |
| --z-3 (Base) | 1 | Base content flow |
| --z-4 (Raised) | 2 | Slightly elevated cards |
| --z-5 (Stack) | 3 | Multi-card stacks |
| --z-6 (Nav 1) | 551 | Navigation cluster start — sub-nav items |
| --z-7 (Nav 2) | 552 | Navigation cluster — nav dropdowns |
| --z-8 (Nav 3) | 553 | Navigation cluster top — primary nav bar |
| --z-9 (Overlay) | 999 | Overlay backgrounds, drawers |
| --z-10 (Modal) | 1000 | Modal dialogs, floating panels |
| --z-11 (Modal+) | 1001 | Modal focus traps, stacked modals |
| --z-12 (Priority) | 1004 | Priority overlays |
| --z-13 (Priority+) | 1005 | High-priority tooltips, popovers |
| --z-14 (Mega-menu) | 10000 | Mega-menu / full-screen overlays |
| --z-15 (INT_MAX−1) | 2,147,483,646 | Critical system overlays |
| --z-16 (INT_MAX) | 2,147,483,647 | Absolute top — GDPR / critical banners |
Breakpoints
25 breakpoints — 320px → 3000px. Dense sub-768px coverage (320/374/375/399/400/425/426/480/500/530/550/600/630/639/640) for mobile-first GPU product pages, standard tablet/desktop milestones, and a unique 3000px breakpoint — the only system in this series targeting ultra-wide 4K+ displays.
Opacity
Opacity Tokens
2 tokens — 0.6 and 0.9 (minimal like Nike/adidas)
NVIDIA uses named CSS custom properties for card animation: --card-fade-in-duration: 200ms, --card-expand-duration: 300ms. The :root layer also defines a complete semantic color scale (gray-025→975, red, yellow, blue, teal, green, purple, fuchsia) — 50+ additional palette tokens beyond what was detected at render time.
Accessibility
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| #666666 (Dark Gray) | #000000 (Black) | 3.66:1 | AA Large |
| #666666 (Dark Gray) | #EEEEEE (Light Gray) | 4.95:1 | AA |
| #666666 (Dark Gray) | #1A1A1A (Dark Gray 3) | 3.03:1 | AA Large |
| #666666 (Dark Gray) | #76B900 (Green) | 2.38:1 | Fail |
| #666666 (Dark Gray) | #FFFFFF (White) | 5.74:1 | AA |
| #222222 (Dark Gray 2) | #000000 (Black) | 1.32:1 | Fail |
| #222222 (Dark Gray 2) | #EEEEEE (Light Gray) | 13.71:1 | AAA |
| #222222 (Dark Gray 2) | #1A1A1A (Dark Gray 3) | 1.09:1 | Fail |
| #222222 (Dark Gray 2) | #76B900 (Green) | 6.6:1 | AA |
| #222222 (Dark Gray 2) | #FFFFFF (White) | 15.91:1 | AAA |
| #111111 (Dark Gray 4) | #EEEEEE (Light Gray) | 16.28:1 | AAA |
| #111111 (Dark Gray 4) | #76B900 (Green) | 7.83:1 | AAA |
| #111111 (Dark Gray 4) | #FFFFFF (White) | 18.88:1 | AAA |
| #555555 (Dark Gray 5) | #EEEEEE (Light Gray) | 6.43:1 | AA |
| #555555 (Dark Gray 5) | #FFFFFF (White) | 7.46:1 | AAA |
| #999999 (Mid Gray) | #000000 (Black) | 7.37:1 | AAA |
| #999999 (Mid Gray) | #1A1A1A (Dark Gray 3) | 6.11:1 | AA |
| #999999 (Mid Gray) | #EEEEEE (Light Gray) | 2.46:1 | Fail |
| #999999 (Mid Gray) | #76B900 (Green) | 1.18:1 | Fail |
| #999999 (Mid Gray) | #FFFFFF (White) | 2.85:1 | Fail |
CSS Variables Reference
Black (dominant ×7682)--color-black#000000
Dark Gray 3--color-dark-gray-3#1A1A1A · ×282
Light Gray (surface)--color-light-gray#EEEEEE · ×484
White--color-white#FFFFFF · ×245
Light Gray 2--color-light-gray-2#CCCCCC · ×116
Green (NVIDIA brand)--color-green#76B900 · ×258
Dark Green (tint)--color-dark-green#134D00 · ×4
Dark Blue--color-dark-blue#27455C · ×8
White 2--color-white-2#F7F7F7 · ×6
White 3 (green tint)--color-white-3#F9FFFA · ×1
Dark Gray (body ×780)--color-dark-gray#666666
Dark Gray 2 (heading ×416)--color-dark-gray-2#222222
Dark Gray 4 (×234)--color-dark-gray-4#111111
Dark Gray 5--color-dark-gray-5#555555 · ×29
Mid Gray--color-mid-gray#999999 · ×13
Light Green (hero text)--color-light-green#E2FF8C · ×8
Blue (link)--color-blue#3860BE · ×1
Border default--color-dark-gray-6#5E5E5E · ×22
Cyan (border accent)--color-cyan#32AE88 · ×2
Light Gray 3 (shadow)--color-light-gray-3#C7C5C7 · ×2
System sans-serif--font-family-basesans-serif
NVIDIA-NALA (proprietary)--font-family-2NVIDIA-NALA
Icon font system--font-family-3Font Awesome 6 Pro
Light/Regular/Medium/SB/Boldweights300/400/500/600/700
11px → 36px (sub-px steps)scale17 sizes
11px line-height (tightest)tight → 45px17 tokens
Body / captions (positive!)--letter-spacing-tight+0.144px
Headings / labels (positive!)--letter-spacing-normal+0.16px
Instant · ×3--duration-instant0.1s
Fast (dominant ×384)--duration-fast0.2s
Normal · ×4--duration-normal0.25s
Slow · ×82--duration-slow0.3s
Slower · ×38--duration-slower0.4s
0.5s · ×177--duration-duration-60.5s
Ease-Out (dominant ×443)--easing-ease-outease-out
Strong · ×2--opacity-900.9
Deep background--z-1-999
Nav cluster (551/552/553)--z-6/7/8551/552/553
Modal stack (1000/1001)--z-10/111000/1001
Mega-menu--z-1410000
INT_MAX−1--z-152,147,483,646
INT_MAX (dual!)--z-162,147,483,647
NVIDIA Design System · Generated 17/04/2026 · 31 color tokens · 3 font families (NVIDIA-NALA, sans-serif, Font Awesome 6 Pro) · 5 font weights · 17 font sizes (sub-pixel) · 17 line heights · 2 letter-spacing (all positive) · 37 spacing steps · 9 radius · 3 border widths (incl. 12px accent) · 6 shadows · 8 durations · 4 easings · 16 z-index layers (551 nav cluster + dual INT_MAX) · 25 breakpoints (3000px unique) · 2 opacity