NVIDIA

version alpha

name NVIDIA

description | An engineering-grade marketing system organized around two surface modes — a deep black canvas for hero and footer chapters and a flat paper-white canvas for body content — connected by a single, almost violently saturated NVIDIA Green accent that carries every CTA, every active tab, and the small decorative corner squares that mark out cards. The system is unapologetically angular: 2px radius across every surface, tight bold sans-serif typography in NVIDIA's proprietary EMEA cut, and a hairline gray rule that separates dense multi-column technical content. There is no decorative gradient, no atmospheric mesh, no soft drop shadow — just black, white, gray, and green stacked into a structured editorial grid that scales from product cards to massive industry landing pages without bending its rules.

colors primary: "#76b900" on-primary: "#000000" primary-dark: "#5a8d00" ink: "#000000" canvas: "#ffffff" surface-dark: "#000000" surface-soft: "#f7f7f7" surface-elevated: "#1a1a1a" hairline: "#cccccc" hairline-strong: "#5e5e5e" body: "#1a1a1a" mute: "#757575" stone: "#898989" ash: "#a7a7a7" on-dark: "#ffffff" on-dark-mute: "rgba(255,255,255,0.7)" link-blue: "#0046a4" blue-700: "#0046a4" error: "#e52020" error-deep: "#650b0b" warning: "#df6500" warning-bright: "#ef9100" success-deep: "#3f8500" accent-yellow-pale: "#feeeb2" accent-purple: "#952fc6" accent-purple-deep: "#4d1368" accent-purple-pale: "#f9d4ff" accent-green-pale: "#bff230"

typography display-xl: fontFamily: NVIDIA-EMEA fontSize: 48px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 display-lg: fontFamily: NVIDIA-EMEA fontSize: 36px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 heading-xl: fontFamily: NVIDIA-EMEA fontSize: 24px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 heading-lg: fontFamily: NVIDIA-EMEA fontSize: 22px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0 heading-md: fontFamily: NVIDIA-EMEA fontSize: 20px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 heading-sm: fontFamily: NVIDIA-EMEA fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0 card-title: fontFamily: NVIDIA-EMEA fontSize: 17px fontWeight: 700 lineHeight: 1.47 letterSpacing: 0 body-md: fontFamily: NVIDIA-EMEA fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-strong: fontFamily: NVIDIA-EMEA fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: NVIDIA-EMEA fontSize: 15px fontWeight: 400 lineHeight: 1.67 letterSpacing: 0 button-lg: fontFamily: NVIDIA-EMEA fontSize: 18px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 button-md: fontFamily: NVIDIA-EMEA fontSize: 16px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 button-sm: fontFamily: NVIDIA-EMEA fontSize: 14.4px fontWeight: 700 lineHeight: 1 letterSpacing: 0.144px link-md: fontFamily: NVIDIA-EMEA fontSize: 15px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption-md: fontFamily: NVIDIA-EMEA fontSize: 14px fontWeight: 700 lineHeight: 1.43 letterSpacing: 0 textTransform: uppercase caption-sm: fontFamily: NVIDIA-EMEA fontSize: 12px fontWeight: 400 lineHeight: 1.25 letterSpacing: 0 caption-xs: fontFamily: NVIDIA-EMEA fontSize: 11px fontWeight: 700 lineHeight: 1 letterSpacing: 0 utility-xs: fontFamily: NVIDIA-EMEA fontSize: 10px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 textTransform: uppercase

rounded none: 0px xs: 1px sm: 2px full: 9999px

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

components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 11px 24px height: 44px button-primary-active: backgroundColor: "{colors.primary-dark}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" button-outline: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 11px 13px button-outline-on-dark: backgroundColor: "transparent" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.sm}" button-ghost-link: textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.none}" button-disabled: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ash}" rounded: "{rounded.sm}" pill-tab: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.sm}" padding: 10px 18px pill-tab-active: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.button-sm}" rounded: "{rounded.sm}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 12px 16px height: 44px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.sm}" search-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 10px 16px height: 40px product-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.card-title}" rounded: "{rounded.sm}" padding: 24px feature-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 32px resource-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.card-title}" rounded: "{rounded.sm}" padding: 24px hero-card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: 80px 48px cta-strip-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.heading-xl}" rounded: "{rounded.none}" padding: 64px 48px callout-stat: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" rounded: "{rounded.sm}" padding: 32px corner-square: backgroundColor: "{colors.primary}" rounded: "{rounded.none}" size: 12px utility-bar: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.caption-sm}" rounded: "{rounded.none}" height: 32px primary-nav: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-strong}" rounded: "{rounded.none}" height: 64px breadcrumb-bar: backgroundColor: "{colors.surface-soft}" textColor: "{colors.body}" typography: "{typography.caption-md}" rounded: "{rounded.none}" height: 48px sub-nav-strip: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" height: 56px footer-section: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark-mute}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 64px 48px link-inline: textColor: "{colors.link-blue}" typography: "{typography.link-md}" badge-tag: backgroundColor: "{colors.surface-soft}" textColor: "{colors.body}" typography: "{typography.caption-md}" rounded: "{rounded.sm}" padding: 4px 10px

