workbuddy_skills/open-design/design-systems/nvidia/DESIGN-id.md

# Design System Terinspirasi dari NVIDIA

> Category: Media & Konsumen
> Komputasi GPU. Energi hijau-hitam, estetika kekuatan teknis.

## 1. Tema Visual & Atmosfer

Situs web NVIDIA adalah pengalaman teknologi dengan kontras tinggi yang mengomunikasikan kekuatan komputasi mentah melalui restraint desain. Halaman ini dibangun di atas fondasi hitam pekat (`#000000`) dan putih (`#ffffff`), diperkuat oleh hijau khas NVIDIA (`#76b900`) -- sebuah warna yang begitu spesifik sehingga berfungsi sebagai sidik jari merek. Ini bukan hijau alam yang rimbun; ini adalah hijau elektrik berbias lime dari cahaya yang dirender GPU, sebuah warna yang berada di antara chartreuse dan kelly green yang langsung mengisyaratkan "NVIDIA" bagi siapa pun di dunia teknologi.

Keluarga font kustom NVIDIA-EMEA (dengan fallback Arial dan Helvetica) menciptakan suara tipografi yang bersih dan industrial. Heading berukuran 36px bold dengan line-height ketat 1.25 menghasilkan blok teks yang padat dan berwibawa. Font ini tidak memiliki kegembiraan geometris khas sans-serif Silicon Valley -- ia bersifat Eropa, pragmatis, dan berorientasi rekayasa. Teks isi berjalan pada 15-16px, nyaman dibaca namun tidak berlebihan, menjaga kesan bahwa ruang layar dioptimalkan seperti memori GPU.

Yang membedakan desain NVIDIA dari situs teknologi berlatar gelap lainnya adalah penggunaan aksen hijau yang disiplin. Warna `#76b900` muncul pada border (`2px solid #76b900`), garis bawah tautan (`underline 2px rgb(118, 185, 0)`), dan CTA -- tetapi tidak pernah sebagai latar belakang atau area permukaan besar pada konten utama. Hijau adalah sinyal, bukan permukaan. Dikombinasikan dengan sistem bayangan dalam (`rgba(0, 0, 0, 0.3) 0px 0px 5px`) dan border radius minimal (1-2px), efek keseluruhan adalah presisi rekayasa perangkat keras yang dirender dalam piksel.

**Karakteristik Utama:**
- NVIDIA Green (`#76b900`) sebagai aksen murni -- hanya untuk border, garis bawah, dan sorotan interaktif
- Hitam (`#000000`) sebagai latar belakang dominan dengan teks putih (`#ffffff`) pada bagian gelap
- Font kustom NVIDIA-EMEA dengan fallback Arial/Helvetica -- industrial, Eropa, bersih
- Line-height ketat (1.25 untuk heading) menciptakan blok teks yang padat dan berwibawa
- Border radius minimal (1-2px) -- sudut tajam dan terstruktur di seluruh antarmuka
- Tombol berborder hijau (`2px solid #76b900`) sebagai pola interaktif utama
- Sistem ikon Font Awesome 6 Pro/Sharp dengan weight 900 untuk ikonografi yang tajam
- Arsitektur multi-framework (PrimeReact, Fluent UI, Element Plus) yang memungkinkan komponen interaktif yang kaya

## 2. Palet Warna & Perannya

### Merek Primer
- **NVIDIA Green** (`#76b900`): Tanda tangan -- border, garis bawah tautan, outline CTA, indikator aktif. Tidak pernah digunakan sebagai isian area permukaan besar.
- **Hitam Pekat** (`#000000`): Latar belakang halaman utama, teks pada permukaan terang, nada dominan.
- **Putih Murni** (`#ffffff`): Teks pada latar gelap, latar belakang bagian terang, permukaan kartu.

### Palet Merek Diperluas
- **NVIDIA Green Light** (`#bff230`): Aksen lime cerah untuk sorotan dan state hover.
- **Orange 400** (`#df6500`): Aksen hangat untuk peringatan, lencana unggulan, atau konteks terkait energi.
- **Yellow 300** (`#ef9100`): Aksen hangat sekunder, sorotan kategori produk.
- **Yellow 050** (`#feeeb2`): Permukaan hangat terang untuk latar belakang callout.

