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..3f80ffd3d 100644 --- a/projects/site/src/index.md +++ b/projects/site/src/index.md @@ -10,31 +10,168 @@ #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.

+ +
+
+

NVIDIA Elements

+

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

-
-

Framework Agnostic

-

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

+ +
+ + + +
+

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.

+
+ +
-
-

Agent-Ready Tooling

-

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

+ +
+
+

Editor and agent tools

+

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

+
+
-
-

Stable API Contracts

-

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

+ +
+
+

Framework support

+

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

+
+
-
- + +
+
+

1. Install the CLI

+

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

```shell # install CLI @@ -47,105 +184,28 @@ nve project.create 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 + -```css -/* CSS */ -@import '@nvidia-elements/themes/index.css'; -``` - -```typescript -// JavaScript -import '@nvidia-elements/core/button/define.js'; -``` + + -```html - + hello there ```
- - -{% svg-logos %} - -
- - Install - - - CLI - - - MCP - - - Cursor - - - Codex - - - Claude - - - GitHub - - - npm - - - DESIGN.md - - - TypeScript - - - JavaScript - - - Golang - - - Hugo - - - Lit - - - Angular - - - Vue - - - Preact - - - NextJS - - - React - - - SolidJS - - - Svelte - - - Nuxt - -
+
+ +