open-design/design-systems/nvidia/DESIGN-uk.md

# Дизайн-система натхнена NVIDIA

> Category: Медіа та споживачі
> GPU-обчислення. Зелено-чорна енергія, естетика технічної потужності.

## 1. Візуальна тема та атмосфера

Вебсайт NVIDIA — це досвід із високим контрастом і технологічною спрямованістю, що передає сиру обчислювальну потужність через стриманість дизайну. Сторінка побудована на різкій чорній (`#000000`) та білій (`#ffffff`) основі, прикрашеній фірмовим зеленим кольором NVIDIA (`#76b900`) — настільки специфічним, що він функціонує як відбиток бренду. Це не розкішна зелень природи; це електричний, зміщений у бік лимона зелений колір світла, відрендереного GPU, — колір, що знаходиться між шартрезом і келлі-зеленим та миттєво сигналізує «NVIDIA» будь-кому з технологічної галузі.

Власна шрифтова гарнітура NVIDIA-EMEA (з резервними Arial і Helvetica) створює чистий, індустріальний типографічний голос. Заголовки розміром 36px жирним із щільним міжрядковим інтервалом 1.25 утворюють щільні, авторитетні блоки тексту. Шрифт позбавлений геометричної грайливості безсерифних шрифтів Кремнієвої долини — він є європейським, прагматичним і орієнтованим на інженерію. Текст основного контенту має розмір 15–16px — комфортний для читання, але не надто щедрий, зберігаючи відчуття того, що простір екрана оптимізовано, як пам'ять GPU.

Те, що відрізняє дизайн NVIDIA від інших сайтів технологічних компаній із темним фоном, — це дисциплінована робота із зеленим акцентом. `#76b900` з'являється у рамках (`2px solid #76b900`), підкресленнях посилань (`underline 2px rgb(118, 185, 0)`) та CTA — але ніколи як фон чи великі поверхні в основному контенті. Зелений — це сигнал, а не поверхня. У поєднанні з глибокою системою тіней (`rgba(0, 0, 0, 0.3) 0px 0px 5px`) та мінімальним радіусом кута (1–2px) загальний ефект — це обладнання точної інженерії, відтворене в пікселях.

**Ключові характеристики:**
- Зелений NVIDIA (`#76b900`) як чистий акцент — лише рамки, підкреслення та інтерактивні виділення
- Чорний (`#000000`) домінантний фон із білим (`#ffffff`) текстом у темних секціях
- Власний шрифт NVIDIA-EMEA з резервним Arial/Helvetica — індустріальний, європейський, чистий
- Щільні міжрядкові інтервали (1.25 для заголовків), що створюють щільні авторитетні текстові блоки
- Мінімальний радіус кута (1–2px) — гострі, інженерні кути скрізь
- Кнопки із зеленою рамкою (`2px solid #76b900`) як основний інтерактивний патерн
- Система іконок Font Awesome 6 Pro/Sharp з вагою 900 для чітких іконок
- Мультифреймова архітектура (PrimeReact, Fluent UI, Element Plus) для багатих інтерактивних компонентів

## 2. Кольорова палітра та ролі

### Основний бренд
- **Зелений NVIDIA** (`#76b900`): Підпис — рамки, підкреслення посилань, обведення CTA, активні індикатори. Ніколи не використовується як заливка великих поверхонь.
- **Справжній чорний** (`#000000`): Основний фон сторінки, текст на світлих поверхнях, домінантний тон.
- **Чистий білий** (`#ffffff`): Текст на темних фонах, фони світлих секцій, поверхні карток.

### Розширена палітра бренду
- **Світло-зелений NVIDIA** (`#bff230`): Яскравий лаймовий акцент для виділень і станів наведення.
- **Помаранчевий 400** (`#df6500`): Теплий акцент для попереджень, значків та контекстів, пов'язаних з енергією.
- **Жовтий 300** (`#ef9100`): Вторинний теплий акцент, виділення категорій продуктів.
- **Жовтий 050** (`#feeeb2`): Світла тепла поверхня для фонів виносок.