### Status & Semantik
- **Red 500** (`#e52020`): State error, aksi destruktif, peringatan kritis.
- **Red 800** (`#650b0b`): Merah dalam untuk latar belakang peringatan parah.
- **Green 500** (`#3f8500`): State sukses, indikator positif (lebih gelap dari hijau merek).
- **Blue 700** (`#0046a4`): Aksen informasional, alternatif hover tautan.

### Dekoratif
- **Purple 800** (`#4d1368`): Ungu dalam untuk ujung gradien, konteks premium/AI.
- **Purple 100** (`#f9d4ff`): Tint permukaan ungu terang.
- **Fuchsia 700** (`#8c1c55`): Aksen kaya untuk promosi khusus atau konten unggulan.

### Skala Netral
- **Gray 300** (`#a7a7a7`): Teks redup, label nonaktif.
- **Gray 400** (`#898989`): Teks sekunder, metadata.
- **Gray 500** (`#757575`): Teks tersier, placeholder, footer.
- **Gray Border** (`#5e5e5e`): Border halus, garis pembagi.
- **Near Black** (`#1a1a1a`): Permukaan gelap, latar belakang kartu pada halaman hitam.

### State Interaktif
- **Link Default (latar gelap)** (`#ffffff`): Tautan putih pada latar belakang gelap.
- **Link Default (latar terang)** (`#000000`): Tautan hitam dengan garis bawah hijau pada latar belakang terang.
- **Link Hover** (`#3860be`): Pergeseran biru saat hover pada semua varian tautan.
- **Button Hover** (`#1eaedb`): Sorotan teal untuk state hover tombol.
- **Button Active** (`#007fff`): Biru cerah untuk state tombol aktif/ditekan.
- **Focus Ring** (`#000000 solid 2px`): Outline hitam untuk fokus keyboard.

### Bayangan & Kedalaman
- **Card Shadow** (`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`): Bayangan ambient halus untuk kartu yang ditinggikan.

## 3. Aturan Tipografi

### Keluarga Font
- **Primer**: `NVIDIA-EMEA`, dengan fallback: `Arial, Helvetica, sans-serif`
- **Font Ikon**: `Font Awesome 6 Pro` (weight 900 untuk ikon solid, 700 untuk regular)
- **Icon Sharp**: `Font Awesome 6 Sharp` (weight 300 untuk ikon light, 400 untuk regular)

### Hierarki

| Peran | Font | Ukuran | Weight | Line Height | Letter Spacing | Catatan |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25 (ketat) | normal | Headline dengan dampak maksimum |
| Section Heading | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25 (ketat) | normal | Judul bagian, heading kartu |
| Sub-heading | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75 (longgar) | normal | Deskripsi fitur, subjudul |
| Card Title | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25 (ketat) | normal | Heading kartu dan modul |
| Body Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67 (longgar) | normal | Isi yang ditekankan, paragraf utama |
| Body | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | normal | Teks baca standar |
| Body Bold | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | normal | Label kuat, item navigasi |
| Body Small | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67 (longgar) | normal | Konten sekunder, deskripsi |
| Body Small Bold | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | normal | Konten sekunder yang ditekankan |
| Button Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25 (ketat) | normal | Tombol CTA utama |
| Button | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25 (ketat) | normal | Tombol standar |
| Button Compact | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00 (ketat) | 0.144px | Tombol kecil/ringkas |
| Link | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | Tautan navigasi |
| Link Uppercase | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | `text-transform: uppercase`, label navigasi |
| Caption | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | normal | Metadata, stempel waktu |
| Caption Small | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25 (ketat) | normal | Teks kecil, legal |
| Micro Label | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | normal | `text-transform: uppercase`, lencana mungil |
| Micro | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00 (ketat) | normal | Teks UI terkecil |

### Prinsip
- **Bold sebagai suara default**: NVIDIA sangat mengandalkan weight 700 untuk heading, tombol, tautan, dan label. Weight 400 dicadangkan untuk teks isi dan deskripsi -- semua hal lain menggunakan bold, memancarkan kepercayaan diri dan otoritas.
- **Heading ketat, isi longgar**: Line-height heading secara konsisten adalah 1.25 (ketat), sementara teks isi dilonggarkan menjadi 1.50-1.67. Kontras ini menciptakan kepadatan visual di bagian atas blok konten dan keterbacaan yang nyaman dalam paragraf.
- **Uppercase untuk navigasi**: Label tautan menggunakan `text-transform: uppercase` dengan weight 700, menciptakan suara navigasi yang terbaca seperti label spesifikasi perangkat keras.
- **Tanpa tracking dekoratif**: Letter-spacing normal di seluruh antarmuka, kecuali untuk tombol ringkas (0.144px). Font itu sendiri membawa karakter industrial tanpa manipulasi tambahan.

