admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
297 lines
31 KiB
Markdown
297 lines
31 KiB
Markdown
# Дизайн-система, вдохновлённая 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 жирные — эта типографика в стиле меток технических характеристик является частью голоса бренда
|