--- version: "alpha" name: "NVIDIA Elements" description: "The official design language and UI agent contract for NVIDIA Elements interfaces." colors: nve-sys-accent-primary-background: "oklch(66% 0.18 127)" nve-sys-accent-secondary-background: "oklch(55% 0.2 250)" nve-sys-accent-tertiary-background: "oklch(0% 0 0)" nve-sys-contrast-emphasis-color: "oklch(100% 0 0)" nve-sys-contrast-mute-color: "oklch(100% 0 0)" nve-sys-interaction-background: "oklch(90% 0.006 248)" nve-sys-interaction-background-100: "oklch(90% 0.006 248)" nve-sys-interaction-background-200: "oklch(93% 0.006 248)" nve-sys-interaction-background-300: "oklch(93% 0.006 248)" nve-sys-interaction-color: "oklch(20% 0.006 248)" nve-sys-interaction-destructive-background: "oklch(55% 0.19 18)" nve-sys-interaction-destructive-color: "oklch(100% 0 0)" nve-sys-interaction-disabled-background: "oklch(90% 0.006 248)" nve-sys-interaction-disabled-color: "oklch(82% 0.006 248)" nve-sys-interaction-emphasis-background: "oklch(66% 0.18 127)" nve-sys-interaction-emphasis-color: "oklch(0% 0 0)" nve-sys-interaction-field-background: "oklch(90% 0.006 248)" nve-sys-interaction-field-background-100: "oklch(90% 0.006 248)" nve-sys-interaction-field-background-200: "oklch(93% 0.006 248)" nve-sys-interaction-field-background-300: "oklch(93% 0.006 248)" nve-sys-interaction-field-color: "oklch(20% 0.006 248)" nve-sys-interaction-highlighted-background: "oklch(91% 0.04 250)" nve-sys-interaction-highlighted-color: "oklch(20% 0.006 248)" nve-sys-interaction-highlighted-muted-background: "oklch(97% 0.02 250)" nve-sys-interaction-hover-background: "oklch(90% 0.006 248)" nve-sys-interaction-hover-color: "oklch(20% 0.006 248)" nve-sys-interaction-selected-background: "oklch(90% 0.006 248)" nve-sys-interaction-selected-color: "oklch(20% 0.006 248)" nve-sys-interaction-state-base: "oklch(90% 0.006 248)" nve-sys-interaction-state-mix: "oklch(20% 0.006 248)" nve-sys-layer-backdrop-background: "oklch(0% 0 0 / 0.0588)" nve-sys-layer-canvas-accent-background: "oklch(94% 0.006 248)" nve-sys-layer-canvas-background: "oklch(95% 0.006 248)" nve-sys-layer-canvas-color: "oklch(20% 0.006 248)" nve-sys-layer-container-accent-background: "oklch(98% 0.006 248)" nve-sys-layer-container-background: "oklch(100% 0 0)" nve-sys-layer-container-color: "oklch(20% 0.006 248)" nve-sys-layer-overlay-accent-background: "oklch(98% 0.006 248)" nve-sys-layer-overlay-background: "oklch(100% 0 0)" nve-sys-layer-overlay-color: "oklch(20% 0.006 248)" nve-sys-layer-popover-accent-background: "oklch(53% 0.006 248)" nve-sys-layer-popover-background: "oklch(20% 0.006 248)" nve-sys-layer-popover-color: "oklch(100% 0 0)" nve-sys-layer-shell-accent-background: "oklch(98% 0.006 248)" nve-sys-layer-shell-background: "oklch(100% 0 0)" nve-sys-layer-shell-color: "oklch(20% 0.006 248)" nve-sys-scrollbar-thumb-color: "oklch(88% 0.006 248)" nve-sys-scrollbar-track-color: "oklch(0% 0 0 / 0.0118)" nve-sys-status-color: "oklch(60% 0.006 248)" nve-sys-status-failed-color: "oklch(55% 0.19 18)" nve-sys-status-finished-color: "oklch(52% 0.13 147)" nve-sys-status-ignored-color: "oklch(53% 0.006 248)" nve-sys-status-pending-color: "oklch(53% 0.006 248)" nve-sys-status-queued-color: "oklch(47% 0.16 270)" nve-sys-status-restarting-color: "oklch(54% 0.14 76)" nve-sys-status-running-color: "oklch(54% 0.19 250)" nve-sys-status-scheduled-color: "oklch(47% 0.16 292)" nve-sys-status-starting-color: "oklch(53% 0.09 178)" nve-sys-status-stopping-color: "oklch(56% 0.22 343)" nve-sys-status-unknown-color: "oklch(0% 0 0)" nve-sys-support-accent-color: "oklch(55% 0.2 250)" nve-sys-support-accent-emphasis-color: "oklch(54% 0.19 250)" nve-sys-support-accent-muted-color: "oklch(95% 0.03 250)" nve-sys-support-color: "oklch(60% 0.006 248)" nve-sys-support-danger-color: "oklch(55% 0.19 18)" nve-sys-support-danger-emphasis-color: "oklch(55% 0.19 18)" nve-sys-support-danger-muted-color: "oklch(93% 0.03 18)" nve-sys-support-emphasis-color: "oklch(60% 0.006 248)" nve-sys-support-muted-color: "oklch(90% 0.006 248)" nve-sys-support-success-color: "oklch(52% 0.13 147)" nve-sys-support-success-emphasis-color: "oklch(52% 0.13 147)" nve-sys-support-success-muted-color: "oklch(94% 0.03 147)" nve-sys-support-warning-color: "oklch(81% 0.17 95)" nve-sys-support-warning-emphasis-color: "oklch(73% 0.15 95)" nve-sys-support-warning-muted-color: "oklch(98% 0.05 95)" nve-sys-text-black-color: "oklch(0% 0 0)" nve-sys-text-color: "oklch(20% 0.006 248)" nve-sys-text-emphasis-color: "oklch(20% 0.006 248)" nve-sys-text-link-color: "oklch(20% 0.006 248)" nve-sys-text-link-disabled-color: "oklch(94% 0.006 248)" nve-sys-text-link-emphasis-color: "oklch(55% 0.2 250)" nve-sys-text-link-hover-color: "oklch(54% 0.19 250)" nve-sys-text-link-visited-color: "oklch(52% 0.18 310)" nve-sys-text-muted-color: "oklch(53% 0.006 248)" nve-sys-text-placeholder-color: "oklch(65% 0.006 248)" nve-sys-text-white-color: "oklch(100% 0 0)" nve-sys-visualization-categorical-amber: "oklch(78% 0.17 76)" nve-sys-visualization-categorical-cyan: "oklch(72% 0.11 212)" nve-sys-visualization-categorical-grass: "oklch(61% 0.14 147)" nve-sys-visualization-categorical-lavender: "oklch(56% 0.18 310)" nve-sys-visualization-categorical-nova: "oklch(81% 0.17 95)" nve-sys-visualization-categorical-pear: "oklch(80% 0.2 125)" nve-sys-visualization-categorical-pumpkin: "oklch(69% 0.19 51)" nve-sys-visualization-categorical-red: "oklch(60% 0.2 18)" nve-sys-visualization-categorical-rose: "oklch(61% 0.21 343)" nve-sys-visualization-categorical-seafoam: "oklch(64% 0.11 183)" nve-sys-visualization-categorical-slate: "oklch(60% 0.006 248)" nve-sys-visualization-categorical-violet: "oklch(51% 0.17 292)" nve-sys-visualization-sequential-diverging-red-green-100: "oklch(49.9% 0.159 23.4)" nve-sys-visualization-sequential-diverging-red-green-200: "oklch(59.6% 0.195 23.8)" nve-sys-visualization-sequential-diverging-red-green-300: "oklch(68.4% 0.193 22)" nve-sys-visualization-sequential-diverging-red-green-400: "oklch(83.3% 0.083 18.1)" nve-sys-visualization-sequential-diverging-red-green-500: "oklch(94% 0.006 248)" nve-sys-visualization-sequential-diverging-red-green-600: "oklch(86.4% 0.117 148.8)" nve-sys-visualization-sequential-diverging-red-green-700: "oklch(72.5% 0.176 148.7)" nve-sys-visualization-sequential-diverging-red-green-800: "oklch(62.7% 0.157 148.3)" nve-sys-visualization-sequential-diverging-red-green-900: "oklch(47.5% 0.109 150.4)" nve-sys-visualization-sequential-diverging-virdis-100: "oklch(91.8% 0.187 102.2)" nve-sys-visualization-sequential-diverging-virdis-1000: "oklch(49.1% 0.083 242.3)" nve-sys-visualization-sequential-diverging-virdis-1100: "oklch(45.3% 0.094 261.6)" nve-sys-visualization-sequential-diverging-virdis-1200: "oklch(41.9% 0.108 278.7)" nve-sys-visualization-sequential-diverging-virdis-1300: "oklch(37.1% 0.124 293.4)" nve-sys-visualization-sequential-diverging-virdis-1400: "oklch(33.3% 0.134 306.3)" nve-sys-visualization-sequential-diverging-virdis-1500: "oklch(27.6% 0.132 318.4)" nve-sys-visualization-sequential-diverging-virdis-200: "oklch(85.9% 0.19 115)" nve-sys-visualization-sequential-diverging-virdis-300: "oklch(82.1% 0.194 126.8)" nve-sys-visualization-sequential-diverging-virdis-400: "oklch(77.5% 0.187 137.2)" nve-sys-visualization-sequential-diverging-virdis-500: "oklch(73.4% 0.164 147.5)" nve-sys-visualization-sequential-diverging-virdis-600: "oklch(69.1% 0.145 157.3)" nve-sys-visualization-sequential-diverging-virdis-700: "oklch(64.6% 0.12 169.6)" nve-sys-visualization-sequential-diverging-virdis-800: "oklch(60.2% 0.1 184.4)" nve-sys-visualization-sequential-diverging-virdis-900: "oklch(56.8% 0.087 200.1)" nve-sys-visualization-trend-negative-color: "oklch(60% 0.2 18)" nve-sys-visualization-trend-negative-emphasis-color: "oklch(55% 0.19 18)" nve-sys-visualization-trend-positive-color: "oklch(61% 0.14 147)" nve-sys-visualization-trend-positive-emphasis-color: "oklch(52% 0.13 147)" typography: display-xl: fontFamily: "'Inter', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif" fontSize: "50px" fontWeight: 400 lineHeight: "1.12" display: fontFamily: "'Inter', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif" fontSize: "40px" fontWeight: 400 lineHeight: "1.12" heading: fontFamily: "'Inter', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif" fontSize: "24px" fontWeight: 600 lineHeight: "1.25" body: fontFamily: "'Inter', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif" fontSize: "14px" fontWeight: 400 lineHeight: "1.375" label: fontFamily: "'Inter', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif" fontSize: "14px" fontWeight: 500 lineHeight: "1.375" code: fontFamily: "'Roboto Mono', 'Lucida Console', Monaco, monospace, sans-serif" fontSize: "14px" fontWeight: 400 lineHeight: "1.5" rounded: none: "0px" xs: "4px" sm: "6px" md: "8px" lg: "14px" full: "999px" spacing: none: "0px" xs: "8px" sm: "12px" md: "16px" lg: "24px" xl: "32px" xxl: "48px" --- ## Overview 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/](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](https://nvidia.github.io/elements/docs/cli/) and [MCP server](https://nvidia.github.io/elements/docs/mcp/). ## Colors 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](https://nvidia.github.io/elements/docs/foundations/themes/tokens/) for the complete token inventory and current CSS custom-property names. ## Typography 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](https://nvidia.github.io/elements/docs/foundations/typography/) while preserving semantic HTML headings, labels, lists, and paragraphs. ## Layout 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](https://nvidia.github.io/elements/docs/foundations/layout/) for supported gap, padding, alignment, grid, and responsive patterns. ## Elevation & Depth 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. ## Shapes 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. ## Components 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](https://nvidia.github.io/elements/llms.txt) - Use [nve-button](https://nvidia.github.io/elements/docs/elements/button/) and [nve-icon-button](https://nvidia.github.io/elements/docs/elements/icon-button/) for actions. - Use [nve-input](https://nvidia.github.io/elements/docs/elements/input/), [nve-select](https://nvidia.github.io/elements/docs/elements/select/), and the form guidance for data entry. - Use [nve-card](https://nvidia.github.io/elements/docs/elements/card/) and [nve-page](https://nvidia.github.io/elements/docs/elements/page/) for durable content structure. - Use [nve-alert](https://nvidia.github.io/elements/docs/elements/alert/), badges, and notifications for status communication. - Use [nve-dialog](https://nvidia.github.io/elements/docs/elements/dialog/), dropdowns, tooltips, and toggletips for temporary top-layer interaction. - Use the [data grid](https://nvidia.github.io/elements/docs/elements/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 and Don't **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.