Design System

The AI computing
platform.

A bright engineering system with NVIDIA Green reserved for decisive actions and active states.

15 color tokens 9 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Pure black canvas with NVIDIA Green as the singular accent. Monochrome neutrals in 5 steps from Void Black to Slate.

Void Black
#000000
Base canvas
Carbon
#0a0a0a
Elevated surfaces
Obsidian
#111111
Secondary sections
Gunmetal
#1a1a1a
Borders, dividers
Slate
#2a2a2a
Inactive states
Platinum
#ffffff
Primary text
Silver
#e0e0e0
Secondary text
Pewter
#888888
Placeholders
Ash
#666666
Helper text
NVIDIA Green
#76B900
Primary accent, CTAs
Bright Lime
#8ED100
Hover, emphasis
Signal White
#f5f5f5
Button labels
Deep Teal
#00C8B4
Data viz, info
Slate Blue
#4A90D9
Links, secondary

Gradients

nvidia-green-glow
Ambient green glow for hero sections
carbon-gradient
Subtle depth gradient for sections
diagonal-slash
Angular accent for cards and panels
Typography

Type Scale

Inter as primary typeface (NVIDIA Display substitute). Tight letter-spacing and bold weights for technical authority.

Display-xl The AI platform 64px / 1.0 / -0.04em
Display Built for speed 48px / 1.1 / -0.02em
Heading-lg GPU Architecture 32px / 1.15 / -0.02em
Heading Section heading 24px / 1.2 / -0.01em
Heading-sm Feature title 20px / 1.25 / -0.01em
Body Default body text for readable content 16px / 1.5 / 0
Body-sm Dense data, specs, comparison rows 14px / 1.5 / 0.01px
Caption Meta info · Labels · Helper text 13px / 1.5 / 0.02px

Fonts

Display Inter 400-700 · 14-24px
Text Inter 400-700 · 13-18px
Mono JetBrains Mono 400-700 · Specs & code
Layout

Spacing & Shapes

Base unit 4px. Compact density for information-rich interfaces. 13-step spacing scale, 9 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
6464px
9696px

Border Radius

sharp 0px
sm 4px
md 8px
lg 12px
xl 16px
pill 9999px
Elevation

Depth & Surfaces

Subtle surface-level shifts instead of shadows. 4 distinct levels from Void Black to Gunmetal.

Depth Levels

Void Black
Base page background — the canvas
Level 0
Carbon
Elevated panels, card surfaces
Level 1
Obsidian
Secondary sections, code blocks
Level 2
Gunmetal
Borders, dividers, tertiary surfaces
Level 3

Surface System

Void Black #000000
Carbon #0a0a0a
Obsidian #111111
Gunmetal #1a1a1a
Components

Button Variants

Primary CTA (NVIDIA Green filled), secondary (green outlined), and ghost variants for interaction hierarchy.

Primary Button
Main call to action — highest visual weight
.btn-primary
NVIDIA Green (#76B900) background, Void Black text, 8px radius. Use for the single most important action.
Secondary Button
Secondary interactive actions
.btn-secondary
NVIDIA Green text and border, transparent background. Clear interactive target that defers to primary.
Ghost Button
Tertiary actions, navigation
.btn-ghost
Platinum text, Gunmetal border. For low-emphasis actions and navigation items.
Dark Card
Content containers, feature blocks
.card-dark
GeForce RTX 5090
32GB GDDR7 · 21,760 CUDA Cores
Carbon (#0a0a0a) background, 12px radius, 24px padding, 1px Gunmetal border.
Accent Card
Highlighted content, promotions
.card-accent
New Release
Blackwell architecture delivers 2x performance per watt.
Obsidian background with NVIDIA Green left border. Draws attention without overwhelming.
Tag / Badge
Status indicators, categories
.tag
New AI GPU
Semi-transparent accent background, pill shape, uppercase caption text.
Input Field
User text input
input
Void Black background, 1px Gunmetal border, 8px radius. Focus uses NVIDIA Green border.
Guidelines

Do's & Don'ts

Do
  • Void Black (#000000) as primary background
  • NVIDIA Green (#76B900) exclusively for accents and CTAs
  • Platinum (#ffffff) for all primary text
  • Compact, information-dense layouts
  • Sharp geometric shapes and clean lines
  • NVIDIA Mono for all technical data and specs
  • Small border radii (4-12px) for precision
Don't
  • Use NVIDIA Green for large backgrounds
  • Introduce warm or saturated secondary colors
  • Use rounded, playful shapes
  • Apply generous, airy spacing
  • Add decorative illustrations or hand-drawn elements
  • Use script or display typefaces
  • Use mono fonts for non-code content