Design System
Inspired by NVIDIA

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized.

Explore Solutions View Documentation
01 / Colors

Color Palette

Primary Brand
NVIDIA Green
#76b900
Accent, borders, CTAs
True Black
#000000
Primary background
Pure White
#ffffff
Light backgrounds, text
Green Light
#bff230
Bright accents
Extended Palette
Orange 400
#df6500
Warm accent
Yellow 300
#ef9100
Secondary warm
Purple 800
#4d1368
AI / Premium
Fuchsia 700
#8c1c55
Promotions
Blue 700
#0046a4
Informational
Status
Red 500
#e52020
Error, destructive
Green 500
#3f8500
Success
Yellow 050
#feeeb2
Warning surface
Purple 100
#f9d4ff
Info surface
Neutral Scale
Near Black
#1a1a1a
Dark surfaces
Gray Border
#5e5e5e
Borders, dividers
Gray 500
#757575
Tertiary text
Gray 400
#898989
Secondary text
Gray 300
#a7a7a7
Muted text
Interactive
Link Hover
#3860be
Hover state
Button Hover
#1eaedb
CTA hover
Button Active
#007fff
CTA active/pressed
02 / Typography

Typography Scale

Display Hero
Display Hero -- 36px / 700 / 1.25 / NVIDIA-EMEA
Section Heading
Section Heading -- 24px / 700 / 1.25 / NVIDIA-EMEA
Sub-heading -- Feature descriptions and subtitles
Sub-heading -- 22px / 400 / 1.75 / NVIDIA-EMEA
Card Title
Card Title -- 20px / 700 / 1.25 / NVIDIA-EMEA
Body Large -- Emphasized lead paragraph text for introductions
Body Large -- 18px / 700 / 1.67 / NVIDIA-EMEA
Body -- Standard reading text for descriptions and content paragraphs across the site.
Body -- 16px / 400 / 1.50 / NVIDIA-EMEA
Body Bold -- Strong labels and nav items
Body Bold -- 16px / 700 / 1.50 / NVIDIA-EMEA
Body Small -- Secondary content and descriptions for product cards.
Body Small -- 15px / 400 / 1.67 / NVIDIA-EMEA
Link Uppercase Label
Link Uppercase -- 14px / 700 / 1.43 / uppercase / NVIDIA-EMEA
Caption -- Metadata and timestamps
Caption -- 14px / 600 / 1.50 / NVIDIA-EMEA
Caption Small -- Fine print and legal text
Caption Small -- 12px / 400 / 1.25 / NVIDIA-EMEA
GPU ACCELERATED
Micro Label -- 10px / 700 / uppercase / NVIDIA-EMEA
03 / Buttons

Button Variants

Explore Solutions
Primary (Light BG)
Explore GPUs
Primary (Dark BG)
Documentation
Secondary
Hover State
Hover
Active State
Active
Learn More >
Compact Link
NEW
Micro Badge
AI
Category Badge
04 / Cards

Card Examples

GPU

GeForce RTX Series

The ultimate in PC gaming performance. Ray tracing, DLSS, and AI-powered graphics for immersive experiences.

AI

NVIDIA AI Enterprise

End-to-end AI software platform that accelerates data science pipelines and streamlines development.

DATA CENTER

DGX Systems

Purpose-built AI infrastructure integrating hardware and software for the most demanding workloads.

05 / Forms

Form Elements

Default
Focus (green border)
Error (red border)
06 / Spacing

Spacing Scale

2
4
6
8
10
12
16
24
32
07 / Radius

Border Radius Scale

1px
Inline spans
2px
Buttons, cards
50%
Avatars, icons
08 / Elevation

Elevation & Depth

Level 0: Flat
No shadow
Level 1: Card
rgba(0,0,0,0.3) 0 0 5px
Level 1b: Border
1px solid #5e5e5e
Level 2: Accent
2px solid #76b900
Level 3: Elevated
Hover intensified
Focus
2px solid #000 outline