Дизайн-система, вдохновлённая 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 активно использует насыщенность 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. Глубина и уровни возвышения

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

Декоративная глубина

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

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

Контрольные точки

Сенсорные цели

• Кнопки используют отступ 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 жирные — эта типографика в стиле меток технических характеристик является частью голоса бренда