### Стани та семантика
- **Червоний 500** (`#e52020`): Стани помилок, деструктивні дії, критичні попередження.
- **Червоний 800** (`#650b0b`): Темно-червоний для фонів серйозних попереджень.
- **Зелений 500** (`#3f8500`): Стани успіху, позитивні індикатори (темніший за фірмовий зелений).
- **Синій 700** (`#0046a4`): Інформаційні акценти, альтернатива для наведення на посилання.

### Декоративні
- **Фіолетовий 800** (`#4d1368`): Темно-фіолетовий для кінців градієнтів, преміум/AI-контекстів.
- **Фіолетовий 100** (`#f9d4ff`): Світлий фіолетовий відтінок поверхні.
- **Фуксія 700** (`#8c1c55`): Насичений акцент для спеціальних акцій або виділеного контенту.

### Нейтральна шкала
- **Сірий 300** (`#a7a7a7`): Приглушений текст, відключені мітки.
- **Сірий 400** (`#898989`): Вторинний текст, метадані.
- **Сірий 500** (`#757575`): Третинний текст, плейсхолдери, підвали.
- **Сіра рамка** (`#5e5e5e`): Ледь помітні рамки, розділові лінії.
- **Майже чорний** (`#1a1a1a`): Темні поверхні, фони карток на чорних сторінках.

### Інтерактивні стани
- **Посилання за замовчуванням (темний фон)** (`#ffffff`): Білі посилання на темних фонах.
- **Посилання за замовчуванням (світлий фон)** (`#000000`): Чорні посилання із зеленим підкресленням на світлих фонах.
- **Наведення на посилання** (`#3860be`): Синє зміщення при наведенні для всіх варіантів посилань.
- **Наведення на кнопку** (`#1eaedb`): Бірюзове виділення для станів наведення на кнопку.
- **Активна кнопка** (`#007fff`): Яскраво-синій для активних/натиснутих станів кнопки.
- **Кільце фокусу** (`#000000 solid 2px`): Чорний контур для фокусу з клавіатури.

### Тіні та глибина
- **Тінь картки** (`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`): Ледь помітна фонова тінь для підвищених карток.

## 3. Правила типографіки

### Шрифтова гарнітура
- **Основна**: `NVIDIA-EMEA`, резервні: `Arial, Helvetica, sans-serif`
- **Шрифт іконок**: `Font Awesome 6 Pro` (вага 900 для суцільних іконок, 700 для звичайних)
- **Гострі іконки**: `Font Awesome 6 Sharp` (вага 300 для легких іконок, 400 для звичайних)

### Ієрархія

| Роль | Шрифт | Розмір | Вага | Міжрядковий інтервал | Відстань між літерами | Нотатки |
|------|------|------|--------|-------------|----------------|-------|
| Вітрина-герой | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25 (щільний) | normal | Заголовки максимального впливу |
| Заголовок секції | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25 (щільний) | normal | Назви секцій, заголовки карток |
| Підзаголовок | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75 (вільний) | normal | Описи функцій, підзаголовки |
| Заголовок картки | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25 (щільний) | normal | Заголовки карток і модулів |
| Великий основний | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67 (вільний) | normal | Виділений основний текст, вступні абзаци |
| Основний | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | normal | Стандартний текст для читання |
| Основний жирний | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | normal | Сильні мітки, елементи навігації |
| Малий основний | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67 (вільний) | normal | Вторинний контент, описи |
| Малий основний жирний | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | normal | Виділений вторинний контент |
| Велика кнопка | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25 (щільний) | normal | Основні CTA-кнопки |
| Кнопка | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25 (щільний) | normal | Стандартні кнопки |
| Компактна кнопка | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00 (щільний) | 0.144px | Маленькі/компактні кнопки |
| Посилання | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | Навігаційні посилання |
| Посилання у верхньому регістрі | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | `text-transform: uppercase`, мітки навігації |
| Підпис | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | normal | Метадані, мітки часу |
| Малий підпис | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25 (щільний) | normal | Дрібний шрифт, юридичний |
| Мікро-мітка | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | normal | `text-transform: uppercase`, маленькі значки |
| Мікро | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00 (щільний) | normal | Найменший текст інтерфейсу |

