Dark Mode

# 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
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

Project Name
Default
CUDA Version
Focus (green border)
GPU Count
Error (red border)
Configuration

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.6) 0 0 8px
Level 1b: Border
1px solid #333
Level 2: Accent
2px solid #76b900
Level 3: Elevated
Hover intensified
Focus
2px solid outline