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 жирний — ця типографіка у стилі апаратних міток є частиною голосу бренду