### Принципи
- **Жирний як голос за замовчуванням**: NVIDIA значною мірою покладається на вагу 700 для заголовків, кнопок, посилань і міток. Вага 400 зарезервована для основного тексту і описів — все решта жирне, що проектує впевненість і авторитет.
- **Щільні заголовки, вільний основний текст**: Міжрядковий інтервал заголовка стабільно дорівнює 1.25 (щільний), тоді як основний текст розслабляється до 1.50–1.67. Цей контраст створює візуальну щільність у верхній частині блоків контенту та комфортну читаність у параграфах.
- **Верхній регістр для навігації**: Мітки посилань використовують `text-transform: uppercase` з вагою 700, створюючи голос навігації, що читається як мітки технічних специфікацій обладнання.
- **Без декоративного трекінгу**: Відстань між літерами нормальна скрізь, крім компактних кнопок (0.144px). Сам шрифт несе індустріальний характер без маніпуляцій.

## 4. Стилізація компонентів

### Кнопки

**Основна (зелена рамка)**
- Фон: `transparent`
- Текст: `#000000`
- Відступи: 11px 13px
- Рамка: `2px solid #76b900`
- Радіус: 2px
- Шрифт: 16px вага 700
- Наведення: фон `#1eaedb`, текст `#ffffff`
- Активний: фон `#007fff`, текст `#ffffff`, рамка `1px solid #003eff`, scale(1)
- Фокус: фон `#1eaedb`, текст `#ffffff`, контур `#000000 solid 2px`, непрозорість 0.9
- Використання: Основний CTA ("Дізнатися більше", "Досліджувати рішення")

**Вторинна (тонка зелена рамка)**
- Фон: прозорий
- Рамка: `1px solid #76b900`
- Радіус: 2px
- Використання: Вторинні дії, альтернативні CTA

**Компактна / Вбудована**
- Шрифт: 14.4px вага 700
- Відстань між літерами: 0.144px
- Міжрядковий інтервал: 1.00
- Використання: Вбудовані CTA, компактна навігація

### Картки та контейнери
- Фон: `#ffffff` (світлий) або `#1a1a1a` (темні секції)
- Рамка: відсутня (чисті краї) або `1px solid #5e5e5e`
- Радіус: 2px
- Тінь: `rgba(0, 0, 0, 0.3) 0px 0px 5px 0px` для підвищених карток
- Наведення: посилення тіні
- Відступи: 16–24px внутрішні

### Посилання
- **На темному фоні**: `#ffffff`, без підкреслення, при наведенні змінюється на `#3860be`
- **На світлому фоні**: `#000000` або `#1a1a1a`, підкреслення `2px solid #76b900`, при наведенні змінюється на `#3860be`, підкреслення прибирається
- **Зелені посилання**: `#76b900`, при наведенні змінюється на `#3860be`
- **Приглушені посилання**: `#666666`, при наведенні змінюється на `#3860be`

### Навігація
- Темний чорний фон (`#000000`)
- Логотип вирівняний ліворуч, помітний словесний знак NVIDIA
- Посилання: NVIDIA-EMEA 14px вага 700 верхній регістр, `#ffffff`
- Наведення: зміна кольору, без зміни підкреслення
- Мегаменю для категорій продуктів
- Закріплена під час прокручування з підкладкою

### Обробка зображень
- Продукти/GPU як головні зображення, часто на повну ширину
- Знімки екрана з ледь помітною тінню для глибини
- Зелені градієнтні накладки на темних секціях-героях
- Кругові контейнери аватарів із радіусом 50%

### Відмінні компоненти

**Картки продуктів**
- Чиста біла або темна картка з мінімальним радіусом (2px)
- Зелена акцентна рамка або підкреслення заголовка
- Патерн жирного заголовка + легшого опису
- CTA із зеленою рамкою знизу

**Таблиці технічних специфікацій**
- Індустріальні сіткові макети
- Чергування фонів рядків (ледь помітний сірий зсув)
- Жирні мітки, звичайні значення
- Зелені виділення для ключових метрик

**Банер файлів cookie/згоди**
- Фіксована нижня позиція
- Заокруглені кнопки (радіус 2px)
- Сірі обробки рамок

## 5. Принципи макету

### Система відступів
- Базова одиниця: 8px
- Шкала: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 15px
- Основні значення відступів: 8px, 11px, 13px, 16px, 24px, 32px
- Відступи секцій: 48–80px вертикальні відступи