## 4. Gaya Komponen

### Tombol

**Primer (Border Hijau)**
- Background: `transparent`
- Teks: `#000000`
- Padding: 11px 13px
- Border: `2px solid #76b900`
- Radius: 2px
- Font: 16px weight 700
- Hover: background `#1eaedb`, teks `#ffffff`
- Active: background `#007fff`, teks `#ffffff`, border `1px solid #003eff`, scale(1)
- Focus: background `#1eaedb`, teks `#ffffff`, outline `#000000 solid 2px`, opacity 0.9
- Penggunaan: CTA utama ("Learn More", "Explore Solutions")

**Sekunder (Border Hijau Tipis)**
- Background: transparent
- Border: `1px solid #76b900`
- Radius: 2px
- Penggunaan: Aksi sekunder, CTA alternatif

**Ringkas / Inline**
- Font: 14.4px weight 700
- Letter-spacing: 0.144px
- Line-height: 1.00
- Penggunaan: CTA inline, navigasi ringkas

### Kartu & Kontainer
- Background: `#ffffff` (terang) atau `#1a1a1a` (bagian gelap)
- Border: none (tepi bersih) atau `1px solid #5e5e5e`
- Radius: 2px
- Bayangan: `rgba(0, 0, 0, 0.3) 0px 0px 5px 0px` untuk kartu yang ditinggikan
- Hover: intensifikasi bayangan
- Padding: 16-24px internal

### Tautan
- **Pada Latar Gelap**: `#ffffff`, tanpa garis bawah, hover beralih ke `#3860be`
- **Pada Latar Terang**: `#000000` atau `#1a1a1a`, garis bawah `2px solid #76b900`, hover beralih ke `#3860be`, garis bawah dihapus
- **Tautan Hijau**: `#76b900`, hover beralih ke `#3860be`
- **Tautan Redup**: `#666666`, hover beralih ke `#3860be`

### Navigasi
- Latar belakang hitam pekat (`#000000`)
- Logo rata kiri, wordmark NVIDIA yang menonjol
- Tautan: NVIDIA-EMEA 14px weight 700 uppercase, `#ffffff`
- Hover: pergeseran warna, tanpa perubahan garis bawah
- Dropdown mega-menu untuk kategori produk
- Sticky saat di-scroll dengan backdrop

### Perlakuan Gambar
- Render produk/GPU sebagai gambar hero, sering full-width
- Gambar screenshot dengan bayangan halus untuk kedalaman
- Overlay gradien hijau pada bagian hero gelap
- Kontainer avatar melingkar dengan radius 50%

### Komponen Khas

**Kartu Produk**
- Kartu putih bersih atau gelap dengan radius minimal (2px)
- Border aksen hijau atau garis bawah pada judul
- Pola heading bold + deskripsi lebih ringan
- CTA dengan border hijau di bagian bawah

**Tabel Spesifikasi Teknis**
- Tata letak grid industrial
- Latar belakang baris bergantian (pergeseran abu-abu halus)
- Label bold, nilai regular
- Sorotan hijau untuk metrik utama

**Banner Cookie/Persetujuan**
- Posisi tetap di bagian bawah
- Tombol bulat (radius 2px)
- Perlakuan border abu-abu

## 5. Prinsip Tata Letak

### Sistem Spasi
- Unit dasar: 8px
- Skala: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 15px
- Nilai padding utama: 8px, 11px, 13px, 16px, 24px, 32px
- Spasi antar bagian: padding vertikal 48-80px

### Grid & Kontainer
- Lebar konten maksimum: sekitar 1200px (terkontainer)
- Bagian hero full-width dengan teks terkontainer
- Bagian fitur: grid 2-3 kolom untuk kartu produk
- Satu kolom untuk konten artikel/blog
- Tata letak sidebar untuk dokumentasi

