From 915a4537ffda5a5a605006cb688540a88acaf74c Mon Sep 17 00:00:00 2001 From: Cormac Rada Date: Tue, 8 Sep 2026 16:53:39 -0700 Subject: [PATCH 1/2] chore(docs): refine getting started layout Signed-off-by: Cormac Rada --- .../config/vocabularies/Elements/accept.txt | 2 + projects/site/src/index.md | 319 +++++++++++------- 2 files changed, 190 insertions(+), 131 deletions(-) diff --git a/config/vale/styles/config/vocabularies/Elements/accept.txt b/config/vale/styles/config/vocabularies/Elements/accept.txt index ca96f2932..c9db624db 100644 --- a/config/vale/styles/config/vocabularies/Elements/accept.txt +++ b/config/vale/styles/config/vocabularies/Elements/accept.txt @@ -58,8 +58,10 @@ Preact Svelte SolidJS Figma +Claude GitLab Gitlab +Hugo semver namespace namespaces diff --git a/projects/site/src/index.md b/projects/site/src/index.md index 97b39dc6b..346dc9f2d 100644 --- a/projects/site/src/index.md +++ b/projects/site/src/index.md @@ -10,142 +10,199 @@ #docs-main #doc-content { max-width: 1154px; } + + .getting-started-page a { + color: inherit; + text-decoration: none; + } + + .getting-started-page a:has(.getting-started-tile), + .getting-started-page a:has(.getting-started-tile) nve-card, + .getting-started-page a:has(.getting-started-tile) nve-card-content { + cursor: pointer; + } + + .getting-started-feature-card { + --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted); + --border-radius: var(--nve-ref-border-radius-md); + --box-shadow: none; + } + + .getting-started-feature-card nve-logo, + .getting-started-tile nve-logo { + --width: var(--nve-ref-size-900); + --height: var(--nve-ref-size-900); + } + + .getting-started-tile { + --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted); + --border-radius: var(--nve-ref-border-radius-md); + --box-shadow: none; + position: relative; + transition: box-shadow var(--nve-ref-animation-duration-150), transform var(--nve-ref-animation-duration-150); + } + + .getting-started-tile-arrow { + --color: var(--nve-sys-text-emphasis-color); + --height: var(--nve-ref-size-400); + --width: var(--nve-ref-size-400); + opacity: 0; + position: absolute; + inset-block-start: var(--nve-ref-size-300); + inset-inline-end: var(--nve-ref-size-300); + transition: opacity var(--nve-ref-animation-duration-150); + } + + .getting-started-page a:hover .getting-started-tile { + --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-emphasis); + --box-shadow: var(--nve-ref-shadow-100); + transform: translateY(calc(-1 * var(--nve-ref-size-50))); + } + + .getting-started-page a:hover .getting-started-tile-arrow, + .getting-started-page a:focus-visible .getting-started-tile-arrow { + opacity: 1; + } + + .getting-started-tile nve-card-content { + --padding: var(--nve-ref-space-lg); + min-height: calc(var(--nve-ref-size-900) * 3); + } + + .getting-started-tile svg { + width: var(--nve-ref-size-900); + height: var(--nve-ref-size-900); + transform: scale(var(--getting-started-logo-scale, 1)); + transform-origin: center; + } + + /* Normalize logo artwork bounds within the shared 36px canvas. */ + .getting-started-tile svg#go-svg { + --getting-started-logo-scale: 1.65; + } + -
-

NVIDIA Elements

-

The Design Language and UI Agent Harness for AI/ML Factories, Robotics, and Autonomous Vehicles

-
- -
-
-

Built for AI Infrastructure

-

Operational UI Foundations for AI/ML workloads, autonomous vehicle tools, and robotics consoles.

-
-
-

Framework Agnostic

-

Web Components run in React, Angular, Vue, Svelte, Lit, plain HTML, server-rendered templates, and mixed stacks.

-
-
-

Agent-Ready Tooling

-

CLI and MCP expose component APIs, tokens, examples, imports, validation, and setup to terminals and AI assistants.

+ +
+
+

Getting started with NVIDIA Elements

+

The design language and UI agent harness for AI/ML factories, robotics, and autonomous vehicles.

-
-

Stable API Contracts

-

Skills and lint guide authoring best practices, common Design System UI patterns, and automated static analysis.

+ +
+ + + +
+

Built for AI infrastructure

+

Operational UI foundations for AI/ML workloads, autonomous vehicle tools, and robotics consoles.

+
+ + + + + +
+