Overview

NVIDIA's marketing system is built like a piece of engineering documentation that learned graphic design — every page is a structured cascade of dense, factual information arranged on a paper-white grid, framed top and bottom by deep black hero/footer chapters. There is exactly one accent color in the entire system, and it is doing all the work: NVIDIA Green ({colors.primary} — #76b900), used for every primary CTA, every active tab, every link affordance on dark surfaces, and the small decorative corner squares that mark out card containers. Nothing else competes for attention.

The system's character comes from extreme typographic restraint and an almost punishingly angular geometry. Every container, button, and image uses {rounded.sm} (2px) — a token that's barely-there but never zero, giving the system the precise, technical feel of CAD output rather than warm consumer software. Cards sit on plain {colors.canvas} with a hairline {colors.hairline} border (no shadow, no elevation), separated by tight 8px-base spacing rhythm. Long-form pages stack 6–10 of these cards into multi-column technical grids without ever introducing decorative breaks.

The black-canvas hero and footer chapters are the system's "headline moments" — a single full-bleed photographic or 3D-rendered image with {typography.display-xl} headline copy laid in white, a single green CTA button, and a small green corner square as the only ornamentation. Everything else is subordinate.

Key Characteristics:

• Single-accent system: {colors.primary} carries every CTA, active state, and decorative motif. The rest is monochrome black/white/gray.

• Two-mode surface architecture: {colors.surface-dark} for hero/footer chapters; {colors.canvas} for body — alternating in a predictable rhythm down the page

• Hyper-angular geometry: {rounded.sm} (2px) on every interactive element. There are no pill buttons, no rounded cards, no soft chrome.

• NVIDIA-EMEA proprietary sans-serif at weights 400 and 700, scaled across a 12-tier hierarchy from {typography.utility-xs} (10px) up to {typography.display-xl} (48px)

• Card library leans on hairline {colors.hairline} borders and {colors.surface-soft} backgrounds rather than shadows for separation

• Signature decorative element: the small {component.corner-square} (~12px green square) anchored to one corner of resource and feature cards

• Dense multi-column footer with 4–6 link columns on {colors.surface-dark} — every page closes with the same structured global navigation

Colors

Source pages: /tr-tr/ (primary homepage), /en-eu/industries/healthcare-life-sciences/, /en-eu/solutions/ai/, /en-eu/ai/foundry/. The chrome palette is identical across all four — only photography and copy vary.

Brand & Accent

• NVIDIA Green ({colors.primary} — #76b900): the brand. Every primary CTA, every active state, every link affordance on dark surfaces, every corner square, and the brand wordmark itself.

• NVIDIA Green Dark ({colors.primary-dark} — #5a8d00): pressed state for the primary button — a single notch deeper than the brand green.

• Accent Green Pale ({colors.accent-green-pale} — #bff230): rare highlight tint used in editorial callouts and decorative micro-blocks; never on chrome.

Surface

• Page Canvas ({colors.canvas} — #ffffff): the body of every page. Cards sit directly on it with hairline rules.

• Soft Surface ({colors.surface-soft} — #f7f7f7): breadcrumb strip, sub-nav, side-by-side comparison panels, alternating row backgrounds.

• Black Canvas ({colors.surface-dark} — #000000): hero chapter, dark CTA strips, footer, primary nav. The system's "frame" color.

• Surface Elevated ({colors.surface-elevated} — #1a1a1a): nested dark panels inside the footer (column dividers, fine-print bar).

• Hairline ({colors.hairline} — #cccccc): 1px card border, table rule, divider between footer link sections.

• Hairline Strong ({colors.hairline-strong} — #5e5e5e): 1px divider on dark surfaces (footer column rules, dark-mode card edges).

Text

• Ink ({colors.ink} — #000000): headlines and body text on {colors.canvas}.

• Body ({colors.body} — #1a1a1a): long-form paragraph text where pure black is too heavy.

• Mute ({colors.mute} — #757575): metadata, breadcrumb separators, footer copyright.

• Stone ({colors.stone} — #898989): least-emphasis text and disabled state.

• Ash ({colors.ash} — #a7a7a7): disabled icon color and faint utility text.

• On Dark ({colors.on-dark} — #ffffff): primary text on {colors.surface-dark}.

• On Dark Mute ({colors.on-dark-mute} — rgba(255,255,255,0.7)): secondary footer link text and dark-canvas body copy.

Semantic

• Error ({colors.error} — #e52020): validation messages, destructive confirmation.

• Error Deep ({colors.error-deep} — #650b0b): pressed state for error buttons; hover-pressed