anubhavg-icpl/vibe

---

name: acd-cinematic-nvidia-design description: Reference DESIGN.md for GPU-vendor cinematic: chrome-black canvas, signature green action, video-led hero, hard-edged grotesque headlines. Use when building UI components, applying design tokens, or implementing visual styles for cinematic nvidia. license: CC-BY-NC-SA-4.0 metadata: risk: unknown source: community kind: mode category: design-systems tags: [design-system, ui, cinematic, claude-design]

NVIDIA — Cinematic Compute Design Mode

You are an expert in the NVIDIA — Cinematic Compute aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

Source DESIGN.md

Reference DESIGN.md for GPU-vendor cinematic: chrome-black canvas, signature green action, video-led hero, hard-edged grotesque headlines.

1. Visual Theme & Atmosphere

Cinematic compute. The page reads like a hardware launch reel — black canvas, full-bleed video of die shots and rendered scenes, green CTA punching through. Type stays sharp, narrow, almost industrial. There is exactly one accent and it is the green; everything else is grayscale.

Mood: high-energy, precision-engineered, motion-forward.

2. Color Palette & Roles

--bg:              #000000   /* canvas */
--bg-alt:          #0d0d0d
--surface:         #1a1a1a
--surface-2:       #2a2a2a
--text:            #ffffff
--text-muted:      #b8b8b8
--text-dim:        #767676
--border:          #333333
--border-strong:   #4d4d4d

--accent:          #76b900   /* signature green — primary CTA + brand */
--accent-hover:    #8fd400
--accent-deep:     #5a8d00   /* hover-pressed, dark variants */
--accent-soft:     #c9e892   /* tinted callouts only */

--secondary:       #10b1fb   /* developer / data accent, sparingly */
--success:         #76b900
--warning:         #ffb800
--danger:          #d13438

Rule: green and only green for primary action and brand mark. Cyan --secondary is reserved for developer surfaces (CUDA, RAPIDS, NeMo). Never gradient between the two; they are not partners.

3. Typography Rules

• Display + headlines: NVIDIA Sans (NALA), fallback Helvetica Neue, Arial, system. Weight 500–700, tight tracking (−1% at large sizes).
• Body: NVIDIA Sans regular, weight 400, 16–18px, line-height 1.5.
• UI labels: NVIDIA Sans weight 500, 12–14px, uppercase only for category eyebrows (tracked +6%).
• Numerals: tabular figures on spec tables, benchmark charts, pricing.
• Mono: JetBrains Mono, fallback SF Mono. Used for code samples, command snippets, telemetry.

Scale: 12 / 14 / 16 / 18 / 24 / 32 / 48 / 72 / 96 / 128.

Display headlines go big. 96px and up for product launches.

4. Component Stylings

Buttons

• Primary: --accent fill, black text, radius 4px, padding 12/24, weight 600. Hover: --accent-hover. No lift, no scale.
• Secondary: transparent fill, 1px white border, white text. Hover: 1px --accent border.
• Tertiary / link: white text, green underline on hover.
• Destructive: --danger fill, white text, only on confirm modals.

Cards / product tiles

• --surface fill, 1px --border, radius 4px. Padding 24.
• Hero product cards run full-bleed images with text overlay; gradient scrim linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%) for legibility.
• Hover: 1px --accent border, 200ms ease. No scale, no glow.

Inputs

• --bg-alt fill, 1px --border-strong, radius 4px, padding 10/14. Focus: 2px --accent ring with 1px offset.

Nav

• Fixed top, --bg fill with 90% opacity and 8px backdrop blur. White links, green underline on active. Mega-menu opens flush, full-width, dark.

Video hero

• Autoplay muted, 100vw × 80vh minimum. Loop. Subtle bottom scrim for headline legibility. Reduced-motion users get a static still frame.

5. Layout Principles

• Full-bleed hero (100vw, 80–100vh).
• 1440px max for content sections, 32px gutter, 12-column.
• 8px base. 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128.
• Generous vertical whitespace between sections (96–128px).
• Spec tables break grid and run dense.

6. Depth & Elevation

Flat surfaces with hard borders. Depth comes from:

• Surface tonal shift (--bg → --surface → --surface-2)
• 1px --border and --border-strong
• Video and image hierarchy

Modals get 0 24px 64px rgba(0, 0, 0, 0.72) over a 70% black scrim. No soft glows on cards. Reserve glow effects for chart highlights only.

7. Do's and Don'ts

Do

• Open with full-bleed video. Die shots, rendered scenes, lab footage, robotaxi POV.
• Oversize the launch headline. 96px+.
• Lock the green to action and brand; let chrome stay grayscale.
• Use tabular numerals for benchmark deltas (1.7×, 2.5×, +43%).
• Keep corners at 4px. Hard edges read as engineered.

Don't

• Mix green and cyan in the same component.
• Use light backgrounds. NVIDIA marketing is dark by default.
• Soften corners past 8px.
• Add purple gradients, glassmorphism, or pastel accents.
• Replace video hero with stock photography.

8. Responsive Behavior

• Hero video remains full-bleed; headline scales 128 → 40 on mobile.
• Mega-menu collapses to drawer at 1024px, full-screen overlay below 768px.
• Spec tables become horizontally scrollable below 640px (preserve density, no stacking).
• Autoplay disabled on mobile per bandwidth respect; static poster frame substitutes.
• Body type holds 16px on mobile.

9. Agent Prompt Guide

Bias: black #000000 canvas, signature green #76b900 reserved for primary action and brand mark only, NVIDIA Sans / Helvetica Neue tight grotesque, oversized display headlines (96px+), full-bleed video hero, 4px radii, tabular numerals on benchmark tables, mega-menu nav with backdrop blur.

Reject: light-mode marketing pages, multi-accent palettes, soft pastel gradients, glassmorphism, rounded-pill buttons, hero stock photography in place of video, scaled hover lifts, decorative illustration in chrome.

When to Use This Mode

• When user references nvidia or the cinematic family as inspiration
• When building UI in the cinematic aesthetic
• When applying this brand's color palette, typography, or layout patterns
• When critiquing UI for adherence to this aesthetic