Framework agnostic

+

Web Components run in React, Angular, Vue, Svelte, Lit, plain HTML, server-rendered templates, and mixed stacks.

+
+ + + + + +
+

Agent-ready tooling

+

CLI and MCP expose component APIs, tokens, examples, imports, validation, and setup to terminals and AI assistants.

+
+ + + + + +
+

Stable API contracts

+

Skills and lint guide authoring best practices, common Design System UI patterns, and automated static analysis.

+
+ +
-
- -```shell -# install CLI -curl -fsSL {{ELEMENTS_PAGES_BASE_URL}}/install.sh | bash +
+
+

1. Install the CLI

+

Install the CLI, scaffold a project, and configure dependencies and MCP tools in three commands.

+ +
+ + +
+
+
+

2. Import into your project

+

Elements ships as Web Components, so it drops into any stack. Import the theme, a component definition, or use the tag directly.

+ +
+ + +
+
-# create a new project -nve project.create +
-# configure dependencies and MCP tools -nve project.setup -``` +
+
+

Editor and agent tools

+

Elements is ready for AI-assisted development, with first-class support across editors, agents, and package registries.

+
+ +
-
- +
+
+

Framework support

+

Elements is framework-agnostic. Web Components run natively across these stacks and static-site generators.

+
+ +
+ + +
From 06254152779f9dcf67570fb4b5e0a0424cc0daf6 Mon Sep 17 00:00:00 2001 From: Cormac Rada Date: Wed, 9 Sep 2026 10:13:36 -0700 Subject: [PATCH 2/2] fix(docs): correct getting started code blocks Signed-off-by: Cormac Rada --- projects/site/src/index.md | 137 +++++++++++++++++++------------------ 1 file changed, 70 insertions(+), 67 deletions(-) diff --git a/projects/site/src/index.md b/projects/site/src/index.md index 346dc9f2d..3f80ffd3d 100644 --- a/projects/site/src/index.md +++ b/projects/site/src/index.md @@ -83,13 +83,13 @@ -
+
-

Getting started with NVIDIA Elements

+

NVIDIA Elements

The design language and UI agent harness for AI/ML factories, robotics, and autonomous vehicles.

-
+
@@ -113,7 +113,7 @@

Agent-ready tooling

-

CLI and MCP expose component APIs, tokens, examples, imports, validation, and setup to terminals and AI assistants.

+

CLI and MCP expose component APIs, tokens, examples, imports, validation, and setup to terminals and AI assistants.

 @@ -122,49 +122,27 @@

Stable API contracts

-

Skills and lint guide authoring best practices, common Design System UI patterns, and automated static analysis.

+

Skills and lint guide authoring best practices, common Design System UI patterns, and automated static analysis.

-
-
-

1. Install the CLI

-

Install the CLI, scaffold a project, and configure dependencies and MCP tools in three commands.

- -
- - -
-
-
-

2. Import into your project

-

Elements ships as Web Components, so it drops into any stack. Import the theme, a component definition, or use the tag directly.

- -
- - -
-
- -
-

Editor and agent tools

Elements is ready for AI-assisted development, with first-class support across editors, agents, and package registries.

-
@@ -173,36 +151,61 @@

Framework support

Elements is framework-agnostic. Web Components run natively across these stacks and static-site generators.

-
- {% svg-logo 'typescript' %}TypeScript - {% svg-logo 'javascript' %}JavaScript - {% svg-logo 'go' %}Go - {% svg-logo 'hugo' %}Hugo - {% svg-logo 'lit' %}Lit - {% svg-logo 'angular' %}Angular - {% svg-logo 'vue' %}Vue - {% svg-logo 'preact' %}Preact - {% svg-logo 'nextjs' %}Next.js - {% svg-logo 'react' %}React - {% svg-logo 'solidjs' %}SolidJS - {% svg-logo 'svelte' %}Svelte - {% svg-logo 'nuxt' %}Nuxt +
- - +
+
+

1. Install the CLI

+

Install the CLI, scaffold a project, and configure dependencies and MCP tools in three commands.

+ +```shell +# install CLI +curl -fsSL {{ELEMENTS_PAGES_BASE_URL}}/install.sh | bash + +# create a new project +nve project.create + +# configure dependencies and MCP tools +nve project.setup +``` + +
+
+

2. Import into your project

+

Elements ships as Web Components, so it drops into any stack. Import the theme, a component definition, or use the tag directly.

+ +```html + + + + + + + +hello there +``` + +
+ +
+ +