### Сітка та контейнер
- Максимальна ширина контенту: приблизно 1200px (обмежена)
- Секції-герої на повну ширину з обмеженим текстом
- Секції функцій: сітки 2–3 стовпці для карток продуктів
- Один стовпець для вмісту статей/блогу
- Бокова панель для документації

### Філософія пустого простору
- **Цілеспрямована щільність**: NVIDIA використовує більш щільні відступи, ніж типові SaaS-сайти, що відображає щільність технічного контенту. Пустий простір існує для розмежування концепцій, а не для створення розкішної порожнечі.
- **Ритм секцій**: Темні секції чергуються зі світлими, використовуючи колір фону (а не лише відступи) для розділення блоків контенту.
- **Щільність карток**: Картки продуктів розміщуються близько одна до одної з проміжками 16–20px, що створює відчуття каталогу, а не галереї.

### Шкала радіуса кута
- Мікро (1px): Вбудовані проміжки, крихітні елементи
- Стандартний (2px): Кнопки, картки, контейнери, поля введення — за замовчуванням майже для всього
- Коло (50%): Зображення аватарів, кругові індикатори вкладок

## 6. Глибина та підйом

| Рівень | Обробка | Використання |
|-------|-----------|-----|
| Плоский (Рівень 0) | Без тіні | Фони сторінок, вбудований текст |
| Ледь помітний (Рівень 1) | `rgba(0,0,0,0.3) 0px 0px 5px 0px` | Стандартні картки, модальні вікна |
| Рамка (Рівень 1b) | `1px solid #5e5e5e` | Роздільники контенту, рамки секцій |
| Зелений акцент (Рівень 2) | `2px solid #76b900` | Активні елементи, CTA, вибрані елементи |
| Фокус (Доступність) | контур `2px solid #000000` | Кільце фокусу з клавіатури |

**Філософія тіней**: Система глибини NVIDIA мінімальна і функціональна. По суті існує лише одне значення тіні — 5px розсіяне розмиття при 30% непрозорості — яке обережно використовується для карток та модальних вікон. Основним сигналом глибини є не тінь, а _колірний контраст_: чорні фони поруч зі світлими секціями, зелені рамки на чорних поверхнях. Це створює апаратоподібне візуальне нашарування, де глибина виходить із різниці матеріалів, а не симульованого світла.

### Декоративна глибина
- Зелені градієнтні промивки за контентом-героєм
- Градієнти від темного до темнішого (від чорного до майже чорного) для переходів між секціями
- Жодного гласморфізму або ефектів розмиття — ясність понад атмосферу

## 7. Адаптивна поведінка

### Точки зламу
| Назва | Ширина | Ключові зміни |
|------|-------|-------------|
| Малий мобільний | <375px | Компактний один стовпець, зменшені відступи |
| Мобільний | 375–425px | Стандартний мобільний макет |
| Великий мобільний | 425–600px | Ширший мобільний, деякі підказки 2 стовпці |
| Малий планшет | 600–768px | Починаються сітки 2 стовпці |
| Планшет | 768–1024px | Повні сітки карток, розширена навігація |
| Десктоп | 1024–1350px | Стандартний десктопний макет |
| Великий десктоп | >1350px | Максимальна ширина контенту, широкі поля |

### Цілі для дотику
- Кнопки використовують відступи 11px 13px для комфортних цілей торкання
- Навігаційні посилання 14px у верхньому регістрі з достатніми відступами
- Кнопки із зеленою рамкою забезпечують цілі торкання з високим контрастом на темних фонах
- Мобільний: бургер-меню із накладкою на весь екран

### Стратегія згортання
- Герой: заголовок 36px пропорційно зменшується
- Навігація: повна горизонтальна навігація згортається в бургер-меню при ~1024px
- Картки продуктів: від 3 стовпців до 2 стовпців до одного складеного стовпця
- Підвал: сітка з кількома стовпцями згортається в один складений стовпець
- Відступи секцій: 64–80px зменшується до 32–48px на мобільному
- Зображення: зберігають пропорції, масштабуються до ширини контейнера

### Поведінка зображень
- Рендери GPU/продукту зберігають високу роздільну здатність у всіх розмірах
- Зображення-герої масштабуються пропорційно до вікна перегляду
- Зображення карток використовують послідовні пропорції
- Повні темні секції зберігають обробку від краю до краю

