Untitled Design System
NVIDIA's marketing system is built like a piece of engineering documentation that learned graphic design—every page is a structured cascade of dense, factual information arranged on a paper-white grid, framed top and bottom by deep black hero/footer chapters. The system's character comes from extreme typographic restraint and an angular geometry.
Color Palette
Brand & Accent
Surface
Text
Semantic
Editorial Accents (used sparingly inside long-form content)
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
NVIDIA's marketing system is built like a piece of engineering documentation that learned graphic design—every page is a structured cascade of dense, factual information arranged on a paper-white grid, framed top and bottom by deep black hero/footer chapters. The system's character comes from extreme typographic restraint and an angular geometry.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
corner-square
default
Elevation & Depth
Do's & Don'ts
Do
Don't
Layout
### Spacing System
• Base unit: 8px
• Tokens (front matter): {spacing.xxs} (2px) · {spacing.xs} (4px) · {spacing.sm} (8px) · {spacing.md} (12px) · {spacing.lg} (16px) · {spacing.xl} (24px) · {spacing.xxl} (32px) · {spacing.section} (64px)
• Universal section rhythm: every page in the set uses {spacing.section} (64px) as the vertical gap between major content blocks. Card grids use {spacing.xl} (24px) gutters; in-card padding sits at {spacing.xl} to {spacing.xxl} depending on density.
• Hero chapter padding: 80px vertical / 48px horizontal — the largest spacing in the system, reserved for {component.hero-card-dark}.
### Grid & Container
• Max width: ~1280px content area at desktop, with 24px gutters that grow to ~48px at ultrawide.
• Column patterns:
• 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 {spacing.section} rhythm — there are no decorative dividers, no empty "breathing room" bands, no gradient transitions between sections. The sense of air comes from {colors.canvas} body sections sandwiched between {colors.surface-dark} chapter blocks, not from generous padding inside any one component.
Shapes
### Border Radius Scale
| Token | Value | Use |
|---|---|---|
| {rounded.none} | 0px | Hero chapter, footer, dark CTA strips, primary nav |
| {rounded.xs} | 1px | Decorative micro-rules and inset accent strips |
| {rounded.sm} | 2px | Every interactive element — buttons, cards, inputs, pill tabs, badges |
| {rounded.full} | 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 the optical aliasing on a sharp edge but small enough that the system reads as engineering-grade rather than consumer-friendly.
### Photography Geometry
• Hero imagery: full-bleed 16:9 (desktop) cropping to 4:5 portrait on mobile.
• Card imagery: 16:9 thumbnail at the top of resource cards; 1:1 square for product/SKU cards; 3:2 for editorial article cards.
• Decorative corner squares: 12×12px on standard cards, scaled to 16×16 on hero callouts.
• Avatar/social icons: 32–40px circles with 1px hairline.
Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| ultrawide | 1920px+ | Content max-width holds at 1280px; outer gutters grow to ~80px |
| desktop-large | 1440px | Default desktop layout — 4-up card grid, 6-col footer |
| desktop | 1280px | Same as large with slightly narrower outer gutters |
| desktop-small | 1024px | 4-up cards collapse to 3-up; sub-nav remains horizontal |
| tablet | 768px | 3-up cards collapse to 2-up; primary nav becomes hamburger drawer |
| mobile | 480px | Single-column everything; footer columns collapse to accordion |
| mobile-narrow | 320px | Hero {typography.display-xl} scales from 48px → 32px |
### Touch Targets
All interactive elements meet WCAG AA (≥ 44×44px). {component.button-primary} sits at 44px height with 24px horizontal padding. {component.text-input} sits at 44px. {component.pill-tab} sits at ~40px height with extended hit-target padding to 44px. {component.button-outline} matches the 44px standard. Footer links are 18–20px line-height with 8–12px vertical padding to keep tap targets at ~36–44px depending on link length.
### Collapsing Strategy
• Primary nav: desktop center cluster → tablet hamburger drawer at 768px.
• Card grid: 4-up → 3-up → 2-up → 1-up at 1024, 768, and 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 a tap-to-expand row).
• Hero copy: desktop {typography.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: {spacing.section} (64px) desktop → 48px tablet → 32px mobile.
• Long-form text: desktop 60/40 body+sidebar → tablet/mobile single-column with sidebar pushed to the bottom.
### 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 text still has overlay space.
• Card imagery is a fixed aspect (16:9 for resource, 1:1 for product) that scales rather than re-crops between breakpoints.
• All non-critical imagery is lazy-loaded as the user scrolls into the next grid row.
Iteration Guide
1. Focus on ONE component at a time. Pull its YAML entry from the front matter and verify every property resolves.
2. Reference component names and tokens directly ({colors.primary}, {component.button-primary-active}, {rounded.sm}) — do not paraphrase.
3. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically.
4. Add new variants as separate component entries (-active, -disabled, -focused) — do not bury them inside prose.
5. Default body to {typography.body-md}; reach for {typography.body-strong} for emphasis; reserve {typography.display-xl} strictly for hero chapter headlines.
6. Keep {colors.primary} scarce per viewport — if more than one solid-green CTA appears in the same fold, neutralize one to {component.button-outline}.
7. When introducing a new component, ask whether it can be expressed with the existing card + 2px-radius + corner-square + green-CTA vocabulary before adding new tokens. The system's strength is that it almost never needs new ones.
Known Gaps
• Mobile screenshots not captured — responsive behavior synthesizes NVIDIA's known mobile pattern (hamburger drawer, accordion footer, 1-up card grid, hero downscale) from desktop evidence and the documented breakpoint stack.
• Hover states not documented by system policy.
• Dialog / modal styling beyond the locale-selector overlay not visible in the captured surfaces.
• Form field styling for full sign-up / contact forms is not present in the captured surfaces — only inline search and basic text inputs are documented.
• Login / authenticated chrome not in the captured pages.
Use with MCP
Don't have the MCP? Install it here