A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
Nvidia, in one page
NVIDIA's marketing system is built like a piece of engineering documentation that learned graphic design — every page is a structured cascade of dense, factual information arranged on a paper-white grid, framed top and bottom by deep black hero/footer chapters. There is exactly one accent color in the entire system, and it is doing all the work: NVIDIA Green ({colors.primary} — #76b900), used for every primary CTA, every active tab, every link affordance on dark surfaces, and the small decorative corner squares that mark out card containers. Nothing else competes for attention.
The system's character comes from extreme typographic restraint and an almost punishingly angular geometry. Every container, button, and image uses {rounded.sm} (2px) — a token that's barely-there but never zero, giving the system the precise, technical feel of CAD output rather than warm consumer software. Cards sit on plain {colors.canvas} with a hairline {colors.hairline} border (no shadow, no elevation), separated by tight 8px-base spacing rhythm. Long-form pages stack 6–10 of these cards into multi-column technical grids without ever introducing decorative breaks.
The black-canvas hero and footer chapters are the system's "headline moments" — a single full-bleed photographic or 3D-rendered image with {typography.display-xl} headline copy laid in white, a single green CTA button, and a small green corner square as the only ornamentation. Everything else is subordinate.
Key Characteristics:
- Single-accent system:
{colors.primary}carries every CTA, active state, and decorative motif. The rest is monochrome black/white/gray. - Two-mode surface architecture:
{colors.surface-dark}for hero/footer chapters;{colors.canvas}for body — alternating in a predictable rhythm down the page - Hyper-angular geometry:
{rounded.sm}(2px) on every interactive element. There are no pill buttons, no rounded cards, no soft chrome. - NVIDIA-EMEA proprietary sans-serif at weights 400 and 700, scaled across a 12-tier hierarchy from
{typography.utility-xs}(10px) up to{typography.display-xl}(48px) - Card library leans on hairline
{colors.hairline}borders and{colors.surface-soft}backgrounds rather than shadows for separation - Signature decorative element: the small
{component.corner-square}(~12px green square) anchored to one corner of resource and feature cards - Dense multi-column footer with 4–6 link columns on
{colors.surface-dark}— every page closes with the same structured global navigation
Do's and don'ts
Do
- Reserve
{colors.primary}for primary CTAs, active states, decorative corner squares, and the NVIDIA wordmark itself. Treat it as a precious resource. - Stack hero/footer chapters in
{colors.surface-dark}and body sections in{colors.canvas}— alternate them in a predictable rhythm down the page. - Anchor a
{component.corner-square}to one corner of every reusable card. It is the system's identity tag. - Use
{rounded.sm}(2px) 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
{colors.ink}or{colors.body}regardless of context. - Stack content sections at
{spacing.section}(64px) rhythm with no decorative dividers between them. - Pair
{component.button-primary}(green fill) with{component.button-outline}(green border) for primary + secondary action pairs.
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
{colors.success-deep},{colors.accent-green-pale}, or any other green for{colors.primary}in CTAs. The brand green is precise. - Don't use
{colors.link-blue}outside of inline body-prose links. It is not a button color, not a chrome color. - Don't soften the geometry. No pill buttons, no rounded cards, no
{rounded.lg}or higher anywhere except avatars and social icons. - Don't pad the hero
{component.hero-card-dark}symmetrically. Copy hugs the left third; imagery fills the right. - Don't add a second accent color for variety. The system is intentionally one-color.
- Don't put
{component.button-primary}on a{colors.canvas}background where green-on-white would clash with photo content — use{component.button-outline}instead and reserve fill for dark surfaces.
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Nvidia design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- primary: #76b900
- on-primary: #000000
- primary-dark: #5a8d00
- ink: #000000
- canvas: #ffffff
- surface-dark: #000000
- surface-soft: #f7f7f7
- surface-elevated: #1a1a1a
- hairline: #cccccc
- hairline-strong: #5e5e5e
Type:
- families: NVIDIA-EMEA, Inter, Arial
- scale: 10, 11, 12, 14, 14.4, 15, 16, 17, 18
- weights: 400, 700
Shape:
- radius: 0, 1, 2
Spacing: 2, 4, 8, 10, 11, 12, 16, 24, 32, 64
Rules:
- Reserve `{colors.primary}` for primary CTAs, active states, decorative corner squares, and the NVIDIA wordmark itself. Treat it as a precious resource.
- Stack hero/footer chapters in `{colors.surface-dark}` and body sections in `{colors.canvas}` — alternate them in a predictable rhythm down the page.
- Anchor a `{component.corner-square}` to one corner of every reusable card. It is the system's identity tag.
- Use `{rounded.sm}` (2px) 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 `{colors.ink}` or `{colors.body}` regardless of context.
- Stack content sections at `{spacing.section}` (64px) rhythm with no decorative dividers between them.
Avoid:
- Don't introduce drop shadows on cards or content surfaces. The only allowed shadow is the 5px ambient on sticky chrome.
- Don't substitute `{colors.success-deep}`, `{colors.accent-green-pale}`, or any other green for `{colors.primary}` in CTAs. The brand green is precise.
- Don't use `{colors.link-blue}` outside of inline body-prose links. It is not a button color, not a chrome color.
- Don't soften the geometry. No pill buttons, no rounded cards, no `{rounded.lg}` or higher anywhere except avatars and social icons.
- Don't pad the hero `{component.hero-card-dark}` symmetrically. Copy hugs the left third; imagery fills the right.
- Don't add a second accent color for variety. The system is intentionally one-color.
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Source pages:
/tr-tr/(primary homepage),/en-eu/industries/healthcare-life-sciences/,/en-eu/solutions/ai/,/en-eu/ai/foundry/. The chrome palette is identical across all four — only photography and copy vary.
Brand & Accent
- NVIDIA Green (
{colors.primary}—#76b900): the brand. Every primary CTA, every active state, every link affordance on dark surfaces, every corner square, and the brand wordmark itself. - NVIDIA Green Dark (
{colors.primary-dark}—#5a8d00): pressed state for the primary button — a single notch deeper than the brand green. - Accent Green Pale (
{colors.accent-green-pale}—#bff230): rare highlight tint used in editorial callouts and decorative micro-blocks; never on chrome.
Surface
- Page Canvas (
{colors.canvas}—#ffffff): the body of every page. Cards sit directly on it with hairline rules. - Soft Surface (
{colors.surface-soft}—#f7f7f7): breadcrumb strip, sub-nav, side-by-side comparison panels, alternating row backgrounds. - Black Canvas (
{colors.surface-dark}—#000000): hero chapter, dark CTA strips, footer, primary nav. The system's "frame" color. - Surface Elevated (
{colors.surface-elevated}—#1a1a1a): nested dark panels inside the footer (column dividers, fine-print bar). - Hairline (
{colors.hairline}—#cccccc): 1px card border, table rule, divider between footer link sections. - Hairline Strong (
{colors.hairline-strong}—#5e5e5e): 1px divider on dark surfaces (footer column rules, dark-mode card edges).
Text
- Ink (
{colors.ink}—#000000): headlines and body text on{colors.canvas}. - Body (
{colors.body}—#1a1a1a): long-form paragraph text where pure black is too heavy. - Mute (
{colors.mute}—#757575): metadata, breadcrumb separators, footer copyright. - Stone (
{colors.stone}—#898989): least-emphasis text and disabled state. - Ash (
{colors.ash}—#a7a7a7): disabled icon color and faint utility text. - On Dark (
{colors.on-dark}—#ffffff): primary text on{colors.surface-dark}. - On Dark Mute (
{colors.on-dark-mute}—rgba(255,255,255,0.7)): secondary footer link text and dark-canvas body copy.
Semantic
- Error (
{colors.error}—#e52020): validation messages, destructive confirmation. - Error Deep (
{colors.error-deep}—#650b0b): pressed state for error buttons; hover-pressed validation icons. - Warning (
{colors.warning}—#df6500): caution callouts, deprecated documentation banners. - Warning Bright (
{colors.warning-bright}—#ef9100): inverse warning on dark canvas. - Success Deep (
{colors.success-deep}—#3f8500): positive confirmation where NVIDIA Green's saturation would clash. - Link Blue (
{colors.link-blue}—#0046a4): inline anchor link color on light canvas — the only blue in the system, reserved for prose-embedded hyperlinks.
Editorial Accents (used sparingly inside long-form content)
- Accent Purple (
{colors.accent-purple}—#952fc6): research / scientific computing editorial accent. - Accent Purple Deep (
{colors.accent-purple-deep}—#4d1368): paired dark for purple lockups. - Accent Purple Pale (
{colors.accent-purple-pale}—#f9d4ff): wash background for editorial callouts. - Accent Yellow Pale (
{colors.accent-yellow-pale}—#feeeb2): documentation tip / soft callout fill.
Type scaleRead the full spec
Font Family
- NVIDIA-EMEA is the proprietary brand sans-serif used across every text role on the site. It carries weights 400 (regular) and 700 (bold) and falls back to Arial → Helvetica.
- 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's type system is unusually flat: most chrome and body roles render at the same line-height (1.25–1.5) with the only meaningful variation coming from weight (400 vs 700) and size. The system relies on weight contrast — not size jumps and not color tinting — to establish hierarchy, which gives marketing copy and technical documentation an editorial newspaper feel.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.display-xl} | 48px | 700 | 1.25 | 0 | Hero headline on {component.hero-card-dark} |
{typography.display-lg} | 36px | 700 | 1.25 | 0 | Section headline ("Explore Our AI Solutions"), large stat callouts |
{typography.heading-xl} | 24px | 700 | 1.25 | 0 | Sub-section title, dark CTA-strip headline |
{typography.heading-lg} | 22px | 400 | 1.75 | 0 | Long-form intro paragraph that doubles as a heading |
{typography.heading-md} | 20px | 700 | 1.25 | 0 | Card group title, sub-nav anchor heading |
{typography.heading-sm} | 18px | 700 | 1.4 | 0 | Side-rail filter group, small section label |
{typography.card-title} | 17px | 700 | 1.47 | 0 | Resource card title, product card title |
{typography.body-md} | 16px | 400 | 1.5 | 0 | Body copy, default paragraph |
{typography.body-strong} | 16px | 700 | 1.5 | 0 | Inline emphasis, primary nav link, label |
{typography.body-sm} | 15px | 400 | 1.67 | 0 | Card description, secondary copy |
{typography.button-lg} | 18px | 700 | 1.25 | 0 | Hero primary CTA |
{typography.button-md} | 16px | 700 | 1.25 | 0 | Standard primary/secondary buttons |
{typography.button-sm} | 14.4px | 700 | 1 | 0.144px | Compact pill tab, in-card secondary CTA |
{typography.link-md} | 15px | 400 | 1.5 | 0 | Inline anchor link in body prose |
{typography.caption-md} | 14px | 700 | 1.43 | 0 | Eyebrow over section heading, breadcrumb (uppercase) |
{typography.caption-sm} | 12px | 400 | 1.25 | 0 | Footnote copy, metadata, table caption |
{typography.caption-xs} | 11px | 700 | 1 | 0 | Pill chip label, utility-bar text |
{typography.utility-xs} | 10px | 700 | 1.5 | 0 | Legal fine-print bar at the very bottom (uppercase) |
Principles
The typography is brand-locked: NVIDIA-EMEA is used at every level, no serif, no display variant, no monospace, no italic. Hierarchy is built almost entirely from size and weight — color is reserved for emphasis ({colors.primary} on links over dark, {colors.link-blue} on light) and never used to separate type tiers.
Note on Font Substitutes
NVIDIA-EMEA is proprietary. The closest open-source pairing is Inter (weights 400/700) — its x-height and stroke contrast match NVIDIA-EMEA's optical metrics within ~2% at body sizes. Arial is the official documented fallback and is acceptable for any system where Inter is unavailable. Avoid Helvetica Now or Helvetica Neue substitutes; their slightly tighter cap heights drift away from the brand's geometry.
Components and layoutRead the full spec
No hover states documented per system policy. Each spec covers Default and Active/Pressed only; variants live as separate
components:entries in the front matter.
Buttons
button-primary — the universal NVIDIA CTA
- Background
{colors.primary}, text{colors.on-primary}, type{typography.button-md}, padding11px 24px, height44px, rounded{rounded.sm}. - 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 state lives in
button-primary-active— background drops to{colors.primary-dark}(#5a8d00) with the same text color.
button-outline — secondary on light canvas
- Background transparent, text
{colors.ink}, 2px solid{colors.primary}border, type{typography.button-md}, padding11px 13px, rounded{rounded.sm}. - The system's most 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 — outline on {colors.surface-dark}
- Background transparent, text
{colors.on-dark}, 1px solid{colors.on-dark}, type{typography.button-md}, rounded{rounded.sm}. - White-on-black variant used in dark hero/footer CTA strips paired with a primary green button.
button-ghost-link — inline arrow link
- Text
{colors.primary}with a small right-arrow icon, type{typography.button-md}, no background, no border, rounded{rounded.none}. - "Learn More →" affordance sitting at the bottom of resource cards and long-form section blocks. The arrow is uppercase and bold per
{typography.caption-md}-equivalent treatment.
button-disabled
- Background
{colors.surface-soft}, text{colors.ash}, rounded{rounded.sm}— flat gray.
Tabs & Chips
pill-tab + pill-tab-active
- Default: transparent background, text
{colors.ink}, type{typography.button-sm}, padding10px 18px, rounded{rounded.sm}. - Active: background
{colors.ink}, text{colors.on-dark}— the tab flips inverted on selection. Used in the "Latest in AI Resources" filter strip and similar segmented controls.
badge-tag
- Background
{colors.surface-soft}, text{colors.body}, type{typography.caption-md}, padding4px 10px, rounded{rounded.sm}(uppercase). - Document type / category labels at the top of resource cards ("WHITE PAPER", "WEBINAR", "BLOG").
Inputs & Forms
text-input + text-input-focused
- Default: background
{colors.canvas}, text{colors.ink}, 1px solid{colors.hairline}, type{typography.body-md}, padding12px 16px, height44px, rounded{rounded.sm}. - Focused: same surface, border becomes 2px solid
{colors.primary}— the green border is the only focus signal in the system.
search-input
- Used in the global search overlay — same treatment as
text-inputbut at 40px height with a magnifier glyph at left.
Cards
product-card
- Container: background
{colors.canvas}, 1px solid{colors.hairline}, padding{spacing.xl}(24px), rounded{rounded.sm}. - Layout: 16:9 product image at top,
{typography.card-title}title,{typography.body-sm}description,{component.button-ghost-link}"Learn More →" affordance at bottom. - The
{component.corner-square}sits at the top-left corner.
feature-card
- Container: background
{colors.canvas}, 1px solid{colors.hairline}, padding{spacing.xxl}(32px), rounded{rounded.sm}. - Layout: icon (Font Awesome at 22–24px) at top in
{colors.primary}followed by{typography.heading-md}title and{typography.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: background
{colors.canvas}, 1px solid{colors.hairline}, padding{spacing.xl}, rounded{rounded.sm}. - Header strip:
{component.badge-tag}document-type label. - Body: 3:2 thumbnail,
{typography.card-title}title,{typography.body-sm}description. - Footer: ghost-link "Read More →" with right-pointing chevron in
{colors.primary}.
callout-stat
- Background
{colors.canvas}with 1px hairline{colors.hairline}, padding{spacing.xxl}, rounded{rounded.sm}. - Massive
{typography.display-lg}(36px) numeric in{colors.primary}followed by{typography.body-md}caption underneath ("4× faster training", "60% lower cost", etc.). Used inside long-form industry pages.
Hero & CTA Strips
hero-card-dark
- Background
{colors.surface-dark}with full-bleed 16:9 photographic/3D image and dark gradient overlay; copy slot at left. {typography.display-xl}headline{colors.on-dark},{typography.heading-lg}subhead, single{component.button-primary}CTA (sometimes paired with{component.button-outline-on-dark}).- Anchors the top of every primary landing page.
cta-strip-dark
Responsive behaviourRead the full spec
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-nvidia {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #000000;
--heading-color: #000000;
--link-color: #4f7d00;
--link-hover-color: #2f4a00;
--border-color: #d1d1d1;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(0,0,0,0.06);
--card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
--header-bg: #000000;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #595959;
--button-bg: #76b900;
--button-text-color: #000000;
--button-hover-bg: #558600;
--button-border: none;
--button-border-radius: 1px;
--button-secondary-bg: #f0f0f0;
--button-secondary-text-color: #000000;
--button-secondary-hover-bg: #e0e0e0;
--button-secondary-border: 1px solid #d1d1d1;
--prompt-bg: #f2f2f2;
--prompt-text-color: #000000;
--base-font: var(--font-inter);
--heading-font: var(--font-helvetica);
--card-border-radius: 1px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- daikin 78.7%
- spiral 73.0%
- bandainamco 72.2%
- recruit 70.8%
Where this came from
- Source document
volt/design-md/nvidia/DESIGN.md· 34.5 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.