### Filosofi Ruang Kosong
- **Kepadatan yang bertujuan**: NVIDIA menggunakan spasi yang lebih ketat dari situs SaaS pada umumnya, mencerminkan kepadatan konten teknis. Ruang kosong ada untuk memisahkan konsep, bukan menciptakan kekosongan yang mewah.
- **Ritme bagian**: Bagian gelap berselang-seling dengan bagian putih, menggunakan warna latar belakang (bukan hanya spasi) untuk memisahkan blok konten.
- **Kepadatan kartu**: Kartu produk berdekatan satu sama lain dengan jarak 16-20px, menciptakan kesan katalog bukan galeri.

### Skala Border Radius
- Mikro (1px): Span inline, elemen mungil
- Standar (2px): Tombol, kartu, kontainer, input -- default untuk hampir semua elemen
- Lingkaran (50%): Gambar avatar, indikator tab melingkar

## 6. Kedalaman & Elevasi

| Level | Perlakuan | Penggunaan |
|-------|-----------|-----|
| Datar (Level 0) | Tanpa bayangan | Latar halaman, teks inline |
| Halus (Level 1) | `rgba(0,0,0,0.3) 0px 0px 5px 0px` | Kartu standar, modal |
| Border (Level 1b) | `1px solid #5e5e5e` | Pembagi konten, border bagian |
| Aksen hijau (Level 2) | `2px solid #76b900` | Elemen aktif, CTA, item terpilih |
| Fokus (Aksesibilitas) | outline `2px solid #000000` | Cincin fokus keyboard |

**Filosofi Bayangan**: Sistem kedalaman NVIDIA minimal dan utilitarian. Pada dasarnya hanya ada satu nilai bayangan -- blur ambient 5px pada opasitas 30% -- yang digunakan secara hemat untuk kartu dan modal. Sinyal kedalaman utama bukan bayangan, melainkan _kontras warna_: latar hitam bersebelahan dengan bagian putih, border hijau pada permukaan hitam. Ini menciptakan lapisan visual seperti perangkat keras di mana kedalaman berasal dari perbedaan material, bukan cahaya yang disimulasikan.

### Kedalaman Dekoratif
- Sapuan gradien hijau di belakang konten hero
- Gradien gelap-ke-lebih-gelap (hitam ke near-black) untuk transisi bagian
- Tanpa efek glassmorphism atau blur -- kejernihan lebih diutamakan daripada atmosfer

## 7. Perilaku Responsif

### Breakpoint
| Nama | Lebar | Perubahan Utama |
|------|-------|-------------|
| Mobile Small | <375px | Satu kolom ringkas, padding dikurangi |
| Mobile | 375-425px | Tata letak mobile standar |
| Mobile Large | 425-600px | Mobile lebih lebar, sedikit petunjuk 2 kolom |
| Tablet Small | 600-768px | Grid 2 kolom mulai muncul |
| Tablet | 768-1024px | Grid kartu penuh, navigasi diperluas |
| Desktop | 1024-1350px | Tata letak desktop standar |
| Large Desktop | >1350px | Lebar konten maksimum, margin luas |

### Target Sentuh
- Tombol menggunakan padding 11px 13px untuk target ketuk yang nyaman
- Tautan navigasi berukuran 14px uppercase dengan spasi yang memadai
- Tombol berborder hijau memberikan target sentuh berkontras tinggi pada latar gelap
- Mobile: navigasi hamburger mengkerut dengan overlay layar penuh

### Strategi Pengkerutan
- Hero: heading 36px mengecil secara proporsional
- Navigasi: navigasi horizontal penuh mengkerut menjadi menu hamburger pada ~1024px
- Kartu produk: 3 kolom ke 2 kolom ke satu kolom bertumpuk
- Footer: grid multi-kolom mengkerut menjadi satu kolom bertumpuk
- Spasi bagian: 64-80px berkurang menjadi 32-48px di mobile
- Gambar: pertahankan rasio aspek, skalakan ke lebar kontainer

### Perilaku Gambar
- Render GPU/produk mempertahankan resolusi tinggi di semua ukuran
- Gambar hero skalakan secara proporsional dengan viewport
- Gambar kartu menggunakan rasio aspek yang konsisten
- Bagian gelap full-bleed mempertahankan perlakuan tepi ke tepi

