| version |
alpha |
| name |
NVIDIA Elements |
| description |
The official design language and UI agent contract for NVIDIA Elements interfaces. |
| colors |
| nve-sys-accent-primary-background |
nve-sys-accent-secondary-background |
nve-sys-accent-tertiary-background |
nve-sys-contrast-emphasis-color |
nve-sys-contrast-mute-color |
nve-sys-interaction-background |
nve-sys-interaction-background-100 |
nve-sys-interaction-background-200 |
nve-sys-interaction-background-300 |
nve-sys-interaction-color |
nve-sys-interaction-destructive-background |
nve-sys-interaction-destructive-color |
nve-sys-interaction-disabled-background |
nve-sys-interaction-disabled-color |
nve-sys-interaction-emphasis-background |
nve-sys-interaction-emphasis-color |
nve-sys-interaction-field-background |
nve-sys-interaction-field-background-100 |
nve-sys-interaction-field-background-200 |
nve-sys-interaction-field-background-300 |
nve-sys-interaction-field-color |
nve-sys-interaction-highlighted-background |
nve-sys-interaction-highlighted-color |
nve-sys-interaction-highlighted-muted-background |
nve-sys-interaction-hover-background |
nve-sys-interaction-hover-color |
nve-sys-interaction-selected-background |
nve-sys-interaction-selected-color |
nve-sys-interaction-state-base |
nve-sys-interaction-state-mix |
nve-sys-layer-backdrop-background |
nve-sys-layer-canvas-accent-background |
nve-sys-layer-canvas-background |
nve-sys-layer-canvas-color |
nve-sys-layer-container-accent-background |
nve-sys-layer-container-background |
nve-sys-layer-container-color |
nve-sys-layer-overlay-accent-background |
nve-sys-layer-overlay-background |
nve-sys-layer-overlay-color |
nve-sys-layer-popover-accent-background |
nve-sys-layer-popover-background |
nve-sys-layer-popover-color |
nve-sys-layer-shell-accent-background |
nve-sys-layer-shell-background |
nve-sys-layer-shell-color |
nve-sys-scrollbar-thumb-color |
nve-sys-scrollbar-track-color |
nve-sys-status-color |
nve-sys-status-failed-color |
nve-sys-status-finished-color |
nve-sys-status-ignored-color |
nve-sys-status-pending-color |
nve-sys-status-queued-color |
nve-sys-status-restarting-color |
nve-sys-status-running-color |
nve-sys-status-scheduled-color |
nve-sys-status-starting-color |
nve-sys-status-stopping-color |
nve-sys-status-unknown-color |
nve-sys-support-accent-color |
nve-sys-support-accent-emphasis-color |
nve-sys-support-accent-muted-color |
nve-sys-support-color |
nve-sys-support-danger-color |
nve-sys-support-danger-emphasis-color |
nve-sys-support-danger-muted-color |
nve-sys-support-emphasis-color |
nve-sys-support-muted-color |
nve-sys-support-success-color |
nve-sys-support-success-emphasis-color |
nve-sys-support-success-muted-color |
nve-sys-support-warning-color |
nve-sys-support-warning-emphasis-color |
nve-sys-support-warning-muted-color |
nve-sys-text-black-color |
nve-sys-text-color |
nve-sys-text-emphasis-color |
nve-sys-text-link-color |
nve-sys-text-link-disabled-color |
nve-sys-text-link-emphasis-color |
nve-sys-text-link-hover-color |
nve-sys-text-link-visited-color |
nve-sys-text-muted-color |
nve-sys-text-placeholder-color |
nve-sys-text-white-color |
nve-sys-visualization-categorical-amber |
nve-sys-visualization-categorical-cyan |
nve-sys-visualization-categorical-grass |
nve-sys-visualization-categorical-lavender |
nve-sys-visualization-categorical-nova |
nve-sys-visualization-categorical-pear |
nve-sys-visualization-categorical-pumpkin |
nve-sys-visualization-categorical-red |
nve-sys-visualization-categorical-rose |
nve-sys-visualization-categorical-seafoam |
nve-sys-visualization-categorical-slate |
nve-sys-visualization-categorical-violet |
nve-sys-visualization-sequential-diverging-red-green-100 |
nve-sys-visualization-sequential-diverging-red-green-200 |
nve-sys-visualization-sequential-diverging-red-green-300 |
nve-sys-visualization-sequential-diverging-red-green-400 |
nve-sys-visualization-sequential-diverging-red-green-500 |
nve-sys-visualization-sequential-diverging-red-green-600 |
nve-sys-visualization-sequential-diverging-red-green-700 |
nve-sys-visualization-sequential-diverging-red-green-800 |
nve-sys-visualization-sequential-diverging-red-green-900 |
nve-sys-visualization-sequential-diverging-virdis-100 |
nve-sys-visualization-sequential-diverging-virdis-1000 |
nve-sys-visualization-sequential-diverging-virdis-1100 |
nve-sys-visualization-sequential-diverging-virdis-1200 |
nve-sys-visualization-sequential-diverging-virdis-1300 |
nve-sys-visualization-sequential-diverging-virdis-1400 |
nve-sys-visualization-sequential-diverging-virdis-1500 |
nve-sys-visualization-sequential-diverging-virdis-200 |
nve-sys-visualization-sequential-diverging-virdis-300 |
nve-sys-visualization-sequential-diverging-virdis-400 |
nve-sys-visualization-sequential-diverging-virdis-500 |
nve-sys-visualization-sequential-diverging-virdis-600 |
nve-sys-visualization-sequential-diverging-virdis-700 |
nve-sys-visualization-sequential-diverging-virdis-800 |
nve-sys-visualization-sequential-diverging-virdis-900 |
nve-sys-visualization-trend-negative-color |
nve-sys-visualization-trend-negative-emphasis-color |
nve-sys-visualization-trend-positive-color |
nve-sys-visualization-trend-positive-emphasis-color |
oklch(66% 0.18 127) |
oklch(55% 0.2 250) |
oklch(0% 0 0) |
oklch(100% 0 0) |
oklch(100% 0 0) |
oklch(90% 0.006 248) |
oklch(90% 0.006 248) |
oklch(93% 0.006 248) |
oklch(93% 0.006 248) |
oklch(20% 0.006 248) |
oklch(55% 0.19 18) |
oklch(100% 0 0) |
oklch(90% 0.006 248) |
oklch(82% 0.006 248) |
oklch(66% 0.18 127) |
oklch(0% 0 0) |
oklch(90% 0.006 248) |
oklch(90% 0.006 248) |
oklch(93% 0.006 248) |
oklch(93% 0.006 248) |
oklch(20% 0.006 248) |
oklch(91% 0.04 250) |
oklch(20% 0.006 248) |
oklch(97% 0.02 250) |
oklch(90% 0.006 248) |
oklch(20% 0.006 248) |
oklch(90% 0.006 248) |
oklch(20% 0.006 248) |
oklch(90% 0.006 248) |
oklch(20% 0.006 248) |
oklch(0% 0 0 / 0.0588) |
oklch(94% 0.006 248) |
oklch(95% 0.006 248) |
oklch(20% 0.006 248) |
oklch(98% 0.006 248) |
oklch(100% 0 0) |
oklch(20% 0.006 248) |
oklch(98% 0.006 248) |
oklch(100% 0 0) |
oklch(20% 0.006 248) |
oklch(53% 0.006 248) |
oklch(20% 0.006 248) |
oklch(100% 0 0) |
oklch(98% 0.006 248) |
oklch(100% 0 0) |
oklch(20% 0.006 248) |
oklch(88% 0.006 248) |
oklch(0% 0 0 / 0.0118) |
oklch(60% 0.006 248) |
oklch(55% 0.19 18) |
oklch(52% 0.13 147) |
oklch(53% 0.006 248) |
oklch(53% 0.006 248) |
oklch(47% 0.16 270) |
oklch(54% 0.14 76) |
oklch(54% 0.19 250) |
oklch(47% 0.16 292) |
oklch(53% 0.09 178) |
oklch(56% 0.22 343) |
oklch(0% 0 0) |
oklch(55% 0.2 250) |
oklch(54% 0.19 250) |
oklch(95% 0.03 250) |
oklch(60% 0.006 248) |
oklch(55% 0.19 18) |
oklch(55% 0.19 18) |
oklch(93% 0.03 18) |
oklch(60% 0.006 248) |
oklch(90% 0.006 248) |
oklch(52% 0.13 147) |
oklch(52% 0.13 147) |
oklch(94% 0.03 147) |
oklch(81% 0.17 95) |
oklch(73% 0.15 95) |
oklch(98% 0.05 95) |
oklch(0% 0 0) |
oklch(20% 0.006 248) |
oklch(20% 0.006 248) |
oklch(20% 0.006 248) |
oklch(94% 0.006 248) |
oklch(55% 0.2 250) |
oklch(54% 0.19 250) |
oklch(52% 0.18 310) |
oklch(53% 0.006 248) |
oklch(65% 0.006 248) |
oklch(100% 0 0) |
oklch(78% 0.17 76) |
oklch(72% 0.11 212) |
oklch(61% 0.14 147) |
oklch(56% 0.18 310) |
oklch(81% 0.17 95) |
oklch(80% 0.2 125) |
oklch(69% 0.19 51) |
oklch(60% 0.2 18) |
oklch(61% 0.21 343) |
oklch(64% 0.11 183) |
oklch(60% 0.006 248) |
oklch(51% 0.17 292) |
oklch(49.9% 0.159 23.4) |
oklch(59.6% 0.195 23.8) |
oklch(68.4% 0.193 22) |
oklch(83.3% 0.083 18.1) |
oklch(94% 0.006 248) |
oklch(86.4% 0.117 148.8) |
oklch(72.5% 0.176 148.7) |
oklch(62.7% 0.157 148.3) |
oklch(47.5% 0.109 150.4) |
oklch(91.8% 0.187 102.2) |
oklch(49.1% 0.083 242.3) |
oklch(45.3% 0.094 261.6) |
oklch(41.9% 0.108 278.7) |
oklch(37.1% 0.124 293.4) |
oklch(33.3% 0.134 306.3) |
oklch(27.6% 0.132 318.4) |
oklch(85.9% 0.19 115) |
oklch(82.1% 0.194 126.8) |
oklch(77.5% 0.187 137.2) |
oklch(73.4% 0.164 147.5) |
oklch(69.1% 0.145 157.3) |
oklch(64.6% 0.12 169.6) |
oklch(60.2% 0.1 184.4) |
oklch(56.8% 0.087 200.1) |
oklch(60% 0.2 18) |
oklch(55% 0.19 18) |
oklch(61% 0.14 147) |
oklch(52% 0.13 147) |
|
| typography |
| display-xl |
display |
heading |
body |
label |
code |
| fontFamily |
fontSize |
fontWeight |
lineHeight |
'Inter', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif |
50px |
400 |
1.12 |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
'Inter', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif |
40px |
400 |
1.12 |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
'Inter', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif |
24px |
600 |
1.25 |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
'Inter', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif |
14px |
400 |
1.375 |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
'Inter', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif |
14px |
500 |
1.375 |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
'Roboto Mono', 'Lucida Console', Monaco, monospace, sans-serif |
14px |
400 |
1.5 |
|
|
| rounded |
| none |
xs |
sm |
md |
lg |
full |
0px |
4px |
6px |
8px |
14px |
999px |
|
| spacing |
| none |
xs |
sm |
md |
lg |
xl |
xxl |
0px |
8px |
12px |
16px |
24px |
32px |
48px |
|
NVIDIA Elements is the design system and framework-agnostic Web Component system for operational interfaces across AI/ML infrastructure, robotics, and autonomous vehicle tooling.
This is the official DESIGN.md for NVIDIA Elements. It describes the Elements product UI system, not the visual identity of every NVIDIA website or product. Use the exact nve-* component APIs, semantic CSS custom properties, examples, and accessibility behavior documented at https://nvidia.github.io/elements/.
Build with Elements before creating custom UI. Install @nvidia-elements/themes, @nvidia-elements/styles, @nvidia-elements/core, @nvidia-elements/cli and the required component packages, or run nve project.setup to configure an existing project. Agents can query component APIs, examples, tokens, icons, and project validation through the Elements CLI and MCP server.
The front matter exposes the complete light-theme baseline for shipped nve-sys-* color tokens. Each key uses the canonical Elements token name. In application CSS, prefix that key with --: for example, {colors.nve-sys-layer-canvas-background} corresponds to --nve-sys-layer-canvas-background. Use the custom property instead of copying its resolved front matter value so light, dark, high-contrast, and user-defined themes continue to work.
nve-sys-accent-* identifies primary, secondary, and tertiary accents.nve-sys-layer-* pairs canvas, shell, container, overlay, and popover backgrounds with their content colors.nve-sys-text-* provides default, muted, emphasis, placeholder, and link roles.nve-sys-interaction-* describes control surfaces and their emphasis, destructive, disabled, hover, selected, highlighted, and field states.nve-sys-support-* and nve-sys-status-* communicate semantic and operational states. Never rely on color alone; pair status color with text and an icon when appropriate.nve-sys-visualization-* provides categorical, sequential, diverging, and trend colors for data graphics.nve-sys-contrast-* and nve-sys-scrollbar-* support contrast composition and native scroll bar styling.
Use the design token reference for the complete token inventory and current CSS custom-property names.
Inter is the primary interface typeface. Reserve Roboto Mono for code, identifiers, logs, metrics, and other content where character distinction matters. The compact scale helps operational applications present dense information without sacrificing legibility.
- Use
{typography.display} sparingly for page-level moments.
- Use
{typography.heading} to organize content; do not choose heading markup for visual size alone.
- Use
{typography.body} for most interface copy. Apply documented nve-text size variants when copy needs more emphasis.
- Use
{typography.label} for controls, metadata, and compact navigation.
- Use
{typography.code} for source code and machine-oriented values.
Apply the nve-text utilities documented in the typography foundation while preserving semantic HTML headings, labels, lists, and paragraphs.
Prefer the nve-layout attribute utilities on semantic native elements.
- Use
row for toolbars, action groups, and horizontal navigation.
- Use
column for forms, panels, page sections, and reading order.
- Use
grid for dashboards, galleries, and responsive multi-column content.
- Start with a single-column small-screen layout, then add container or viewport adaptations.
- Keep the DOM order meaningful. Visual reordering must not break reading or keyboard order.
See the layout foundation for supported gap, padding, alignment, grid, and responsive patterns.
Layer roles communicate depth. Canvas holds the application background, containers group durable content, overlays sit above containers, and popovers represent temporary top-layer UI. Prefer layer backgrounds, borders, and restrained shadows over ornamental effects.
Use elevation only when it explains containment or interaction. Dialogs, menus, tooltips, and transient panels must use the native top-layer patterns documented by Elements. Avoid decorative glass effects, large ambient shadows, and gradients that reduce text or status contrast.
The radius scale ranges from square {rounded.none} surfaces through {rounded.lg} containers. Standard controls use {rounded.sm}; cards and panels commonly use {rounded.md}. Reserve {rounded.full} for badges, tags, avatars, and other intentionally pill-shaped or circular objects.
Do not introduce arbitrary radii when an Elements radius token fits. Consistent geometry helps dense application surfaces read as one system.
Use existing nve-* Custom Elements and their documented composition patterns before creating replacements. The component tokens in the front matter summarize common visual roles; the live API documentation remains normative for properties, events, slots, CSS parts, accessibility, and behavior.
- All APIs available as llms.txt
- Use nve-button and nve-icon-button for actions.
- Use nve-input, nve-select, and the form guidance for data entry.
- Use nve-card and nve-page for durable content structure.
- Use nve-alert, badges, and notifications for status communication.
- Use nve-dialog, dropdowns, tooltips, and toggletips for temporary top-layer interaction.
- Use the data grid for interactive tabular data rather than recreating sorting, selection, pagination, or keyboard navigation.
Import component define.js entrypoints explicitly unless the project intentionally uses a bundle. Compose through public slots and attributes; do not reach into component shadow roots or depend on undocumented internals.
Do
- Start from Elements components, semantic tokens, examples, and patterns.
- Preserve semantic HTML, keyboard access, focus visibility, labels, and accessible names.
- Use semantic
--nve-sys-* tokens in application CSS so themes continue to work.
- Keep operational content concise, scannable, and explicit about state.
- Check generated UI with the Elements lint tooling and relevant accessibility tests.
- Query the CLI or MCP server when an API, icon name, token, or example is uncertain.
Don't
- Recreate an Elements component with generic HTML when the maintained component already fits.
- Hard-code resolved colors, spacing, or typography values in production application CSS.
- Encode meaning through color, position, animation, or iconography alone.
- Add gradients, glass effects, oversized radii, or decorative shadows without a product need.
- Invent component properties, slots, events, CSS parts, token names, or icon names.