design-nvidia

Apply NVIDIA's design system tokens and component styles when generating UI interfaces.

Updated Feb 23, 2026
One-click install
npx skills add https://github.com/deepparser/skills --skill design-nvidia-deepparser
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-nvidia
Source: https://github.com/deepparser/skills/tree/main/design-nvidia
Command: npx skills add https://github.com/deepparser/skills --skill design-nvidia-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match NVIDIA's visual identity requires exact design tokens—colors, typography, spacing, and component styles—that are tedious to reverse-engineer from the live site. This Skill provides the complete NVIDIA design system so generated UI matches the brand without manual inspection. ## Core Features & Use Cases - Complete Design Tokens: Exact color palette (NVIDIA Green #76b900, black/white foundation), typography scale (NVIDIA-EMEA with Arial/Helvetica fallbacks), spacing, border radius, and shadow values. - Component Specifications: Detailed styling for buttons (green-bordered transparent CTAs), cards, navigation, forms, links, and badges with hover/active/focus states. - Light & Dark Previews: Bundled HTML preview files (preview.html, preview-dark.html) showing the full token catalog rendered in both themes for visual verification. - Use Case: When asked to build a landing page or dashboard styled like NVIDIA, the Skill supplies every CSS value needed—such as 2px solid #76b900 button borders, 36px/700/1.25 hero headings, and uppercase 14px navigation links. ## Quick Start Create a landing page for a GPU product using the NVIDIA design system with a dark hero section and green-accented CTA buttons.

Frequently Asked Questions about design-nvidia

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a website look like NVIDIA's design?

Use NVIDIA's core tokens: black (#000000) and white (#ffffff) surfaces with the signature green (#76b900) reserved for borders, underlines, and CTA outlines. Headings use bold weight at 1.25 line-height, buttons are transparent with 2px green borders, and border radius stays at 2px throughout.

What font does NVIDIA's website use?

NVIDIA uses the custom NVIDIA-EMEA font family with Arial and Helvetica as fallbacks. Icons come from Font Awesome 6 Pro and Sharp at weights 900, 700, 400, and 300 depending on the icon style.

What is NVIDIA's brand green color hex code?

NVIDIA's signature green is #76b900, an electric lime-shifted green used only as an accent for borders, link underlines, and interactive highlights. It is never used as a large background fill on main content areas.

Does this design system support dark mode?

Yes, the Skill includes both light (preview.html) and dark (preview-dark.html) theme preview files. NVIDIA's design naturally alternates dark black sections with white sections, keeping the green accent consistent across both surface types.

When should I not use NVIDIA's design style?

Avoid it when the project needs soft, playful aesthetics—NVIDIA's system uses sharp 2px corners, dense spacing, and bold industrial typography. It also should not be used to imply official NVIDIA affiliation for unrelated products.