## 8. Perilaku Responsif (Diperluas)

### Penskalaan Tipografi
- Display 36px mengecil menjadi ~24px di mobile
- Section heading 24px mengecil menjadi ~20px di mobile
- Teks isi mempertahankan 15-16px di semua breakpoint
- Teks tombol mempertahankan 16px untuk target ketuk yang konsisten

### Strategi Bagian Gelap/Terang
- Bagian gelap (latar hitam, teks putih) berselang-seling dengan bagian terang (latar putih, teks hitam)
- Aksen hijau tetap konsisten di kedua jenis permukaan
- Pada gelap: tautan berwarna putih, garis bawah berwarna hijau
- Pada terang: tautan berwarna hitam, garis bawah berwarna hijau
- Pergantian ini menciptakan ritme scroll alami dan pengelompokan konten

## 9. Panduan Prompt Agen

### Referensi Warna Cepat
- Aksen utama: NVIDIA Green (`#76b900`)
- Latar gelap: True Black (`#000000`)
- Latar terang: Pure White (`#ffffff`)
- Teks heading (latar gelap): Putih (`#ffffff`)
- Teks heading (latar terang): Hitam (`#000000`)
- Teks isi (latar terang): Hitam (`#000000`) atau Near Black (`#1a1a1a`)
- Teks isi (latar gelap): Putih (`#ffffff`) atau Gray 300 (`#a7a7a7`)
- Hover tautan: Biru (`#3860be`)
- Aksen border: `2px solid #76b900`
- Hover tombol: Teal (`#1eaedb`)

### Contoh Prompt Komponen
- "Buat bagian hero pada latar hitam. Headline berukuran 36px NVIDIA-EMEA weight 700, line-height 1.25, warna #ffffff. Subjudul berukuran 18px weight 400, line-height 1.67, warna #a7a7a7. Tombol CTA dengan background transparent, border 2px solid #76b900, radius 2px, padding 11px 13px, teks #ffffff. Hover: background #1eaedb, teks putih."
- "Desain kartu produk: background putih, border-radius 2px, box-shadow rgba(0,0,0,0.3) 0px 0px 5px. Judul berukuran 20px NVIDIA-EMEA weight 700, line-height 1.25, warna #000000. Isi berukuran 15px weight 400, line-height 1.67, warna #757575. Aksen garis bawah hijau pada judul: border-bottom 2px solid #76b900."
- "Bangun navigation bar: background #000000, sticky top. Logo NVIDIA rata kiri. Tautan berukuran 14px NVIDIA-EMEA weight 700 uppercase, warna #ffffff. Hover: warna #3860be. Tombol CTA berborder hijau rata kanan."
- "Buat bagian fitur gelap: background #000000. Label bagian berukuran 14px weight 700 uppercase, warna #76b900. Heading berukuran 24px weight 700, warna #ffffff. Deskripsi berukuran 16px weight 400, warna #a7a7a7. Tiga kartu produk dalam satu baris dengan jarak 20px."
- "Desain footer: background #000000. Tata letak multi-kolom dengan grup tautan. Tautan berukuran 14px weight 400, warna #a7a7a7. Hover: warna #76b900. Bar bawah dengan teks legal berukuran 12px, warna #757575."

### Panduan Iterasi
1. Selalu gunakan `#76b900` sebagai aksen, jangan pernah sebagai isian latar belakang -- ini adalah warna sinyal untuk border, garis bawah, dan sorotan
2. Tombol secara default transparan dengan border hijau -- latar belakang terisi hanya muncul pada state hover/active
3. Weight 700 adalah suara dominan untuk semua elemen interaktif dan heading; 400 hanya untuk paragraf isi
4. Border radius adalah 2px untuk semua elemen -- pembulatan minimal yang tajam ini adalah inti dari estetika industrial
5. Bagian gelap menggunakan teks putih; bagian terang menggunakan teks hitam -- aksen hijau bekerja identik pada keduanya
6. Hover tautan selalu `#3860be` (biru) terlepas dari warna default tautan
7. Line-height 1.25 untuk heading, 1.50-1.67 untuk teks isi -- pertahankan kontras ini untuk hierarki visual
8. Navigasi menggunakan uppercase 14px bold -- tipografi berlabel perangkat keras ini adalah bagian dari suara merek