enterprise · sans · tech · dense · dark · square · technical
NVIDIA
Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square.
By webdesignhot · www.nvidia.com
$ npx design-md add nvidia
Learn more about the CLI → Compare to…
Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
1440 × 900
mobile · 390 × 844
Tokens design.md/v1.5
- bg
#ffffff - bg-hero
#000000 - surface
#ffffff - surface-soft
#f7f7f7 - surface-dark
#000000 - surface-dark-elev
#1a1a1a - text AAA · 21.0
#000000 - text-strong
#000000 - text-body
#1a1a1a - text-muted
#757575 - text-soft
#898989 - text-faint — · 2.4
#a7a7a7 - text-on-dark
#ffffff - text-on-dark-mute
rgba(255,255,255,0.7) - brand — · 2.4
#76b900 - brand-active
#5a8d00 - brand-pale
#bff230 - on-brand
#000000 - border — · 1.6
#cccccc - border-strong AA · 6.5
#5e5e5e - border-soft
#e0e0e0 - link
#0046a4 - link-hover
#0033b8 - scrim
rgba(0,0,0,0.6) - hero-overlay
rgba(0,0,0,0.5) - success
#3f8500 - success-soft
#e8f3d3 - warning
#df6500 - warning-bright
#ef9100 - warning-soft
#feeeb2 - danger
#e52020 - danger-deep
#650b0b - danger-soft
#fce4e4 - accent-purple
#952fc6 - accent-purple-deep
#4d1368 - accent-purple-pale
#f9d4ff
Ship faster than ever.
display-xl "NVIDIA-EMEA" 48px w700 0
Ship faster than ever.
display-lg "NVIDIA-EMEA" 36px w700 0
The quick brown fox jumps over the lazy dog.
heading-xl "NVIDIA-EMEA" 24px w700 0
The quick brown fox jumps over the lazy dog.
heading-lg "NVIDIA-EMEA" 22px w400 0
The quick brown fox jumps over the lazy dog.
heading-md "NVIDIA-EMEA" 20px w700 0
The quick brown fox jumps over the lazy dog.
heading-sm "NVIDIA-EMEA" 18px w700 0
The quick brown fox jumps over the lazy dog.
button-lg "NVIDIA-EMEA" 18px w700 0
The quick brown fox jumps over the lazy dog.
card-title "NVIDIA-EMEA" 17px w700 0
The quick brown fox jumps over the lazy dog.
body-md "NVIDIA-EMEA" 16px w400 0
The quick brown fox jumps over the lazy dog.
body-strong "NVIDIA-EMEA" 16px w700 0
The quick brown fox jumps over the lazy dog.
button-md "NVIDIA-EMEA" 16px w700 0
The quick brown fox jumps over the lazy dog.
body-sm "NVIDIA-EMEA" 15px w400 0
The quick brown fox jumps over the lazy dog.
link-md "NVIDIA-EMEA" 15px w400 0
The quick brown fox jumps over the lazy dog.
button-sm "NVIDIA-EMEA" 14.4px w700 0.144px
OUR DESIGN SYSTEM
caption-md "NVIDIA-EMEA" 14px w700 0
OUR DESIGN SYSTEM
caption-sm "NVIDIA-EMEA" 12px w400 0
OUR DESIGN SYSTEM
caption-xs "NVIDIA-EMEA" 11px w700 0
The quick brown fox jumps over the lazy dog.
utility-xs "NVIDIA-EMEA" 10px w700 0
- step-0 2px
- step-1 4px
- step-2 8px
- step-3 12px
- step-4 16px
- step-5 24px
- step-6 32px
- step-7 64px
- none
0px - xs
1px - sm
2px - full
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Export
4 formats · paste-ready
Tailwind
theme.extend block for tailwind.config.js
CSS variables
:root { --bg, --text, --brand, … } you can paste anywhere
DTCG JSON
W3C Design Tokens Community Group format
Figma Variables
Importable into Figma → Variables → Import
---
name: NVIDIA
tagline: Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square.
author: webdesignhot
source_url: https://www.nvidia.com
spec: design.md/v1.5
quality: curated
featured: false
categories: [media]
tags: [enterprise, sans, tech, dense, dark, square, technical]
preview_swatch: ['#000000', '#76b900', '#ffffff']
related: [tesla, hashicorp, datadog]
description: '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 content arranged on a paper-white grid (`#ffffff`), framed top and bottom by deep-black hero / footer chapters (`#000000`), connected by a single, almost violently saturated **NVIDIA Green** (`#76b900`) that carries every primary CTA, every active state, every link affordance on dark surfaces, and the small decorative corner squares that mark out card containers. Type runs **NVIDIA-EMEA** at weights 400 and 700 across a 17-tier hierarchy from 10px utility through 48px hero. Geometry is hyper-angular: `2px` radius on every interactive element, hairline gray rules on every card border, and a tight 8-px-base spacing rhythm. There is no decorative gradient, no atmospheric mesh, no soft drop shadow — just black, white, gray, and green stacked into a structured editorial grid.'
colors:
bg: '#ffffff' # canvas — paper-white body
bg-hero: '#000000' # surface-dark — hero / footer chapters
surface: '#ffffff' # cards inherit canvas
surface-soft: '#f7f7f7' # breadcrumb strip, sub-nav, comparison panels
surface-dark: '#000000' # primary nav, dark CTA strips
surface-dark-elev: '#1a1a1a' # nested dark panels inside footer
text: '#000000' # ink — headlines and body on canvas
text-strong: '#000000'
text-body: '#1a1a1a' # long-form paragraph where pure black is too heavy
text-muted: '#757575' # mute — metadata, breadcrumb separators
text-soft: '#898989' # stone — least-emphasis, disabled
text-faint: '#a7a7a7' # ash — disabled icon, faint utility
text-on-dark: '#ffffff' # on-dark — primary text on black
text-on-dark-mute: 'rgba(255,255,255,0.7)' # secondary footer link on black
brand: '#76b900' # NVIDIA Green — the entire system's accent
brand-active: '#5a8d00' # primary-dark — pressed state
brand-pale: '#bff230' # accent-green-pale — rare highlight tint
on-brand: '#000000' # black on green — high contrast
border: '#cccccc' # hairline — 1px card border, table rule
border-strong: '#5e5e5e' # hairline-strong — divider on dark surfaces
border-soft: '#e0e0e0' # rare lighter inline divider
link: '#0046a4' # link-blue — the only blue, inline body anchors only
link-hover: '#0033b8'
scrim: 'rgba(0,0,0,0.6)' # modal backdrop on dark hero gradient
hero-overlay: 'rgba(0,0,0,0.5)' # gradient overlay on hero photography
success: '#3f8500' # success-deep — positive confirmation where brand green clashes
success-soft: '#e8f3d3' # pale success surface
warning: '#df6500' # caution callouts, deprecated banners
warning-bright: '#ef9100' # inverse warning on dark canvas
warning-soft: '#feeeb2' # accent-yellow-pale — soft documentation tip
danger: '#e52020' # error — validation, destructive
danger-deep: '#650b0b' # error-deep — pressed error
danger-soft: '#fce4e4'
accent-purple: '#952fc6' # research / scientific computing editorial accent
accent-purple-deep: '#4d1368' # paired dark for purple lockups
accent-purple-pale: '#f9d4ff' # editorial wash background
typography:
display:
family: '"NVIDIA-EMEA", "NVIDIA Sans", Inter, Arial, Helvetica, sans-serif'
weights: [400, 700]
opentype-features: []
body:
family: '"NVIDIA-EMEA", "NVIDIA Sans", Inter, Arial, Helvetica, sans-serif'
weights: [400, 700]
mono:
family: '"NVIDIA Sans Mono", "SF Mono", Menlo, Consolas, monospace'
weights: [400]
scale:
display-xl: { size: 48, weight: 700, lineHeight: 1.25, tracking: '0', family: display }
display-lg: { size: 36, weight: 700, lineHeight: 1.25, tracking: '0', family: display }
heading-xl: { size: 24, weight: 700, lineHeight: 1.25, tracking: '0', family: display }
heading-lg: { size: 22, weight: 400, lineHeight: 1.75, tracking: '0', family: display }
heading-md: { size: 20, weight: 700, lineHeight: 1.25, tracking: '0', family: display }
heading-sm: { size: 18, weight: 700, lineHeight: 1.40, tracking: '0', family: display }
card-title: { size: 17, weight: 700, lineHeight: 1.47, tracking: '0', family: display }
body-md: { size: 16, weight: 400, lineHeight: 1.50, tracking: '0', family: body }
body-strong: { size: 16, weight: 700, lineHeight: 1.50, tracking: '0', family: body }
body-sm: { size: 15, weight: 400, lineHeight: 1.67, tracking: '0', family: body }
button-lg: { size: 18, weight: 700, lineHeight: 1.25, tracking: '0', family: body }
button-md: { size: 16, weight: 700, lineHeight: 1.25, tracking: '0', family: body }
button-sm: { size: 14.4, weight: 700, lineHeight: 1.00, tracking: '0.144px', family: body }
link-md: { size: 15, weight: 400, lineHeight: 1.50, tracking: '0', family: body }
caption-md: { size: 14, weight: 700, lineHeight: 1.43, tracking: '0', family: body, transform: uppercase }
caption-sm: { size: 12, weight: 400, lineHeight: 1.25, tracking: '0', family: body }
caption-xs: { size: 11, weight: 700, lineHeight: 1.00, tracking: '0', family: body }
utility-xs: { size: 10, weight: 700, lineHeight: 1.50, tracking: '0', family: body, transform: uppercase }
radius:
none: 0 # hero chapters, footer, dark CTA strips, primary nav
xs: 1 # decorative micro-rules and inset accent strips
sm: 2 # every interactive element — buttons, cards, inputs, pill tabs, badges
full: 9999 # avatar circles, social-icon dots, brand wordmark icon
spacing:
base: 8
scale: [2, 4, 8, 12, 16, 24, 32, 64]
layout:
page-width: 1280
prose-width: 720
header-height: 64
utility-bar-height: 32
hero-padding-vertical: 80
components:
button-primary:
bg: '#76b900'
color: '#000000'
radius: 2
padding: '11px 24px'
height: 44
font: button-md
use: 'Universal NVIDIA CTA — hero CTA, dark CTA strip, "Learn More", "Sign Up", "Get Started".'
button-primary-active:
bg: '#5a8d00'
color: '#000000'
radius: 2
use: 'Pressed state — brand green dropped one notch.'
button-outline:
bg: 'transparent'
color: '#000000'
border: '2px solid #76b900'
radius: 2
padding: '11px 13px'
use: 'Secondary on light canvas — clear pane bordered in NVIDIA Green. "Read the Documentation", "Watch the Video".'
button-outline-on-dark:
bg: 'transparent'
color: '#ffffff'
border: '1px solid #ffffff'
radius: 2
use: 'White-on-black variant in dark hero / footer CTA strips paired with primary green.'
button-ghost-link:
bg: 'transparent'
color: '#76b900'
radius: 0
use: '"Learn More →" affordance with right chevron at the bottom of resource cards and section blocks.'
button-disabled:
bg: '#f7f7f7'
color: '#a7a7a7'
radius: 2
use: 'Disabled — flat soft-gray.'
pill-tab:
bg: 'transparent'
color: '#000000'
radius: 2
padding: '10px 18px'
font: button-sm
use: 'Inactive tab in segmented control filter strip ("Latest in AI Resources").'
pill-tab-active:
bg: '#000000'
color: '#ffffff'
radius: 2
use: 'Active tab — flips fully inverted on selection.'
text-input:
bg: '#ffffff'
color: '#000000'
radius: 2
padding: '12px 16px'
height: 44
border: '1px solid #cccccc'
use: 'Default form field. Hairline border, square-ish corners.'
text-input-focused:
bg: '#ffffff'
color: '#000000'
radius: 2
border: '2px solid #76b900'
use: 'Focused state — border becomes 2px NVIDIA Green. The green border is the only focus signal in the system.'
search-input:
bg: '#ffffff'
color: '#000000'
radius: 2
padding: '10px 16px'
height: 40
use: 'Used in the global search overlay — same chrome as text-input at 40px height with magnifier glyph at left.'
product-card:
bg: '#ffffff'
color: '#000000'
border: '1px solid #cccccc'
radius: 2
padding: '24px'
use: '16:9 product image at top, card-title title, body-sm description, ghost-link "Learn More →" at bottom. Corner-square at top-left.'
feature-card:
bg: '#ffffff'
color: '#000000'
border: '1px solid #cccccc'
radius: 2
padding: '32px'
use: 'Icon at top in NVIDIA Green, heading-md title, body-md body. Used in 3-up or 4-up grids ("Agentic AI", "Inference", "Conversational AI").'
resource-card:
bg: '#ffffff'
color: '#000000'
border: '1px solid #cccccc'
radius: 2
padding: '24px'
use: 'Document-type badge-tag, 3:2 thumbnail, card-title title, body-sm description, ghost-link "Read More →".'
hero-card-dark:
bg: '#000000'
color: '#ffffff'
radius: 0
padding: '80px 48px'
font: display-xl
use: 'Full-bleed 16:9 hero image with dark gradient overlay; copy slot at left. Single primary CTA + optional outline-on-dark.'
cta-strip-dark:
bg: '#000000'
color: '#ffffff'
radius: 0
padding: '64px 48px'
font: heading-xl
use: '"Ready to get started?" bridge band — heading-xl headline + single CTA. Sits between content sections.'
callout-stat:
bg: '#ffffff'
color: '#000000'
border: '1px solid #cccccc'
radius: 2
padding: '32px'
use: 'Massive display-lg numeric in NVIDIA Green ("4× faster training") + body-md caption beneath.'
corner-square:
bg: '#76b900'
color: '#000000'
radius: 0
size: 12
use: '12×12px solid green square anchored to a card corner — the brand''s signature ornamental motif.'
utility-bar:
bg: '#000000'
color: '#ffffff'
radius: 0
height: 32
font: caption-sm
use: 'Right-aligned cluster: locale / Login / Account. Always at top of page.'
primary-nav:
bg: '#000000'
color: '#ffffff'
radius: 0
height: 64
font: body-strong
use: 'NVIDIA wordmark left, centered nav row, right cluster (search + Login + green Get Started CTA).'
breadcrumb-bar:
bg: '#f7f7f7'
color: '#1a1a1a'
radius: 0
height: 48
font: caption-md
use: 'Sits under primary nav on every interior page; chevron separators in mute.'
sub-nav-strip:
bg: '#f7f7f7'
color: '#000000'
radius: 0
height: 56
font: button-md
use: 'Section-specific nav above content (Healthcare → Drug Discovery / Medical Imaging / Genomics).'
badge-tag:
bg: '#f7f7f7'
color: '#1a1a1a'
radius: 2
padding: '4px 10px'
font: caption-md
use: 'Document type / category labels at top of resource cards ("WHITE PAPER", "WEBINAR", "BLOG").'
footer-section:
bg: '#000000'
color: 'rgba(255,255,255,0.7)'
radius: 0
padding: '64px 48px'
use: '6-column link grid + social-icon strip + locale + legal/privacy fine-print row in utility-xs uppercase.'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-out: 'cubic-bezier(0.0, 0, 0.2, 1)'
duration-fast: 100 # button background transitions
duration-standard: 200 # nav drawer slides
duration-slow: 300 # hero fade-ins on scroll
button-hover: 'background swap from #76b900 → slightly brighter / inverse-text contrast hold; 100ms.'
card-hover: 'no transform — corner-square may grow ~1px or hairline border thicken to 2px in 100ms.'
modal-enter: 'scrim fades 200ms + dialog 8px → 0 with ease-emphasized.'
reduced-motion: 'respects prefers-reduced-motion: reduce — sticky nav 5px ambient shadow drops, no transforms.'
breakpoints:
mobile-narrow: 320
mobile: 480
tablet: 768
desktop-small: 1024
desktop: 1280
desktop-large: 1440
ultrawide: 1920
shadows:
none: 'none'
ambient: 'rgba(0,0,0,0.3) 0 0 5px 0' # the only documented shadow — sticky chrome only
ring: '0 0 0 2px #76b900' # focus ring stands in for hairline-strong
hero-overlay: 'inset 0 0 0 100vh rgba(0,0,0,0.5)' # photographic legibility overlay
modal: 'rgba(0,0,0,0.4) 0 16px 32px'
accessibility:
contrast-text-on-bg: 21.0 # #000000 on #ffffff — AAA
contrast-text-on-brand: 8.4 # #000000 on #76b900 — AAA
contrast-muted-on-bg: 4.6 # #757575 on #ffffff — AA
contrast-on-dark: 21.0 # #ffffff on #000000 — AAA
focus-ring: '2px solid #76b900 — the green border that doubles as input-focused signal'
reduced-motion-honored: true
touch-target-min: 44 # button-primary holds 44px height standard
keyboard-nav: 'Utility-bar → primary-nav → breadcrumb → sub-nav → main content → footer columns. Green focus border visible on every focused control.'
dark-mode: optional # The hero / footer chapters are already dark; product surfaces have full Gray-100 dark theme. Marketing body stays light.
---
## 1. Visual Theme & Atmosphere
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 (`#ffffff`), framed top and bottom by deep-black hero / footer chapters (`#000000`). There is exactly one accent colour in the entire system, and it is doing all the work: **NVIDIA Green** (`#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 `2px` radius — barely-there but never zero — giving the system the precise, technical feel of CAD output rather than warm consumer software. Cards sit on plain canvas with a hairline `#cccccc` border (no shadow, no elevation), separated by tight 8-px-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 (data-center hardware, neural-net visualisations, life-sciences microscopy) with a `display-xl` 48px headline laid in white, a single green CTA, and a small green corner square as the only ornamentation. Everything else is subordinate to the imagery and the headline.
There is no atmospheric mesh, no soft gradient, no tinted card background — black, white, gray, and green stacked rigorously. The result is a marketing surface that reads as engineering-grade rather than consumer-friendly, scaling from product cards to massive industry landing pages without ever bending its rules.
**Key Characteristics:**
- Single-accent system: NVIDIA Green carries every CTA, active state, decorative corner square, and the wordmark itself
- Two-mode surface architecture: black hero / footer chapters + paper-white body, alternating in a predictable rhythm
- Hyper-angular geometry: 2px radius on every interactive element. Never 0, never past 4
- NVIDIA-EMEA proprietary sans at weights 400 and 700, scaled across a 17-tier hierarchy from 10px utility through 48px hero
- Card library leans on hairline `#cccccc` borders rather than shadows for separation
- Signature decorative element: 12×12px green corner-square anchored to one corner of resource and feature cards
- Dense multi-column footer with 6 link columns on `#000000` — every page closes with the same global navigation
- Inline body links use `#0046a4` blue — the *only* blue in the system, never on chrome
## 2. Color Palette & Roles
### Primary
- **Canvas** (`#ffffff`): Paper-white body of every page. Cards sit directly on it with hairline rules.
- **Black** (`#000000`): Hero chapter, dark CTA strips, footer, primary nav. The system's "frame" colour.
- **Ink** (`#000000`): Headlines and body text on canvas. Never softened — pure ink is part of the engineering voice.
### Brand & Dark
- **NVIDIA Green** (`#76b900`): The brand. Every primary CTA, every active state, every link on dark surfaces, every corner square, and the wordmark itself.
- **NVIDIA Green Dark** (`#5a8d00`): Pressed state for the primary button — a single notch deeper.
- **Surface Dark** (`#000000`): The "frame" colour for hero and footer.
- **Surface Dark Elev** (`#1a1a1a`): Nested dark panels inside the footer (column dividers, fine-print bar).
### Accent
- **Accent Green Pale** (`#bff230`): Rare highlight tint used in editorial callouts and decorative micro-blocks; never on chrome.
- **Accent Purple** (`#952fc6`): Research / scientific computing editorial accent — appears inside long-form articles, never on chrome.
- **Accent Purple Deep** (`#4d1368`): Paired dark for purple lockups.
- **Accent Purple Pale** (`#f9d4ff`): Wash background for editorial callouts.
- **Warning Soft** (`#feeeb2`): Documentation tip / soft callout fill.
### Interactive
- **Link** (`#0046a4`): Inline body anchor link on light canvas — the only blue in the system, reserved for prose-embedded hyperlinks.
- **Link Hover** (`#0033b8`): Hovered link state.
- **Focus** (`#76b900`): The 2px green border that doubles as input focus signal and button focus ring.
- **Disabled** (`#a7a7a7` text on `#f7f7f7` surface).
### Neutral Scale
- **Ink** (`#000000`) — display headlines, body
- **Body** (`#1a1a1a`) — long-form paragraph text where pure black is too heavy
- **Mute** (`#757575`) — metadata, breadcrumb separators, footer copyright
- **Stone** (`#898989`) — least-emphasis text, disabled state
- **Ash** (`#a7a7a7`) — disabled icon colour, faint utility text
- **On Dark** (`#ffffff`) — primary text on `#000000`
- **On Dark Mute** (`rgba(255,255,255,0.7)`) — secondary footer link text
### Surface & Borders
- **Canvas** (`#ffffff`) — page body
- **Surface Soft** (`#f7f7f7`) — breadcrumb strip, sub-nav, comparison panels, alternating row backgrounds
- **Surface Dark** (`#000000`) — hero, footer, dark CTA, primary nav
- **Surface Dark Elev** (`#1a1a1a`) — nested footer panel
- **Hairline** (`#cccccc`) — 1px card border, table rule, divider between footer link sections
- **Hairline Strong** (`#5e5e5e`) — 1px divider on dark surfaces (footer column rules, dark-mode card edges)
### Shadow Colors
NVIDIA's system has effectively no drop-shadow elevation in card or content surfaces. The only "shadow" is a subtle 5px ambient on sticky chrome bars (`rgba(0,0,0,0.3)`). Cards do not lift; cards are flat rectangles with hairline borders. Modal layers use a `rgba(0,0,0,0.4)` shadow at 16px blur as the only documented multi-layer shadow.
### Semantic
- **Error** (`#e52020` on pale `#fce4e4`) — validation messages, destructive confirmation
- **Error Deep** (`#650b0b`) — pressed state for error buttons
- **Warning** (`#df6500`) — caution callouts, deprecated banners
- **Warning Bright** (`#ef9100`) — inverse warning on dark canvas
- **Success Deep** (`#3f8500`) — positive confirmation where NVIDIA Green's saturation would clash. Never use brand green for success — they read as the same chrome.
## 3. Typography Rules
### Font Family
**Primary**: `NVIDIA-EMEA` — the proprietary brand sans-serif used across every text role on the site. Carries weights 400 (regular) and 700 (bold). Falls back through a long stack: `Inter` → `Arial` → `Helvetica` → `sans-serif`.
**Mono companion**: not surfaced on marketing chrome. Code samples appear inside developer documentation only and use `NVIDIA Sans Mono` / `SF Mono` / `Menlo` system fallbacks.
**Icons**: `Font Awesome 6 Pro` and `Font Awesome 6 Sharp` are used exclusively for iconography (chevrons, social glyphs, breadcrumb separators, search/menu icons) at sizes 14–22px. NVIDIA Green is the icon colour on light surfaces; white on dark.
**OpenType features**: NVIDIA does not aggressively use OpenType features. The face is used as-shipped — no `tnum`, no `ss01`, no decorative alternates. Hierarchy is built from size and weight (400 vs 700) with no italic, no medium weight, no decorative cuts.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|------|------|------|--------|-------------|----------------|-------------|-------|
| display-xl | NVIDIA-EMEA | 48 | 700 | 1.25 | 0 | — | Hero headline on dark hero card |
| display-lg | NVIDIA-EMEA | 36 | 700 | 1.25 | 0 | — | Section headline, large stat callout |
| heading-xl | NVIDIA-EMEA | 24 | 700 | 1.25 | 0 | — | Sub-section title, dark CTA-strip headline |
| heading-lg | NVIDIA-EMEA | 22 | 400 | 1.75 | 0 | — | Long-form intro paragraph that doubles as a heading |
| heading-md | NVIDIA-EMEA | 20 | 700 | 1.25 | 0 | — | Card group title, sub-nav anchor heading |
| heading-sm | NVIDIA-EMEA | 18 | 700 | 1.40 | 0 | — | Side-rail filter group, small section label |
| card-title | NVIDIA-EMEA | 17 | 700 | 1.47 | 0 | — | Resource card title, product card title |
| body-md | NVIDIA-EMEA | 16 | 400 | 1.50 | 0 | — | Body copy, default paragraph |
| body-strong | NVIDIA-EMEA | 16 | 700 | 1.50 | 0 | — | Inline emphasis, primary nav link, label |
| body-sm | NVIDIA-EMEA | 15 | 400 | 1.67 | 0 | — | Card description, secondary copy |
| button-lg | NVIDIA-EMEA | 18 | 700 | 1.25 | 0 | — | Hero primary CTA |
| button-md | NVIDIA-EMEA | 16 | 700 | 1.25 | 0 | — | Standard primary / secondary button |
| button-sm | NVIDIA-EMEA | 14.4 | 700 | 1.00 | 0.144px | — | Compact pill tab, in-card secondary CTA |
| link-md | NVIDIA-EMEA | 15 | 400 | 1.50 | 0 | — | Inline anchor link in body prose |
| caption-md | NVIDIA-EMEA | 14 | 700 | 1.43 | 0 | uppercase | Eyebrow over section heading, breadcrumb |
| caption-sm | NVIDIA-EMEA | 12 | 400 | 1.25 | 0 | — | Footnote copy, metadata, table caption |
| caption-xs | NVIDIA-EMEA | 11 | 700 | 1.00 | 0 | — | Pill chip label, utility-bar text |
| utility-xs | NVIDIA-EMEA | 10 | 700 | 1.50 | 0 | uppercase | Legal fine-print bar at the very bottom |
### Principles
- **Brand-locked face.** NVIDIA-EMEA at every level — no serif, no display variant, no mono, no italic. This is the engineering-grade discipline.
- **Hierarchy by weight + size, never by colour.** Body stays `#000000` or `#1a1a1a` regardless of context. Colour is reserved for emphasis (NVIDIA Green on links over dark surfaces, link-blue inline).
- **Two weights only.** 400 (regular) and 700 (bold). The system rejects medium / semibold weights entirely — the contrast between 400 and 700 is what carries hierarchy at body sizes.
- **Tight line-heights at display, generous at body.** 1.25 at display-xl through heading-md, 1.50 at body, 1.67 at body-sm. Proportional to size with one exception: heading-lg sits at 1.75 because it doubles as long-form intro paragraph.
- **Uppercase only on caption-md / utility-xs.** The eyebrow (caption-md) and legal fine-print (utility-xs) are uppercase; everything else is sentence case. NVIDIA does not use all-caps on body, headlines, or button labels.
- **Inter is the closest open-source substitute** for NVIDIA-EMEA. Weights 400 / 700 only; the metric difference at body sizes is ~2%. Avoid Helvetica Now or Helvetica Neue substitutes — their slightly tighter cap heights drift away from the brand's geometry.
## 4. Component Stylings
### Buttons
**`button-primary`** — The universal NVIDIA CTA. Background `#76b900`, text `#000000`, type `button-md` (16/700), padding `11px 24px`, height 44px, radius 2px. The single most-repeated component in the system: hero CTA, dark CTA strip, "Learn More" on every card group, "Sign Up" / "Get Started" on every long-form page bottom. Pressed flips to `#5a8d00`. Black-on-green is the high-contrast pairing — green-on-white would clash with photo content.
**`button-outline`** — Secondary on light canvas. Background transparent, text `#000000`, 2px solid `#76b900` border, type `button-md`, padding `11px 13px`, radius 2px. The system's distinctive secondary CTA: a clear pane bordered in NVIDIA Green. Used for "Read the Documentation", "Watch the Video", "Compare Products" — second-tier actions that still earn the brand color.
**`button-outline-on-dark`** — White-on-black variant. Background transparent, text `#ffffff`, 1px solid `#ffffff`, radius 2px. Used in dark hero / footer CTA strips paired with a primary green button.
**`button-ghost-link`** — Inline arrow link. Text `#76b900` with a small right-arrow icon, type `button-md`, no background, no border, radius 0. "Learn More →" affordance sitting at the bottom of resource cards and section blocks.
**`button-disabled`** — Background `#f7f7f7`, text `#a7a7a7`, radius 2px — flat soft-gray. No interaction.
### Tabs & Chips
**`pill-tab`** + **`pill-tab-active`** — Default: transparent background, text `#000000`, type `button-sm`, padding `10px 18px`, radius 2px. Active: background `#000000`, text `#ffffff` — the tab flips inverted on selection. Used in the "Latest in AI Resources" filter strip and similar segmented controls.
**`badge-tag`** — Background `#f7f7f7`, text `#1a1a1a`, type `caption-md` (14/700/uppercase), padding `4px 10px`, radius 2px. Document-type / category labels at the top of resource cards ("WHITE PAPER", "WEBINAR", "BLOG").
### Cards
**`product-card`** — Container: `#ffffff` background, 1px solid `#cccccc`, padding 24px, radius 2px. Layout: 16:9 product image at top, `card-title` title, `body-sm` description, `button-ghost-link` "Learn More →" affordance at bottom. The signature `corner-square` (12px green) sits at the top-left.
**`feature-card`** — Container: `#ffffff` background, 1px hairline, padding 32px, radius 2px. Layout: icon (Font Awesome 22–24px) at top in NVIDIA Green, `heading-md` title, `body-md` body. Used in 3-up or 4-up grids that explain product capabilities ("Agentic AI", "Data Science", "Inference", "Conversational AI").
**`resource-card`** — Container: `#ffffff` background, 1px hairline, padding 24px, radius 2px. Header strip: `badge-tag` document-type label. Body: 3:2 thumbnail, `card-title` title, `body-sm` description. Footer: ghost-link "Read More →" with right-pointing chevron in NVIDIA Green.
**`callout-stat`** — Background `#ffffff` with 1px hairline, padding 32px, radius 2px. Massive `display-lg` (36px) numeric in NVIDIA Green followed by `body-md` caption underneath ("4× faster training", "60% lower cost", etc.). Used inside long-form industry pages.
### Hero & CTA Strips
**`hero-card-dark`** — Background `#000000` with full-bleed 16:9 photographic / 3D image and dark gradient overlay (`rgba(0,0,0,0.5)`); copy slot at left third. `display-xl` headline in `#ffffff`, `heading-lg` subhead, single `button-primary` CTA (sometimes paired with `button-outline-on-dark`). Anchors the top of every primary landing page.
**`cta-strip-dark`** — Same dark surface compressed to a 1-row band with `heading-xl` headline + single CTA. Sits between content sections as a "Ready to get started?" bridge. Padding `64px 48px`, radius 0.
### Decorative
**`corner-square`** — 12×12px solid `#76b900` square anchored to a card corner. The brand's signature ornamental motif. Used on resource cards, feature cards, and editorial callouts. Position varies (top-left, bottom-right) but the size and colour are constant. On hero callouts the square scales to 16×16px; on small cards it stays at 12×12px.
### Inputs / Forms
**`text-input`** + **`text-input-focused`** — Default: `#ffffff` background, `#000000` text, 1px solid `#cccccc`, type `body-md`, padding `12px 16px`, height 44px, radius 2px. Focused: same surface, border becomes 2px solid `#76b900` — the green border is the only focus signal in the system. No glow, no shadow, no inset ring.
**`search-input`** — Used in the global search overlay. Same chrome as `text-input` at 40px height with a magnifier glyph at left.
### Navigation
**`utility-bar`** — Background `#000000`, text `#ffffff`, height 32px, type `caption-sm`, radius 0. Right-aligned cluster: locale selector / "Login" / "Account". Always present at the very top of the page.
**`primary-nav`** — Background `#000000`, text `#ffffff`, height 64px, type `body-strong`, radius 0. Layout: NVIDIA wordmark at left, centered nav row ("Products / Solutions / Industries / Resources / Support / Company"), right cluster (search-glyph + "Login" button + green CTA "Get Started").
**`breadcrumb-bar`** — Background `#f7f7f7`, text `#1a1a1a`, height 48px, type `caption-md` (uppercase). Sits directly under the primary nav on every interior page; chevron separators in mute (`#757575`).
**`sub-nav-strip`** — Background `#f7f7f7`, text `#000000`, height 56px, type `button-md`, radius 0. Section-specific nav anchored above content (Healthcare → Drug Discovery / Medical Imaging / Genomics / Patient Care).
**Mobile**: hamburger menu icon left, NVIDIA wordmark center, search + locale icons right. Primary nav collapses into a full-screen drawer that slides in from the right.
### Footer
**`footer-section`** — Background `#000000`, text `rgba(255,255,255,0.7)`, padding `64px 48px`, radius 0. Layout: 6-column link grid (Products / Software / Resources / Company Info / Solutions / Support) with column headers in `body-strong` `#ffffff` and link lists in `body-sm` muted. Below the columns: social-icon strip + locale selector + legal/privacy fine-print row in `utility-xs` (uppercase) muted.
### Inline
**`link-inline`** — Body-prose anchor link: `#0046a4` text with underline. The ONLY blue in the system — appears nowhere except inline links inside `body-md` paragraphs.
## 5. Layout Principles
### Spacing System
- **Base unit**: 8px
- **Scale**: `2 · 4 · 8 · 12 · 16 · 24 · 32 · 64`
- Section rhythm: every page uses `64px` as the vertical gap between major content blocks. Card grids use 24px gutters; in-card padding sits at 24–32px depending on density.
- Hero chapter padding: `80px` vertical / `48px` horizontal — the largest spacing in the system, reserved for `hero-card-dark`.
- Button padding: `11px 24px` for primary, `11px 13px` for outline.
### Grid & Container
- Max content width: ~1280px at desktop, with 24px gutters that grow to ~48px at ultrawide.
- Card grids: 4-up at desktop, 3-up at 1024px, 2-up at 768px, 1-up at 480px.
- Long-form text: 2-column 60/40 split (body + sidebar) at desktop, single-column at < 960px.
- Footer: 6-up link columns at desktop, collapsing to 2-up on tablet, full accordion on mobile.
- Card aspect: product cards lean to 1:1 or 4:3 with 16:9 imagery on top + 1–2 lines of metadata below. Resource cards are 3:2 imagery with a longer description block.
### Whitespace Philosophy
Whitespace is **structural, not atmospheric**. Sections butt against each other with `64px` rhythm — no decorative dividers, no empty "breathing room" bands, no gradient transitions between sections. The sense of air comes from canvas body sections sandwiched between dark chapter blocks, not from generous padding inside any one component.
### Section Cadence
Black hero → white body → black CTA strip → white body → black footer. The system alternates dark and light in a predictable rhythm, with each transition an abrupt edge — no fade, no gradient, no bridging band. The rhythm itself is the brand.
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|------|-------|-----|
| None | 0px | Hero chapter, footer, dark CTA strips, primary nav |
| Micro | 1px | Decorative micro-rules and inset accent strips |
| Standard | 2px | Every interactive element — buttons, cards, inputs, pill tabs, badges |
| Pill | 9999px / 50% | Avatar circles, social-icon dots, brand wordmark icon |
The system is aggressively angular. Outside of avatar / icon circles, no element exceeds 2px radius. The 2px is enough to soften optical aliasing on a sharp edge but small enough that the system reads as engineering-grade. There are no compound radii.
## 7. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | No border, no shadow | Canvas-on-canvas blocks, hero chapter content, footer column body |
| 1 — Hairline | 1px solid `#cccccc` | All cards on canvas, table cells, comparison panels |
| 2 — Hairline strong | 1px solid `#5e5e5e` | Dividers on `#000000` (footer column rules, dark-card edges) |
| 3 — Soft shadow | `0 0 5px 0 rgba(0,0,0,0.3)` | Sticky nav bottom edge when scrolled, sticky CTA bar — used very sparingly |
| 4 — Modal | `rgba(0,0,0,0.4) 0 16px 32px` over `rgba(0,0,0,0.6)` scrim | Centered dialogs (search overlay, locale picker) |
### Shadow Philosophy
NVIDIA's system has effectively no drop-shadow elevation in card or content surfaces. The only "shadow" in the extracted tokens is a subtle 5px ambient on sticky chrome bars. Cards do not lift; cards are flat rectangles with hairline borders. Depth in NVIDIA's system comes from photography and 3D-rendered hero imagery rather than from CSS effects: full-bleed photographic or rendered scenes (data-center hardware, neural-net visualisations, life-sciences microscopy) sit behind hero copy with a dark gradient overlay for legibility.
### Decorative Depth
- **Hero imagery** carries cinematic depth through composition.
- **Decorative corner squares** — the 12×12px green square anchored to one corner of resource and feature cards is the system's only consistent ornamental device.
- **Editorial 3D accents** — isometric or wireframe renderings appear as illustration-style fills inside long-form articles, never as chrome.
## 8. Interaction & Motion
### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover swaps, hairline transitions, surface tone shifts.
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry, drawer slides.
- **Out**: `cubic-bezier(0.0, 0, 0.2, 1)` — element exits viewport.
### Durations
| Bucket | Value | Use |
|--------|-------|-----|
| Fast | 100ms | Button background swap, hairline transition, chevron rotation |
| Standard | 200ms | Modal scrim fade, drawer slide |
| Slow | 300ms | Hero fade-in on scroll-into-view |
### Per-Component Micro-States
- **Button hover**: subtle background brightening only, no transform. Outline buttons may transition border thickness 2px → 3px but more often hold steady.
- **Card hover**: no transform, no shadow intensify. The corner-square may grow ~1px or the hairline border may subtly thicken.
- **Input focus**: 1px `#cccccc` border transitions to 2px `#76b900` in 100ms.
- **Tab selection**: background flips from transparent to `#000000` instantly, text colour from `#000000` to `#ffffff`. No transition timing — selection is decisive.
- **Modal enter**: scrim fades in over 200ms (ease-standard) + dialog slides 8px → 0 with `ease-emphasized`.
### Page Transitions
NVIDIA does not ship animated page transitions. Pages load instantly with no fade-in, no slide-in chrome. The only persistent motion across navigation is the sticky nav's 5px ambient shadow that appears once the user scrolls past the hero — it materializes via a 200ms opacity fade.
### Reduced Motion
`prefers-reduced-motion: reduce` is honored. The 5px ambient shadow on sticky chrome holds; transforms (modal slide, drawer slide, corner-square hover grow) are suppressed. Background colour swaps are essential to interaction feedback and remain.
## 9. Accessibility & A11y
### Contrast Pairs
- **Text on canvas**: `#000000` on `#ffffff` — 21.0:1 (AAA)
- **Text on brand**: `#000000` on `#76b900` — 8.4:1 (AAA at body, AAA at large)
- **On-dark text**: `#ffffff` on `#000000` — 21.0:1 (AAA)
- **On-dark muted**: `rgba(255,255,255,0.7)` on `#000000` — ~10:1 (AAA)
- **Muted on canvas**: `#757575` on `#ffffff` — 4.6:1 (AA)
- **Link on canvas**: `#0046a4` on `#ffffff` — 8.6:1 (AAA)
### Focus Indicators
The 2px solid `#76b900` border that signals input focus also doubles as the focus ring for buttons (offset 2px). Focus is unmistakable: the green border on either an input or a button is the single visual signal.
### ARIA Patterns
- **Dialogs**: `role="dialog"` with `aria-modal="true"`, focus trap, `aria-labelledby` on the dialog title.
- **Tabs**: `role="tablist"` / `role="tab"` / `role="tabpanel"` with arrow-key navigation. `aria-selected="true"` on the active tab.
- **Combobox / search**: `role="combobox"` with `aria-expanded` and `aria-controls` on the search input.
- **Disclosure**: `aria-expanded` on the trigger, `aria-controls` pointing to the content panel.
### Keyboard Navigation
Tab order: utility-bar → primary-nav (logomark, nav categories, search, login, Get Started CTA) → breadcrumb → sub-nav → main content (hero CTA → feature cards in row order) → footer columns. Skip link to `#main-content` is the first focusable element.
### Screen Reader Hints
NVIDIA prefers visible, self-describing labels over `aria-label`. Decorative SVGs (corner-squares, divider rules) receive `aria-hidden="true"`. Icon-only buttons (search, social) carry `aria-label` matching their tooltip.
### Reduced Motion
`prefers-reduced-motion: reduce` is honored. All transform-based motion suppressed; opacity transitions hold (sticky nav shadow fade-in, modal scrim fade) because they don't constitute motion that triggers vestibular reactions.
## 10. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| ultrawide | 1920+ | Content max-width holds at 1280px; outer gutters grow to ~80px |
| desktop-large | 1440 | Default desktop layout — 4-up card grid, 6-col footer |
| desktop | 1280 | Same as large with slightly narrower outer gutters |
| desktop-small | 1024 | 4-up cards collapse to 3-up; sub-nav remains horizontal |
| tablet | 768 | 3-up cards collapse to 2-up; primary nav becomes hamburger drawer |
| mobile | 480 | Single-column everything; footer columns collapse to accordion |
| mobile-narrow | 320 | Hero `display-xl` scales from 48px → 32px |
### Touch Targets
All interactive elements meet WCAG AA (≥ 44×44px). `button-primary` sits at 44px height with 24px horizontal padding. `text-input` sits at 44px. `pill-tab` sits at ~40px with extended hit-target padding to 44px. Footer links are 18–20px line-height with 8–12px vertical padding to keep tap targets at ~36–44px.
### Collapsing Strategy
- **Primary nav**: desktop centered nav row → tablet hamburger drawer at 768px.
- **Card grid**: 4-up → 3-up → 2-up → 1-up at 1024 / 768 / 480px; gutters drop from 24px to 16px on mobile.
- **Footer**: 6-up link columns → 2-up at tablet → full accordion at mobile (each column header becomes tap-to-expand).
- **Hero copy**: desktop `display-xl` (48px) → tablet 36px → mobile 32px; line-height holds at 1.25.
- **Sub-nav strip**: desktop horizontal anchor row → tablet horizontal scroll → mobile collapses into a select dropdown.
- **Section padding**: 64px desktop → 48px tablet → 32px mobile.
- **Long-form text**: desktop 60/40 body+sidebar → tablet/mobile single-column with sidebar pushed below.
### Image Behavior
- Hero imagery uses art-direction crops: 16:9 wide hero on desktop swaps to 4:5 portrait on mobile so the subject stays centered and headline overlay space holds.
- Card imagery is fixed-aspect (16:9 for resource, 1:1 for product, 3:2 for editorial) that scales rather than re-crops between breakpoints.
- All non-critical imagery is lazy-loaded as the user scrolls into the next grid row.
## 11. Content & Voice
### Tone
NVIDIA's marketing voice is **technical, precise, and confidently dense** — never breathless, never playful. Headlines lean factual ("AI Computing for the Endeavors of Humanity", "Drive Discovery with Accelerated Computing") rather than aspirational metaphor. The voice borrows from research-paper abstracts: noun-dense, active-verbed, jargon used precisely where the audience expects it.
### Microcopy Patterns
- **Button verbs**: "Get Started", "Learn More", "Read the Documentation", "Watch the Video", "Compare Products", "Sign Up". Action-first, title case.
- **Error messages**: stated plainly with technical specificity. "Connection timed out. Retry in 5 seconds." NVIDIA writes errors like an engineer logs them.
- **Success confirmations**: brief and factual. "Subscription confirmed."
- **Loading states**: a thin progress indicator with optional `body-sm` muted text ("Loading..."). No skeleton screens on marketing.
### Empty States
NVIDIA's marketing surfaces are densely populated. Where empty states appear (resource search results), the copy is direct: "No results match your filters." A `button-outline` "Clear Filters" appears below in NVIDIA Green border.
### CTA Verb Conventions
- "Get Started" — the universal sign-up phrasing across product pages.
- "Learn More" — the standard tertiary affordance with a `→` chevron. Always title case.
- "Read the Documentation" — preferred over "View Docs" — engineering-grade phrasing.
- "Watch the Video" — preferred over "Watch Now" — technical precision over urgency.
- "Sign Up" — used for newsletter and developer-program enrollment.
- "Contact Sales" — enterprise lead-gen; never "Request a Demo".
The system rejects "Click here", "Try it now", "Buy today" — those phrasings read as marketing-by-default rather than NVIDIA's voice.
## 12. Dark Mode & Theming
NVIDIA's marketing system **already includes dark surfaces** as a structural element — the hero / footer chapters are `#000000` regardless of any user theme preference. The body content, however, is light-only on the public marketing site. There is no documented marketing dark-mode toggle that inverts the entire page; the alternation is editorial, not user-controlled.
NVIDIA's product surfaces (NGC, developer portal, GeForce Now) ship a full Gray-100 dark theme — the inverse token map matches what's already present in the hero and footer:
- `bg`: `#ffffff` → `#000000`
- `surface-soft`: `#f7f7f7` → `#1a1a1a`
- `text`: `#000000` → `#ffffff`
- `text-body`: `#1a1a1a` → `rgba(255,255,255,0.9)`
- `text-muted`: `#757575` → `rgba(255,255,255,0.7)`
- `border`: `#cccccc` → `#5e5e5e` (hairline-strong)
- `brand`: `#76b900` → `#76b900` (NVIDIA Green is constant — high contrast on both light and dark)
- `link`: `#0046a4` → `#76b900` (links flip to brand green on dark, since blue underperforms on black)
The corner-square stays NVIDIA Green at all times — it is the constant signature.
## 13. Lineage & Influences
NVIDIA's design lineage runs through three eras of GPU industry maturation:
**1993–2005: GeForce gamer era.** Early NVIDIA branding leaned on bold, neon-tinged gamer aesthetics — chromed wordmarks, lens flares, gradient backgrounds. The current marketing system rejects every visual decision from this era except the green wordmark colour itself.
**2005–2018: Datacenter / CUDA era.** As NVIDIA pivoted from gaming to general-purpose GPU compute (CUDA, 2007), the brand voice tightened toward enterprise restraint. The marketing site became denser, more technical, less consumer. The black hero / white body alternation took root in this era.
**2018–today: AI / accelerated-computing era.** The current marketing system codifies the engineering-documentation aesthetic — minimal chrome, hairline-bordered cards, single-accent green, and the corner-square as the lone ornament. This is the system the spec captures.
**Influences absorbed:**
- **Swiss / International Typographic Style** — the grid discipline and hierarchy-by-weight that makes NVIDIA's marketing read as engineering-grade rather than consumer-friendly.
- **Bauhaus / Dieter Rams** — function-over-ornament, the "less but better" rule that justifies the corner-square as the system's only decorative motif.
- **CAD / engineering documentation** — the 2px radius, hairline borders, and dense multi-column layouts borrow directly from engineering-drawing conventions.
- **IBM Carbon** — peer enterprise design system; NVIDIA shares Carbon's restraint but reaches further into 2px-radius angularity (Carbon stays at 0px, NVIDIA at 2px — the contrast is real).
**What it rejects:**
- Pill-shaped buttons (consumer SaaS aesthetic).
- Atmospheric depth (no gradient backdrops, no decorative meshes).
- Multi-color accent systems (NVIDIA Green is the only chromatic accent on chrome).
- Decorative animation (no parallax, no scroll-triggered scale, no auto-playing video on hover).
**Named contemporaries:**
- [Tesla](https://www.tesla.com) — peer engineering-grade brand with heavier typographic discipline and similar dark-hero rhythm.
- [HashiCorp](https://www.hashicorp.com) — peer enterprise system with similar restraint, more rounded corners.
- [IBM Carbon](https://carbondesignsystem.com) — peer enterprise design system; pioneer of the open-source-system-as-marketing-chrome approach.
## 14. Do's and Don'ts
### Do
- Reserve `#76b900` NVIDIA Green for primary CTAs, active states, decorative corner squares, and the wordmark itself. Treat it as a precious resource.
- Stack hero / footer chapters in `#000000` and body sections in `#ffffff` — alternate them in a predictable rhythm down the page.
- Anchor a 12×12px green corner-square to one corner of every reusable card. It is the system's identity tag.
- Use 2px radius on every interactive element. Never go to 0, never go past 4.
- Build hierarchy from font weight (400 vs 700) and size, not from color tinting. Body text stays `#000000` or `#1a1a1a` regardless of context.
- Stack content sections at 64px rhythm with no decorative dividers between them.
- Pair `button-primary` (green fill) with `button-outline` (green border) for primary + secondary action pairs.
- Use the dark hero / dark CTA strip as the system's "headline moment" — a single full-bleed photographic / 3D image with one green CTA.
### Don't
- Don't introduce drop shadows on cards or content surfaces. The only allowed shadow is the 5px ambient on sticky chrome.
- Don't substitute `success-deep`, `accent-green-pale`, or any other green for `#76b900` in CTAs. The brand green is precise.
- Don't use `#0046a4` link-blue outside of inline body-prose links. It is not a button colour, not a chrome colour.
- Don't soften the geometry. No pill buttons, no rounded cards, no `lg`+ radius anywhere except avatars and social icons.
- Don't pad the dark hero card symmetrically. Copy hugs the left third; imagery fills the right.
- Don't add a second accent colour for variety. The system is intentionally one-colour on chrome.
- Don't put `button-primary` (green fill) on `#ffffff` backgrounds where green-on-white would clash with photo content — use `button-outline` instead and reserve fill for dark surfaces.
- Don't use medium / semibold weights. The system is 400 / 700 only.
## 15. Agent Prompt Guide
### Quick Color Reference
- Canvas: `#ffffff`
- Hero / Footer: `#000000`
- Surface Soft: `#f7f7f7`
- Ink: `#000000`
- Body: `#1a1a1a`
- Mute: `#757575`
- NVIDIA Green: `#76b900`
- NVIDIA Green Active: `#5a8d00`
- Hairline: `#cccccc`
- Link Blue (inline only): `#0046a4`
### Example Component Prompts
- "Create a dark hero: full-bleed black `#000000` background with a 16:9 photograph (data-center hardware) and a `rgba(0,0,0,0.5)` gradient overlay. Display headline at 48px NVIDIA-EMEA / 700 in `#ffffff`, subhead in 22px / 400. A single green `#76b900` button with black text, 2px radius, 11×24px padding, height 44px. Optional outline-on-dark secondary button beside it with 1px white border. Padding `80px` vertical, `48px` horizontal."
- "Design a feature card: white `#ffffff` background, 1px `#cccccc` hairline border, square 2px corners, 32px padding. Icon at the top in NVIDIA Green at 22-24px, then a 20px / 700 heading, then 16px / 400 body. Anchor a 12×12px solid `#76b900` corner-square at the top-left of the card."
- "Build a resource-card: white background, 1px hairline, 2px radius, 24px padding. At the top: an uppercase 14px / 700 'WHITE PAPER' badge-tag pill on `#f7f7f7`. Then a 3:2 thumbnail. Then a 17px / 700 card-title. Then a 15px / 400 body-sm description. Then a green ghost-link 'Read More →' at the bottom. Green corner-square top-left."
- "Create a callout-stat: 1px hairline white card, 32px padding, 2px radius. Massive 36px NVIDIA-EMEA / 700 numeric in `#76b900` ('4× faster training'), then 16px / 400 caption beneath."
- "Design a primary nav: full-bleed `#000000` background, 64px height. NVIDIA wordmark left, centered nav row with 'Products / Solutions / Industries / Resources / Support / Company' in 16px / 700 white. Right cluster: search-glyph + 'Login' button + green CTA 'Get Started' (button-primary)."
- "Build a footer: full-bleed `#000000` background, 64×48px padding. 6-column link grid with column heads in 16px / 700 white and link lists in 15px / 400 `rgba(255,255,255,0.7)`. Below: social-icon strip + locale selector + legal/privacy fine-print row in 10px / 700 uppercase muted."
### Iteration Guide
1. **Audit corners.** Every interactive surface should be 2px. If you see 0px (drift toward IBM) or 8px+ (drift toward Pinterest), bring it back to 2px.
2. **Audit green discipline.** NVIDIA Green appears only on: primary CTA fill, outline button border, active tab background-text-flip, corner-square, link colour on dark surfaces, focused input border, brand wordmark. Anywhere else is drift.
3. **Audit weight binary.** Only weight 400 and 700 — no 500, no 600. Carbon-style emphasis happens via 16/700 body-strong, not via medium weight.
4. **Audit shadow restraint.** Strip every box-shadow except the 5px sticky-chrome ambient and the 16px modal lift. Cards are flat with hairline borders.
5. **Audit corner-squares.** Every reusable card type (product, feature, resource, callout-stat) should carry a 12×12px green corner-square at one corner. Without it, the card reads as generic.
6. **Audit dark-light rhythm.** Hero black → body white → CTA-strip black → body white → footer black. The alternation is the brand. If you see a tinted body band (gray, blue, beige), flatten it to `#ffffff`.
7. **Audit body tracking.** NVIDIA does not use letter-spacing on body — it's `0`. Only `caption-md` and `utility-xs` carry uppercase + tracking, and only at small sizes.
8. **Honor the link colour.** Inline body links are `#0046a4` blue with underline. Anywhere else is wrong — there is no other blue in the system.
1. Visual Theme & Atmosphere
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 (#ffffff), framed top and bottom by deep-black hero / footer chapters (#000000). There is exactly one accent colour in the entire system, and it is doing all the work: NVIDIA Green (#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 2px radius — barely-there but never zero — giving the system the precise, technical feel of CAD output rather than warm consumer software. Cards sit on plain canvas with a hairline #cccccc border (no shadow, no elevation), separated by tight 8-px-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 (data-center hardware, neural-net visualisations, life-sciences microscopy) with a display-xl 48px headline laid in white, a single green CTA, and a small green corner square as the only ornamentation. Everything else is subordinate to the imagery and the headline.
There is no atmospheric mesh, no soft gradient, no tinted card background — black, white, gray, and green stacked rigorously. The result is a marketing surface that reads as engineering-grade rather than consumer-friendly, scaling from product cards to massive industry landing pages without ever bending its rules.
Key Characteristics:
- Single-accent system: NVIDIA Green carries every CTA, active state, decorative corner square, and the wordmark itself
- Two-mode surface architecture: black hero / footer chapters + paper-white body, alternating in a predictable rhythm
- Hyper-angular geometry: 2px radius on every interactive element. Never 0, never past 4
- NVIDIA-EMEA proprietary sans at weights 400 and 700, scaled across a 17-tier hierarchy from 10px utility through 48px hero
- Card library leans on hairline
#ccccccborders rather than shadows for separation - Signature decorative element: 12×12px green corner-square anchored to one corner of resource and feature cards
- Dense multi-column footer with 6 link columns on
#000000— every page closes with the same global navigation - Inline body links use
#0046a4blue — the only blue in the system, never on chrome
2. Color Palette & Roles
Primary
- Canvas (
#ffffff): Paper-white body of every page. Cards sit directly on it with hairline rules. - Black (
#000000): Hero chapter, dark CTA strips, footer, primary nav. The system’s “frame” colour. - Ink (
#000000): Headlines and body text on canvas. Never softened — pure ink is part of the engineering voice.
Brand & Dark
- NVIDIA Green (
#76b900): The brand. Every primary CTA, every active state, every link on dark surfaces, every corner square, and the wordmark itself. - NVIDIA Green Dark (
#5a8d00): Pressed state for the primary button — a single notch deeper. - Surface Dark (
#000000): The “frame” colour for hero and footer. - Surface Dark Elev (
#1a1a1a): Nested dark panels inside the footer (column dividers, fine-print bar).
Accent
- Accent Green Pale (
#bff230): Rare highlight tint used in editorial callouts and decorative micro-blocks; never on chrome. - Accent Purple (
#952fc6): Research / scientific computing editorial accent — appears inside long-form articles, never on chrome. - Accent Purple Deep (
#4d1368): Paired dark for purple lockups. - Accent Purple Pale (
#f9d4ff): Wash background for editorial callouts. - Warning Soft (
#feeeb2): Documentation tip / soft callout fill.
Interactive
- Link (
#0046a4): Inline body anchor link on light canvas — the only blue in the system, reserved for prose-embedded hyperlinks. - Link Hover (
#0033b8): Hovered link state. - Focus (
#76b900): The 2px green border that doubles as input focus signal and button focus ring. - Disabled (
#a7a7a7text on#f7f7f7surface).
Neutral Scale
- Ink (
#000000) — display headlines, body - Body (
#1a1a1a) — long-form paragraph text where pure black is too heavy - Mute (
#757575) — metadata, breadcrumb separators, footer copyright - Stone (
#898989) — least-emphasis text, disabled state - Ash (
#a7a7a7) — disabled icon colour, faint utility text - On Dark (
#ffffff) — primary text on#000000 - On Dark Mute (
rgba(255,255,255,0.7)) — secondary footer link text
Surface & Borders
- Canvas (
#ffffff) — page body - Surface Soft (
#f7f7f7) — breadcrumb strip, sub-nav, comparison panels, alternating row backgrounds - Surface Dark (
#000000) — hero, footer, dark CTA, primary nav - Surface Dark Elev (
#1a1a1a) — nested footer panel - Hairline (
#cccccc) — 1px card border, table rule, divider between footer link sections - Hairline Strong (
#5e5e5e) — 1px divider on dark surfaces (footer column rules, dark-mode card edges)
Shadow Colors
NVIDIA’s system has effectively no drop-shadow elevation in card or content surfaces. The only “shadow” is a subtle 5px ambient on sticky chrome bars (rgba(0,0,0,0.3)). Cards do not lift; cards are flat rectangles with hairline borders. Modal layers use a rgba(0,0,0,0.4) shadow at 16px blur as the only documented multi-layer shadow.
Semantic
- Error (
#e52020on pale#fce4e4) — validation messages, destructive confirmation - Error Deep (
#650b0b) — pressed state for error buttons - Warning (
#df6500) — caution callouts, deprecated banners - Warning Bright (
#ef9100) — inverse warning on dark canvas - Success Deep (
#3f8500) — positive confirmation where NVIDIA Green’s saturation would clash. Never use brand green for success — they read as the same chrome.
3. Typography Rules
Font Family
Primary: NVIDIA-EMEA — the proprietary brand sans-serif used across every text role on the site. Carries weights 400 (regular) and 700 (bold). Falls back through a long stack: Inter → Arial → Helvetica → sans-serif.
Mono companion: not surfaced on marketing chrome. Code samples appear inside developer documentation only and use NVIDIA Sans Mono / SF Mono / Menlo system fallbacks.
Icons: Font Awesome 6 Pro and Font Awesome 6 Sharp are used exclusively for iconography (chevrons, social glyphs, breadcrumb separators, search/menu icons) at sizes 14–22px. NVIDIA Green is the icon colour on light surfaces; white on dark.
OpenType features: NVIDIA does not aggressively use OpenType features. The face is used as-shipped — no tnum, no ss01, no decorative alternates. Hierarchy is built from size and weight (400 vs 700) with no italic, no medium weight, no decorative cuts.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-xl | NVIDIA-EMEA | 48 | 700 | 1.25 | 0 | — | Hero headline on dark hero card |
| display-lg | NVIDIA-EMEA | 36 | 700 | 1.25 | 0 | — | Section headline, large stat callout |
| heading-xl | NVIDIA-EMEA | 24 | 700 | 1.25 | 0 | — | Sub-section title, dark CTA-strip headline |
| heading-lg | NVIDIA-EMEA | 22 | 400 | 1.75 | 0 | — | Long-form intro paragraph that doubles as a heading |
| heading-md | NVIDIA-EMEA | 20 | 700 | 1.25 | 0 | — | Card group title, sub-nav anchor heading |
| heading-sm | NVIDIA-EMEA | 18 | 700 | 1.40 | 0 | — | Side-rail filter group, small section label |
| card-title | NVIDIA-EMEA | 17 | 700 | 1.47 | 0 | — | Resource card title, product card title |
| body-md | NVIDIA-EMEA | 16 | 400 | 1.50 | 0 | — | Body copy, default paragraph |
| body-strong | NVIDIA-EMEA | 16 | 700 | 1.50 | 0 | — | Inline emphasis, primary nav link, label |
| body-sm | NVIDIA-EMEA | 15 | 400 | 1.67 | 0 | — | Card description, secondary copy |
| button-lg | NVIDIA-EMEA | 18 | 700 | 1.25 | 0 | — | Hero primary CTA |
| button-md | NVIDIA-EMEA | 16 | 700 | 1.25 | 0 | — | Standard primary / secondary button |
| button-sm | NVIDIA-EMEA | 14.4 | 700 | 1.00 | 0.144px | — | Compact pill tab, in-card secondary CTA |
| link-md | NVIDIA-EMEA | 15 | 400 | 1.50 | 0 | — | Inline anchor link in body prose |
| caption-md | NVIDIA-EMEA | 14 | 700 | 1.43 | 0 | uppercase | Eyebrow over section heading, breadcrumb |
| caption-sm | NVIDIA-EMEA | 12 | 400 | 1.25 | 0 | — | Footnote copy, metadata, table caption |
| caption-xs | NVIDIA-EMEA | 11 | 700 | 1.00 | 0 | — | Pill chip label, utility-bar text |
| utility-xs | NVIDIA-EMEA | 10 | 700 | 1.50 | 0 | uppercase | Legal fine-print bar at the very bottom |
Principles
- Brand-locked face. NVIDIA-EMEA at every level — no serif, no display variant, no mono, no italic. This is the engineering-grade discipline.
- Hierarchy by weight + size, never by colour. Body stays
#000000or#1a1a1aregardless of context. Colour is reserved for emphasis (NVIDIA Green on links over dark surfaces, link-blue inline). - Two weights only. 400 (regular) and 700 (bold). The system rejects medium / semibold weights entirely — the contrast between 400 and 700 is what carries hierarchy at body sizes.
- Tight line-heights at display, generous at body. 1.25 at display-xl through heading-md, 1.50 at body, 1.67 at body-sm. Proportional to size with one exception: heading-lg sits at 1.75 because it doubles as long-form intro paragraph.
- Uppercase only on caption-md / utility-xs. The eyebrow (caption-md) and legal fine-print (utility-xs) are uppercase; everything else is sentence case. NVIDIA does not use all-caps on body, headlines, or button labels.
- Inter is the closest open-source substitute for NVIDIA-EMEA. Weights 400 / 700 only; the metric difference at body sizes is ~2%. Avoid Helvetica Now or Helvetica Neue substitutes — their slightly tighter cap heights drift away from the brand’s geometry.
4. Component Stylings
Buttons
button-primary — The universal NVIDIA CTA. Background #76b900, text #000000, type button-md (16/700), padding 11px 24px, height 44px, radius 2px. The single most-repeated component in the system: hero CTA, dark CTA strip, “Learn More” on every card group, “Sign Up” / “Get Started” on every long-form page bottom. Pressed flips to #5a8d00. Black-on-green is the high-contrast pairing — green-on-white would clash with photo content.
button-outline — Secondary on light canvas. Background transparent, text #000000, 2px solid #76b900 border, type button-md, padding 11px 13px, radius 2px. The system’s distinctive secondary CTA: a clear pane bordered in NVIDIA Green. Used for “Read the Documentation”, “Watch the Video”, “Compare Products” — second-tier actions that still earn the brand color.
button-outline-on-dark — White-on-black variant. Background transparent, text #ffffff, 1px solid #ffffff, radius 2px. Used in dark hero / footer CTA strips paired with a primary green button.
button-ghost-link — Inline arrow link. Text #76b900 with a small right-arrow icon, type button-md, no background, no border, radius 0. “Learn More →” affordance sitting at the bottom of resource cards and section blocks.
button-disabled — Background #f7f7f7, text #a7a7a7, radius 2px — flat soft-gray. No interaction.
Tabs & Chips
pill-tab + pill-tab-active — Default: transparent background, text #000000, type button-sm, padding 10px 18px, radius 2px. Active: background #000000, text #ffffff — the tab flips inverted on selection. Used in the “Latest in AI Resources” filter strip and similar segmented controls.
badge-tag — Background #f7f7f7, text #1a1a1a, type caption-md (14/700/uppercase), padding 4px 10px, radius 2px. Document-type / category labels at the top of resource cards (“WHITE PAPER”, “WEBINAR”, “BLOG”).
Cards
product-card — Container: #ffffff background, 1px solid #cccccc, padding 24px, radius 2px. Layout: 16:9 product image at top, card-title title, body-sm description, button-ghost-link “Learn More →” affordance at bottom. The signature corner-square (12px green) sits at the top-left.
feature-card — Container: #ffffff background, 1px hairline, padding 32px, radius 2px. Layout: icon (Font Awesome 22–24px) at top in NVIDIA Green, heading-md title, body-md body. Used in 3-up or 4-up grids that explain product capabilities (“Agentic AI”, “Data Science”, “Inference”, “Conversational AI”).
resource-card — Container: #ffffff background, 1px hairline, padding 24px, radius 2px. Header strip: badge-tag document-type label. Body: 3:2 thumbnail, card-title title, body-sm description. Footer: ghost-link “Read More →” with right-pointing chevron in NVIDIA Green.
callout-stat — Background #ffffff with 1px hairline, padding 32px, radius 2px. Massive display-lg (36px) numeric in NVIDIA Green followed by body-md caption underneath (“4× faster training”, “60% lower cost”, etc.). Used inside long-form industry pages.
Hero & CTA Strips
hero-card-dark — Background #000000 with full-bleed 16:9 photographic / 3D image and dark gradient overlay (rgba(0,0,0,0.5)); copy slot at left third. display-xl headline in #ffffff, heading-lg subhead, single button-primary CTA (sometimes paired with button-outline-on-dark). Anchors the top of every primary landing page.
cta-strip-dark — Same dark surface compressed to a 1-row band with heading-xl headline + single CTA. Sits between content sections as a “Ready to get started?” bridge. Padding 64px 48px, radius 0.
Decorative
corner-square — 12×12px solid #76b900 square anchored to a card corner. The brand’s signature ornamental motif. Used on resource cards, feature cards, and editorial callouts. Position varies (top-left, bottom-right) but the size and colour are constant. On hero callouts the square scales to 16×16px; on small cards it stays at 12×12px.
Inputs / Forms
text-input + text-input-focused — Default: #ffffff background, #000000 text, 1px solid #cccccc, type body-md, padding 12px 16px, height 44px, radius 2px. Focused: same surface, border becomes 2px solid #76b900 — the green border is the only focus signal in the system. No glow, no shadow, no inset ring.
search-input — Used in the global search overlay. Same chrome as text-input at 40px height with a magnifier glyph at left.
Navigation
utility-bar — Background #000000, text #ffffff, height 32px, type caption-sm, radius 0. Right-aligned cluster: locale selector / “Login” / “Account”. Always present at the very top of the page.
primary-nav — Background #000000, text #ffffff, height 64px, type body-strong, radius 0. Layout: NVIDIA wordmark at left, centered nav row (“Products / Solutions / Industries / Resources / Support / Company”), right cluster (search-glyph + “Login” button + green CTA “Get Started”).
breadcrumb-bar — Background #f7f7f7, text #1a1a1a, height 48px, type caption-md (uppercase). Sits directly under the primary nav on every interior page; chevron separators in mute (#757575).
sub-nav-strip — Background #f7f7f7, text #000000, height 56px, type button-md, radius 0. Section-specific nav anchored above content (Healthcare → Drug Discovery / Medical Imaging / Genomics / Patient Care).
Mobile: hamburger menu icon left, NVIDIA wordmark center, search + locale icons right. Primary nav collapses into a full-screen drawer that slides in from the right.
Footer
footer-section — Background #000000, text rgba(255,255,255,0.7), padding 64px 48px, radius 0. Layout: 6-column link grid (Products / Software / Resources / Company Info / Solutions / Support) with column headers in body-strong #ffffff and link lists in body-sm muted. Below the columns: social-icon strip + locale selector + legal/privacy fine-print row in utility-xs (uppercase) muted.
Inline
link-inline — Body-prose anchor link: #0046a4 text with underline. The ONLY blue in the system — appears nowhere except inline links inside body-md paragraphs.
5. Layout Principles
Spacing System
- Base unit: 8px
- Scale:
2 · 4 · 8 · 12 · 16 · 24 · 32 · 64 - Section rhythm: every page uses
64pxas the vertical gap between major content blocks. Card grids use 24px gutters; in-card padding sits at 24–32px depending on density. - Hero chapter padding:
80pxvertical /48pxhorizontal — the largest spacing in the system, reserved forhero-card-dark. - Button padding:
11px 24pxfor primary,11px 13pxfor outline.
Grid & Container
- Max content width: ~1280px at desktop, with 24px gutters that grow to ~48px at ultrawide.
- Card grids: 4-up at desktop, 3-up at 1024px, 2-up at 768px, 1-up at 480px.
- Long-form text: 2-column 60/40 split (body + sidebar) at desktop, single-column at < 960px.
- Footer: 6-up link columns at desktop, collapsing to 2-up on tablet, full accordion on mobile.
- Card aspect: product cards lean to 1:1 or 4:3 with 16:9 imagery on top + 1–2 lines of metadata below. Resource cards are 3:2 imagery with a longer description block.
Whitespace Philosophy
Whitespace is structural, not atmospheric. Sections butt against each other with 64px rhythm — no decorative dividers, no empty “breathing room” bands, no gradient transitions between sections. The sense of air comes from canvas body sections sandwiched between dark chapter blocks, not from generous padding inside any one component.
Section Cadence
Black hero → white body → black CTA strip → white body → black footer. The system alternates dark and light in a predictable rhythm, with each transition an abrupt edge — no fade, no gradient, no bridging band. The rhythm itself is the brand.
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| None | 0px | Hero chapter, footer, dark CTA strips, primary nav |
| Micro | 1px | Decorative micro-rules and inset accent strips |
| Standard | 2px | Every interactive element — buttons, cards, inputs, pill tabs, badges |
| Pill | 9999px / 50% | Avatar circles, social-icon dots, brand wordmark icon |
The system is aggressively angular. Outside of avatar / icon circles, no element exceeds 2px radius. The 2px is enough to soften optical aliasing on a sharp edge but small enough that the system reads as engineering-grade. There are no compound radii.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | No border, no shadow | Canvas-on-canvas blocks, hero chapter content, footer column body |
| 1 — Hairline | 1px solid #cccccc | All cards on canvas, table cells, comparison panels |
| 2 — Hairline strong | 1px solid #5e5e5e | Dividers on #000000 (footer column rules, dark-card edges) |
| 3 — Soft shadow | 0 0 5px 0 rgba(0,0,0,0.3) | Sticky nav bottom edge when scrolled, sticky CTA bar — used very sparingly |
| 4 — Modal | rgba(0,0,0,0.4) 0 16px 32px over rgba(0,0,0,0.6) scrim | Centered dialogs (search overlay, locale picker) |
Shadow Philosophy
NVIDIA’s system has effectively no drop-shadow elevation in card or content surfaces. The only “shadow” in the extracted tokens is a subtle 5px ambient on sticky chrome bars. Cards do not lift; cards are flat rectangles with hairline borders. Depth in NVIDIA’s system comes from photography and 3D-rendered hero imagery rather than from CSS effects: full-bleed photographic or rendered scenes (data-center hardware, neural-net visualisations, life-sciences microscopy) sit behind hero copy with a dark gradient overlay for legibility.
Decorative Depth
- Hero imagery carries cinematic depth through composition.
- Decorative corner squares — the 12×12px green square anchored to one corner of resource and feature cards is the system’s only consistent ornamental device.
- Editorial 3D accents — isometric or wireframe renderings appear as illustration-style fills inside long-form articles, never as chrome.
8. Interaction & Motion
Easing
- Standard:
cubic-bezier(0.4, 0, 0.2, 1)— default for hover swaps, hairline transitions, surface tone shifts. - Emphasized:
cubic-bezier(0.2, 0, 0, 1)— modal entry, drawer slides. - Out:
cubic-bezier(0.0, 0, 0.2, 1)— element exits viewport.
Durations
| Bucket | Value | Use |
|---|---|---|
| Fast | 100ms | Button background swap, hairline transition, chevron rotation |
| Standard | 200ms | Modal scrim fade, drawer slide |
| Slow | 300ms | Hero fade-in on scroll-into-view |
Per-Component Micro-States
- Button hover: subtle background brightening only, no transform. Outline buttons may transition border thickness 2px → 3px but more often hold steady.
- Card hover: no transform, no shadow intensify. The corner-square may grow ~1px or the hairline border may subtly thicken.
- Input focus: 1px
#ccccccborder transitions to 2px#76b900in 100ms. - Tab selection: background flips from transparent to
#000000instantly, text colour from#000000to#ffffff. No transition timing — selection is decisive. - Modal enter: scrim fades in over 200ms (ease-standard) + dialog slides 8px → 0 with
ease-emphasized.
Page Transitions
NVIDIA does not ship animated page transitions. Pages load instantly with no fade-in, no slide-in chrome. The only persistent motion across navigation is the sticky nav’s 5px ambient shadow that appears once the user scrolls past the hero — it materializes via a 200ms opacity fade.
Reduced Motion
prefers-reduced-motion: reduce is honored. The 5px ambient shadow on sticky chrome holds; transforms (modal slide, drawer slide, corner-square hover grow) are suppressed. Background colour swaps are essential to interaction feedback and remain.
9. Accessibility & A11y
Contrast Pairs
- Text on canvas:
#000000on#ffffff— 21.0:1 (AAA) - Text on brand:
#000000on#76b900— 8.4:1 (AAA at body, AAA at large) - On-dark text:
#ffffffon#000000— 21.0:1 (AAA) - On-dark muted:
rgba(255,255,255,0.7)on#000000— ~10:1 (AAA) - Muted on canvas:
#757575on#ffffff— 4.6:1 (AA) - Link on canvas:
#0046a4on#ffffff— 8.6:1 (AAA)
Focus Indicators
The 2px solid #76b900 border that signals input focus also doubles as the focus ring for buttons (offset 2px). Focus is unmistakable: the green border on either an input or a button is the single visual signal.
ARIA Patterns
- Dialogs:
role="dialog"witharia-modal="true", focus trap,aria-labelledbyon the dialog title. - Tabs:
role="tablist"/role="tab"/role="tabpanel"with arrow-key navigation.aria-selected="true"on the active tab. - Combobox / search:
role="combobox"witharia-expandedandaria-controlson the search input. - Disclosure:
aria-expandedon the trigger,aria-controlspointing to the content panel.
Keyboard Navigation
Tab order: utility-bar → primary-nav (logomark, nav categories, search, login, Get Started CTA) → breadcrumb → sub-nav → main content (hero CTA → feature cards in row order) → footer columns. Skip link to #main-content is the first focusable element.
Screen Reader Hints
NVIDIA prefers visible, self-describing labels over aria-label. Decorative SVGs (corner-squares, divider rules) receive aria-hidden="true". Icon-only buttons (search, social) carry aria-label matching their tooltip.
Reduced Motion
prefers-reduced-motion: reduce is honored. All transform-based motion suppressed; opacity transitions hold (sticky nav shadow fade-in, modal scrim fade) because they don’t constitute motion that triggers vestibular reactions.
10. Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| ultrawide | 1920+ | Content max-width holds at 1280px; outer gutters grow to ~80px |
| desktop-large | 1440 | Default desktop layout — 4-up card grid, 6-col footer |
| desktop | 1280 | Same as large with slightly narrower outer gutters |
| desktop-small | 1024 | 4-up cards collapse to 3-up; sub-nav remains horizontal |
| tablet | 768 | 3-up cards collapse to 2-up; primary nav becomes hamburger drawer |
| mobile | 480 | Single-column everything; footer columns collapse to accordion |
| mobile-narrow | 320 | Hero display-xl scales from 48px → 32px |
Touch Targets
All interactive elements meet WCAG AA (≥ 44×44px). button-primary sits at 44px height with 24px horizontal padding. text-input sits at 44px. pill-tab sits at ~40px with extended hit-target padding to 44px. Footer links are 18–20px line-height with 8–12px vertical padding to keep tap targets at ~36–44px.
Collapsing Strategy
- Primary nav: desktop centered nav row → tablet hamburger drawer at 768px.
- Card grid: 4-up → 3-up → 2-up → 1-up at 1024 / 768 / 480px; gutters drop from 24px to 16px on mobile.
- Footer: 6-up link columns → 2-up at tablet → full accordion at mobile (each column header becomes tap-to-expand).
- Hero copy: desktop
display-xl(48px) → tablet 36px → mobile 32px; line-height holds at 1.25. - Sub-nav strip: desktop horizontal anchor row → tablet horizontal scroll → mobile collapses into a select dropdown.
- Section padding: 64px desktop → 48px tablet → 32px mobile.
- Long-form text: desktop 60/40 body+sidebar → tablet/mobile single-column with sidebar pushed below.
Image Behavior
- Hero imagery uses art-direction crops: 16:9 wide hero on desktop swaps to 4:5 portrait on mobile so the subject stays centered and headline overlay space holds.
- Card imagery is fixed-aspect (16:9 for resource, 1:1 for product, 3:2 for editorial) that scales rather than re-crops between breakpoints.
- All non-critical imagery is lazy-loaded as the user scrolls into the next grid row.
11. Content & Voice
Tone
NVIDIA’s marketing voice is technical, precise, and confidently dense — never breathless, never playful. Headlines lean factual (“AI Computing for the Endeavors of Humanity”, “Drive Discovery with Accelerated Computing”) rather than aspirational metaphor. The voice borrows from research-paper abstracts: noun-dense, active-verbed, jargon used precisely where the audience expects it.
Microcopy Patterns
- Button verbs: “Get Started”, “Learn More”, “Read the Documentation”, “Watch the Video”, “Compare Products”, “Sign Up”. Action-first, title case.
- Error messages: stated plainly with technical specificity. “Connection timed out. Retry in 5 seconds.” NVIDIA writes errors like an engineer logs them.
- Success confirmations: brief and factual. “Subscription confirmed.”
- Loading states: a thin progress indicator with optional
body-smmuted text (“Loading…”). No skeleton screens on marketing.
Empty States
NVIDIA’s marketing surfaces are densely populated. Where empty states appear (resource search results), the copy is direct: “No results match your filters.” A button-outline “Clear Filters” appears below in NVIDIA Green border.
CTA Verb Conventions
- “Get Started” — the universal sign-up phrasing across product pages.
- “Learn More” — the standard tertiary affordance with a
→chevron. Always title case. - “Read the Documentation” — preferred over “View Docs” — engineering-grade phrasing.
- “Watch the Video” — preferred over “Watch Now” — technical precision over urgency.
- “Sign Up” — used for newsletter and developer-program enrollment.
- “Contact Sales” — enterprise lead-gen; never “Request a Demo”.
The system rejects “Click here”, “Try it now”, “Buy today” — those phrasings read as marketing-by-default rather than NVIDIA’s voice.
12. Dark Mode & Theming
NVIDIA’s marketing system already includes dark surfaces as a structural element — the hero / footer chapters are #000000 regardless of any user theme preference. The body content, however, is light-only on the public marketing site. There is no documented marketing dark-mode toggle that inverts the entire page; the alternation is editorial, not user-controlled.
NVIDIA’s product surfaces (NGC, developer portal, GeForce Now) ship a full Gray-100 dark theme — the inverse token map matches what’s already present in the hero and footer:
bg:#ffffff→#000000surface-soft:#f7f7f7→#1a1a1atext:#000000→#fffffftext-body:#1a1a1a→rgba(255,255,255,0.9)text-muted:#757575→rgba(255,255,255,0.7)border:#cccccc→#5e5e5e(hairline-strong)brand:#76b900→#76b900(NVIDIA Green is constant — high contrast on both light and dark)link:#0046a4→#76b900(links flip to brand green on dark, since blue underperforms on black)
The corner-square stays NVIDIA Green at all times — it is the constant signature.
13. Lineage & Influences
NVIDIA’s design lineage runs through three eras of GPU industry maturation:
1993–2005: GeForce gamer era. Early NVIDIA branding leaned on bold, neon-tinged gamer aesthetics — chromed wordmarks, lens flares, gradient backgrounds. The current marketing system rejects every visual decision from this era except the green wordmark colour itself.
2005–2018: Datacenter / CUDA era. As NVIDIA pivoted from gaming to general-purpose GPU compute (CUDA, 2007), the brand voice tightened toward enterprise restraint. The marketing site became denser, more technical, less consumer. The black hero / white body alternation took root in this era.
2018–today: AI / accelerated-computing era. The current marketing system codifies the engineering-documentation aesthetic — minimal chrome, hairline-bordered cards, single-accent green, and the corner-square as the lone ornament. This is the system the spec captures.
Influences absorbed:
- Swiss / International Typographic Style — the grid discipline and hierarchy-by-weight that makes NVIDIA’s marketing read as engineering-grade rather than consumer-friendly.
- Bauhaus / Dieter Rams — function-over-ornament, the “less but better” rule that justifies the corner-square as the system’s only decorative motif.
- CAD / engineering documentation — the 2px radius, hairline borders, and dense multi-column layouts borrow directly from engineering-drawing conventions.
- IBM Carbon — peer enterprise design system; NVIDIA shares Carbon’s restraint but reaches further into 2px-radius angularity (Carbon stays at 0px, NVIDIA at 2px — the contrast is real).
What it rejects:
- Pill-shaped buttons (consumer SaaS aesthetic).
- Atmospheric depth (no gradient backdrops, no decorative meshes).
- Multi-color accent systems (NVIDIA Green is the only chromatic accent on chrome).
- Decorative animation (no parallax, no scroll-triggered scale, no auto-playing video on hover).
Named contemporaries:
- Tesla — peer engineering-grade brand with heavier typographic discipline and similar dark-hero rhythm.
- HashiCorp — peer enterprise system with similar restraint, more rounded corners.
- IBM Carbon — peer enterprise design system; pioneer of the open-source-system-as-marketing-chrome approach.
14. Do’s and Don’ts
Do
- Reserve
#76b900NVIDIA Green for primary CTAs, active states, decorative corner squares, and the wordmark itself. Treat it as a precious resource. - Stack hero / footer chapters in
#000000and body sections in#ffffff— alternate them in a predictable rhythm down the page. - Anchor a 12×12px green corner-square to one corner of every reusable card. It is the system’s identity tag.
- Use 2px radius on every interactive element. Never go to 0, never go past 4.
- Build hierarchy from font weight (400 vs 700) and size, not from color tinting. Body text stays
#000000or#1a1a1aregardless of context. - Stack content sections at 64px rhythm with no decorative dividers between them.
- Pair
button-primary(green fill) withbutton-outline(green border) for primary + secondary action pairs. - Use the dark hero / dark CTA strip as the system’s “headline moment” — a single full-bleed photographic / 3D image with one green CTA.
Don’t
- Don’t introduce drop shadows on cards or content surfaces. The only allowed shadow is the 5px ambient on sticky chrome.
- Don’t substitute
success-deep,accent-green-pale, or any other green for#76b900in CTAs. The brand green is precise. - Don’t use
#0046a4link-blue outside of inline body-prose links. It is not a button colour, not a chrome colour. - Don’t soften the geometry. No pill buttons, no rounded cards, no
lg+ radius anywhere except avatars and social icons. - Don’t pad the dark hero card symmetrically. Copy hugs the left third; imagery fills the right.
- Don’t add a second accent colour for variety. The system is intentionally one-colour on chrome.
- Don’t put
button-primary(green fill) on#ffffffbackgrounds where green-on-white would clash with photo content — usebutton-outlineinstead and reserve fill for dark surfaces. - Don’t use medium / semibold weights. The system is 400 / 700 only.
15. Agent Prompt Guide
Quick Color Reference
- Canvas:
#ffffff - Hero / Footer:
#000000 - Surface Soft:
#f7f7f7 - Ink:
#000000 - Body:
#1a1a1a - Mute:
#757575 - NVIDIA Green:
#76b900 - NVIDIA Green Active:
#5a8d00 - Hairline:
#cccccc - Link Blue (inline only):
#0046a4
Example Component Prompts
- “Create a dark hero: full-bleed black
#000000background with a 16:9 photograph (data-center hardware) and argba(0,0,0,0.5)gradient overlay. Display headline at 48px NVIDIA-EMEA / 700 in#ffffff, subhead in 22px / 400. A single green#76b900button with black text, 2px radius, 11×24px padding, height 44px. Optional outline-on-dark secondary button beside it with 1px white border. Padding80pxvertical,48pxhorizontal.” - “Design a feature card: white
#ffffffbackground, 1px#cccccchairline border, square 2px corners, 32px padding. Icon at the top in NVIDIA Green at 22-24px, then a 20px / 700 heading, then 16px / 400 body. Anchor a 12×12px solid#76b900corner-square at the top-left of the card.” - “Build a resource-card: white background, 1px hairline, 2px radius, 24px padding. At the top: an uppercase 14px / 700 ‘WHITE PAPER’ badge-tag pill on
#f7f7f7. Then a 3:2 thumbnail. Then a 17px / 700 card-title. Then a 15px / 400 body-sm description. Then a green ghost-link ‘Read More →’ at the bottom. Green corner-square top-left.” - “Create a callout-stat: 1px hairline white card, 32px padding, 2px radius. Massive 36px NVIDIA-EMEA / 700 numeric in
#76b900(‘4× faster training’), then 16px / 400 caption beneath.” - “Design a primary nav: full-bleed
#000000background, 64px height. NVIDIA wordmark left, centered nav row with ‘Products / Solutions / Industries / Resources / Support / Company’ in 16px / 700 white. Right cluster: search-glyph + ‘Login’ button + green CTA ‘Get Started’ (button-primary).” - “Build a footer: full-bleed
#000000background, 64×48px padding. 6-column link grid with column heads in 16px / 700 white and link lists in 15px / 400rgba(255,255,255,0.7). Below: social-icon strip + locale selector + legal/privacy fine-print row in 10px / 700 uppercase muted.”
Iteration Guide
- Audit corners. Every interactive surface should be 2px. If you see 0px (drift toward IBM) or 8px+ (drift toward Pinterest), bring it back to 2px.
- Audit green discipline. NVIDIA Green appears only on: primary CTA fill, outline button border, active tab background-text-flip, corner-square, link colour on dark surfaces, focused input border, brand wordmark. Anywhere else is drift.
- Audit weight binary. Only weight 400 and 700 — no 500, no 600. Carbon-style emphasis happens via 16/700 body-strong, not via medium weight.
- Audit shadow restraint. Strip every box-shadow except the 5px sticky-chrome ambient and the 16px modal lift. Cards are flat with hairline borders.
- Audit corner-squares. Every reusable card type (product, feature, resource, callout-stat) should carry a 12×12px green corner-square at one corner. Without it, the card reads as generic.
- Audit dark-light rhythm. Hero black → body white → CTA-strip black → body white → footer black. The alternation is the brand. If you see a tinted body band (gray, blue, beige), flatten it to
#ffffff. - Audit body tracking. NVIDIA does not use letter-spacing on body — it’s
0. Onlycaption-mdandutility-xscarry uppercase + tracking, and only at small sizes. - Honor the link colour. Inline body links are
#0046a4blue with underline. Anywhere else is wrong — there is no other blue in the system.
Drop nvidia into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add nvidia 2 · ship landing page
npx agentkit init --design nvidia light minimal
Tesla
Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height…
Docs
Install
Tesla
webdesignhot
dark multi-color
HashiCorp
Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Con…
Docs
Install
HashiCorp
webdesignhot
light structured
Datadog
NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an ente…
Docs
Install
Datadog
webdesignhot