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 typography, and a hairline gray rule that separates dense multi-column technical content.
01 — Color
A single saturated brand green doing all the work, sitting on top of an architectural black/white/gray neutral system. Editorial accents (purples, pales) appear sparingly inside long-form content but never on chrome.
Brand & Accent
Surface
Text
Semantic
Editorial Accents (long-form content only)
02 — Typography
NVIDIA-EMEA at weights 400 and 700 across a 12-tier hierarchy. Hierarchy is built almost entirely from size and weight — color is reserved for emphasis and never used to separate type tiers.
03 — Components
Single-accent button system. Primary fill is reserved for the most important action per viewport; outline and ghost-link variants carry secondary actions with the same green color.
04 — Cards
Cards sit flat on canvas with a 1px Hairline border and the small green corner square as ornament. No drop shadow, no tilt, no soft chrome — just rectangle, ruler line, and the brand mark.
Short description of the product, capability, or platform offering rendered in body-sm.
Learn More →Capability description rendered in body-md as part of a 3- or 4-up grid that explains product features.
Learn More →A longer-form description of the resource — typically 2 lines — that gives the reader enough to decide whether to download.
Read More →Stat Callouts
4×
Faster training
60%
Lower cost
10x
Inference throughput
2.5x
Energy efficiency
Hero Chapter & Dark CTA Strip
Industries — Healthcare
Full-bleed dark chapter that anchors the top of every primary landing page with a single green CTA paired with an outline-on-dark secondary.
Disclosure Rows
05 — Navigation
A 4-tier navigation stack: utility bar (locale + account), primary nav (product taxonomy), breadcrumb strip (uppercase trail), and a section sub-nav with the active anchor underlined in NVIDIA Green.
06 — Forms
2px-radius inputs with a Hairline border by default; on focus the border becomes a 2px NVIDIA Green outline — the only focus signal in the system.
07 — Layout
8px base unit. Section rhythm sits at 64px — the universal vertical gap between major content blocks across every page.
08 — Shapes
Aggressively angular. Outside avatar/icon circles, no element exceeds 2px radius. Just enough to soften optical aliasing without softening the brand.
Hero, footer, dark CTA strip, primary nav
Decorative micro-rules and inset accent strips
Every interactive element — buttons, cards, inputs
Avatar circles, social icons
09 — Depth
No drop-shadow elevation in card or content surfaces. Depth is built from hairline borders and surface-color contrast.
10 — Footer
Dense 6-column link grid on Black Canvas — the global navigation anchor that closes every page.
11 — Responsive
7 breakpoint zones with a predictable collapse strategy. Section rhythm shrinks from 64px → 48px → 32px on the way down.
| Name | Width | Key Changes |
|---|---|---|
| ultrawide | 1920px+ | Content max-width 1280px; gutters grow to ~80px |
| desktop-large | 1440px | Default — 4-up cards, 6-col footer |
| desktop | 1280px | Same as large with narrower gutters |
| desktop-small | 1024px | 4-up cards collapse to 3-up; sub-nav stays horizontal |
| tablet | 768px | 3-up cards collapse to 2-up; primary nav becomes hamburger |
| mobile | 480px | Single-column; footer columns collapse to accordion |
| mobile-narrow | 320px | Hero display-xl scales 48px → 32px |