prismdinstrument

EXTRACTED · 10 SECTIONS · 14 COLORS · GRADE C

nvidia.com

Accent #5e6ad2 · NVIDIA-EMEA — every value below measured via getComputedStyle(), not asserted by hand.

colors

faces

shadows

keyframes

DESIGN.md tokens.json

real render · source of truth

nvidia.com is built on a pure-white canvas (rgb(255,255,255)). The system uses rgb(118, 185, 0) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside NVIDIA-EMEA as the primary typeface. NVIDIA-EMEA is paired with Font Awesome 6 Sharp for secondary roles. A layered elevation system (4 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 23 keyframe animations plus transition-driven interactions.

Color — roles, semantics & the full census

14 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 18.88:1

Ink

#111111

AAA 18.88:1

Accent

#5e6ad2

AA 4.7:1

Line

#666666

AA 5.74:1

Semantic states

No semantic state colors detected — this system signals state through weight & motion, not hue.

14 colors mined from the live renderexpand

Type — the ladder, in the real face

5 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl48px · 700

display md

display-md36px · 700 · ×1.33

body

body16px · 400 · ×2.25

caption

caption24px · 400 · ×0.67

caption sm

caption-sm11px · 700 · ×2.18

Depth — elevation is extracted, not invented

4 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1

shadow-2

shadow-3

shadow-4

Motion — easings, transitions & live keyframes

1 easing curve · 23 keyframes · hover a tile to preview

Easing & transitions

transition-3ease-out

23 keyframe animations extracted

fa-beat

fa-bounce

fa-fade

fa-beat-fade

fa-flip

fa-shake

fa-spin

icon-rotate

icon-rotate-rev

progressBar

slideAnimationLeft

slideAnimationRight

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 4px

sm · 8px

md · 12px

base · 16px

lg · 24px

xl · 32px

2xl · 48px

3xl · 64px

Radius

none
0px

xs
2px

sm
8px

md
14px

lg
20px

xl
32px

full
9999px

Components — the closed vocabulary

8 component families · 26 variants counted on the live DOM

Component	Variants found
heading H3	×6
divider	×6
status Badge	×5
heading H2	×3
badges	×2
tabs	×2
nav Links	×1
links	×1

Component style specs (§4)expand

Buttons

Ghost

Background: transparent
Text: #222222
Padding: 5px 0px 5px 15px
Radius: 0px
Font: 16px weight 400
Use: Subtle action, toolbar, nav button

Cards & Containers

Standard Card

Background: transparent
Padding: 0px 0px 0px 20px
Radius: 0px
Use: Content containers, listing items

Tabs

Ghost Tab

Background: transparent
Text: #000000
Padding: 0px 0px 10px
Radius: 0px
Font: 16px weight 400
Use: Navigation tabs, filter tabs

Layout — structure & dimensions

5 layout metrics measured

max Width346px

header Height0px

sidebar Width0px

gap16px

container Padding24px

Responsive — real breakpoints

26 media-query stops read from the live CSS

320px

374px

375px

399px

400px

425px

426px

480px

500px

530px

550px

600px

630px

639px

640px

768px

896px

954px

1023px

1024px

1025px

1199px

1290px

1349px

1350px

3000px

Do's & Don'ts

15 enforceable rules pulled verbatim from the spec

Use NVIDIA-EMEA as the primary typeface — it defines the brand personality

Use the extracted shadow patterns for elevation — they are tuned to match the brand palette

Use Brand Green (`#76b900`) as the primary accent — it's the brand's signature interactive color

Keep navigation fixed to the top — the design uses a persistent navigation pattern

Maintain nav height at 45px — consistent vertical space for the navigation bar

Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room

Make the navigation fixed — it stays visible during scroll, signaling content depth

Include a search input directly in the nav — discoverability is a primary UX value here

Use a 3-column grid on desktop — density matters for this content type

Don't

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't invent new shadow values — use only the extracted shadow levels

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence

Don't put a CTA button in the nav — this design uses links only at the top

Don't over-build the footer — this design keeps it minimal (1 cols, 0 links)

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the nvidia.com design system. Canvas #ffffff · ink #111111 · accent #5e6ad2. Type: NVIDIA-EMEA — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.

Every value above was getComputedStyle-verified.

$ npx prismd add nvidia

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press