# Дизайн-система, вдохновлённая NVIDIA

> Категория: Медиа и потребительский рынок
> 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`): Светлая тёплая поверхность для фонов callout-блоков.

### Статусные и семантические цвета
- **Красный 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 в качестве hero-изображений, часто на всю ширину
- Скриншоты с едва заметной тенью для объёма
- Зелёные градиентные наложения на тёмных hero-секциях
- Круглые контейнеры для аватаров с radius 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 (с ограничением)
- Hero-секции на всю ширину с ограниченным текстом
- Функциональные секции: сетки из 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% — используемое экономно для карточек и модальных окон. Основной сигнал глубины — не тень, а _цветовой контраст_: чёрные фоны рядом с белыми секциями, зелёные рамки на чёрных поверхностях. Это создаёт визуальную многослойность, подобную железу, где глубина исходит из разницы материалов, а не имитируемого света.

### Декоративная глубина
- Зелёные градиентные подложки за hero-контентом
- Градиенты от тёмного к ещё более тёмному (от чёрного к почти чёрному) для переходов между секциями
- Никакого glassmorphism или эффектов размытия — ясность важнее атмосферы

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

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

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

### Стратегия схлопывания
- Герой: заголовок 36px масштабируется пропорционально
- Навигация: полная горизонтальная навигация сворачивается в гамбургер-меню примерно при 1024px
- Карточки продуктов: 3 колонки → 2 колонки → одна колонка стопкой
- Подвал: многоколоночная сетка сворачивается в одну стопку
- Отступы секций: 64–80px уменьшается до 32–48px на мобильных
- Изображения: сохраняют соотношение сторон, масштабируются по ширине контейнера

### Поведение изображений
- Рендеры GPU/продуктов сохраняют высокое разрешение на всех размерах
- Hero-изображения масштабируются пропорционально вьюпорту
- Изображения карточек используют постоянные соотношения сторон
- Тёмные секции на всю ширину сохраняют обработку от края до края

## 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`)

### Примеры промптов для компонентов
- «Создай hero-секцию на чёрном фоне. Заголовок 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-кнопка с зелёной рамкой выровнена по правому краю.»
- «Создай тёмную feature-секцию: фон #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 жирные — эта типографика в стиле меток технических характеристик является частью голоса бренда