## 8. Адаптивна поведінка (розширена)

### Масштабування типографіки
- Відображення 36px масштабується до ~24px на мобільному
- Заголовки секцій 24px масштабуються до ~20px на мобільному
- Основний текст зберігає 15–16px на всіх точках зламу
- Текст кнопок зберігає 16px для послідовних цілей торкання

### Стратегія темних/світлих секцій
- Темні секції (чорний фон, білий текст) чергуються зі світлими (білий фон, чорний текст)
- Зелений акцент залишається послідовним на обох типах поверхонь
- На темному: посилання білі, підкреслення зелені
- На світлому: посилання чорні, підкреслення зелені
- Це чергування створює природний ритм прокручування та групування контенту

## 9. Посібник для агентів

### Швидкий довідник кольорів
- Основний акцент: Зелений NVIDIA (`#76b900`)
- Темний фон: Справжній чорний (`#000000`)
- Світлий фон: Чистий білий (`#ffffff`)
- Текст заголовка (темний фон): Білий (`#ffffff`)
- Текст заголовка (світлий фон): Чорний (`#000000`)
- Основний текст (світлий фон): Чорний (`#000000`) або Майже чорний (`#1a1a1a`)
- Основний текст (темний фон): Білий (`#ffffff`) або Сірий 300 (`#a7a7a7`)
- Наведення на посилання: Синій (`#3860be`)
- Акцент рамки: `2px solid #76b900`
- Наведення на кнопку: Бірюзовий (`#1eaedb`)

### Приклади підказок для компонентів
- "Створи секцію-герой на чорному фоні. Заголовок 36px NVIDIA-EMEA вага 700, міжрядковий інтервал 1.25, колір #ffffff. Підзаголовок 18px вага 400, міжрядковий інтервал 1.67, колір #a7a7a7. CTA-кнопка з прозорим фоном, рамка 2px solid #76b900, радіус 2px, відступи 11px 13px, текст #ffffff. Наведення: фон #1eaedb, білий текст."
- "Розроби картку продукту: білий фон, радіус рамки 2px, box-shadow rgba(0,0,0,0.3) 0px 0px 5px. Заголовок 20px NVIDIA-EMEA вага 700, міжрядковий інтервал 1.25, колір #000000. Основний текст 15px вага 400, міжрядковий інтервал 1.67, колір #757575. Зелений акцент підкреслення на заголовку: border-bottom 2px solid #76b900."
- "Побудуй навігаційну панель: фон #000000, закріплений зверху. Логотип NVIDIA вирівняний ліворуч. Посилання 14px NVIDIA-EMEA вага 700 верхній регістр, колір #ffffff. Наведення: колір #3860be. CTA-кнопка із зеленою рамкою, вирівняна праворуч."
- "Створи темну секцію функцій: фон #000000. Мітка секції 14px вага 700 верхній регістр, колір #76b900. Заголовок 24px вага 700, колір #ffffff. Опис 16px вага 400, колір #a7a7a7. Три картки продуктів у ряд із проміжком 20px."
- "Розроби підвал: фон #000000. Макет з кількома стовпцями та групами посилань. Посилання 14px вага 400, колір #a7a7a7. Наведення: колір #76b900. Нижня панель із юридичним текстом 12px, колір #757575."

### Посібник з ітерацій
1. Завжди використовуй `#76b900` як акцент, ніколи як заливку фону — це сигнальний колір для рамок, підкреслень і виділень
2. Кнопки за замовчуванням прозорі із зеленими рамками — заповнені фони з'являються лише в станах наведення/активного
3. Вага 700 — домінантний голос для всіх інтерактивних та заголовкових елементів; 400 лише для абзаців основного тексту
4. Радіус рамки 2px для всього — це гостре, мінімальне заокруглення є основою індустріальної естетики
5. Темні секції використовують білий текст; світлі секції використовують чорний текст — зелений акцент однаково працює на обох
6. Наведення на посилання завжди `#3860be` (синій) незалежно від кольору посилання за замовчуванням
7. Міжрядковий інтервал 1.25 для заголовків, 1.50–1.67 для основного тексту — зберігай цей контраст для візуальної ієрархії
8. Навігація використовує верхній регістр 14px жирний — ця типографіка у стилі апаратних міток є частиною голосу бренду