workbuddy_skills/open-design/design-systems/openai/DESIGN-ru.md

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

> Category: ИИ и языковые модели
> Спокойная, почти монохромная система на основе глубокого сине-чёрного оттенка с щедрым белым пространством и редакционной типографикой.

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

Продуктовая поверхность OpenAI воспринимается как исследовательская лаборатория, открытая для широкой аудитории — клиническая, сдержанная, намеренно тихая. Фон страницы — чистый белый (`#ffffff`), наложенный на почти чёрные чернила (`#0d0d0d`) с едва заметным сине-зелёным подтоном, благодаря чему даже текст ощущается слегка охлаждённым, а не агрессивно тёмным. Результат — хроматическая нейтральность, которая выдвигает на первый план вывод модели, код и прозу, а не обрамляющий их интерфейс.

Фирменный приём — использование **Söhne** (или системного аналога `inter`) с умеренными насыщенностями: 400 для основного текста, 500 для навигации и подписей, 600 для акцентов — в сочетании с **Signifier**, современным антиквой для редакционных заголовков. Там, где большинство AI-брендов тяготеют к футуристичности, засечные заголовки OpenAI придают продукту тихий литературный тон, словно каждый анонс — это эссе.

Система форм единообразно мягкая: скругления 8px–12px, скругления 9999px для тегов и чипов, никаких острых углов. Переходы между секциями обозначаются отступами, а не разделителями; когда рамки всё же появляются, это тончайшие линии `#e5e5e5`, читающиеся как отсутствие цвета, а не его присутствие.

**Ключевые характеристики:**
- Чистый белый холст (`#ffffff`) с глубокими сине-чёрными чернилами (`#0d0d0d`)
- Söhne / Inter с умеренной насыщенностью (400, 500, 600) — сдержанность вместо напора
- Signifier с засечками для редакционных заголовков
- Мягкие скругления 8–12px везде; 9999px для чипов
- Тончайшие рамки (`#e5e5e5`) используются скупо; белое пространство — основной разделитель
- Одноцветные иллюстрации в глубоком сине-зелёном — никаких градиентов в знаках
- Щедрая межстрочность (1.55–1.65) и трекинг, близкий к нулю

## 2. Цветовая палитра и роли

### Основные цвета
- **Чистый белый** (`#ffffff`): Основной фон, поверхность карточки, фон кнопки.
- **Чернильный чёрный** (`#0d0d0d`): Основной текст, знак бренда, основной CTA.
- **Мягкий чёрный** (`#1a1a1a`): Вторичный заголовок, альтернативные чернила для второстепенного текста.

### Поверхности и фоны
- **Дымка** (`#fafafa`): Фон разрыва секции, поверхность футера.
- **Жемчуг** (`#f5f5f5`): Поверхность карточки, приподнятая панель.
- **Облако** (`#ececec`): Фон отключённого элемента, оттенок разделителя.

### Акцентный цвет бренда
- **OpenAI Teal** (`#10a37f`): Основной цвет бренда, ссылка, бейдж-подсветка — единственный цвет в иначе нейтральной системе.
- **Teal Deep** (`#0a7a5e`): Состояние наведения и нажатия для фирменного цвета.
- **Teal Soft** (`#e8f5f0`): Оттенок поверхности для бейджей успеха, выделяющих подсказок.

### Нейтральные и текстовые цвета
- **Графит** (`#3c3c3c`): Основной текст, стандартный цвет чтения.
- **Сланец** (`#6e6e6e`): Вторичный текст, подписи, метаданные.
- **Пепел** (`#9b9b9b`): Третичный текст, заглушка, отключённая подпись.
- **Камень** (`#c4c4c4`): Декоративные разделители, едва заметные иконки.

### Семантические цвета и рамки
- **Тончайшая рамка** (`#e5e5e5`): Стандартный тонкий разделитель.
- **Мягкая рамка** (`#ededed`): Контур карточки на белой поверхности.
- **Ошибка** (`#ef4146`): Валидация, деструктивное действие.
- **Предупреждение** (`#f5a623`): Мягкий янтарный для информационных состояний.
- **Информация** (`#2563eb`): Информационный тон ссылки (используется скупо; сине-зелёный всё равно приоритетнее).

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

### Семейство шрифтов
- **Дисплейный / Редакционный**: `Signifier`, резервный: `'Source Serif Pro', Georgia, serif`
- **Основной / Интерфейсный**: `Söhne`, резервный: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
- **Код / Моноширинный**: `Söhne Mono`, резервный: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`

### Иерархия

| Роль | Шрифт | Размер | Насыщенность | Межстрочность | Трекинг | Примечания |
|------|------|------|--------|-------------|----------------|-------|
| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Редакционный герой, анонсы |
| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Заголовок страницы |
| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Заголовок секции |
| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Подраздел |
| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Вводные абзацы |
| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | Стандартный читаемый текст |
| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Тело карточки, плотный интерфейс |
| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Метаданные, бейджи |
| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Надзаголовок, ссылки верхней навигации в верхнем регистре |
| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Блоки кода, вывод терминала |

### Принципы
- **Сдержанность как идентичность**: насыщенность ограничена 600; 700+ ощущается вне бренда. Иерархия строится на размере и цвете, а не на насыщенности.
- **Засечки для души, гротеск для системы**: Signifier появляется только в редакционных дисплейных моментах. Продуктовый интерфейс — исключительно гротеск.
- **Отрицательный трекинг на крупных размерах**: -0.02em для дисплейных размеров; трекинг возвращается к нулю к 16px.

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

### Кнопки

**Основная**
- Background: `#0d0d0d`
- Text: `#ffffff`
- Padding: 10px 18px
- Radius: 9999px (полная таблетка) для чипов, 12px для прямоугольных CTA
- Hover: фон `#1a1a1a`
- Использование: Основной CTA, «Попробовать ChatGPT», «Войти»

**Вторичная**
- Background: `#ffffff`
- Text: `#0d0d0d`
- Border: 1px solid `#e5e5e5`
- Padding: 10px 18px
- Radius: 12px
- Hover: фон `#fafafa`, рамка `#d4d4d4`

**Акцентная (бренд)**
- Background: `#10a37f`
- Text: `#ffffff`
- Padding: 10px 18px
- Radius: 12px
- Hover: `#0a7a5e`
- Использование: Выделенный CTA апгрейда, путь успеха

### Карточки
- Background: `#ffffff`
- Border: 1px solid `#ededed`
- Radius: 16px
- Padding: 24px–32px
- Shadow: нет по умолчанию; при наведении `0 4px 16px rgba(13,13,13,0.06)`

### Поля ввода
- Background: `#ffffff`
- Border: 1px solid `#e5e5e5`
- Radius: 12px
- Padding: 12px 14px
- Focus: рамка `#10a37f`, кольцо `0 0 0 3px rgba(16,163,127,0.12)`

### Таблетки и теги
- Background: `#f5f5f5`
- Text: `#3c3c3c`
- Padding: 4px 10px
- Radius: 9999px
- Font: 12px / 500

## 5. Отступы и раскладка

- **Базовая единица**: 4px. Шкала: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
- **Контейнер**: max-width 1200px, отступ 24px на мобильных, 48px на десктопе.
- **Ритм секций**: 96–128px по вертикали между основными секциями; 64px на мобильных.
- **Сетка**: 12 колонок на десктопе, 4 колонки на мобильных, зазор 24px.

## 6. Анимация

- **Продолжительность**: 150–220ms для наведения; 280–360ms для переходов раскладки.
- **Плавность**: `cubic-bezier(0.16, 1, 0.3, 1)` (плавный выход) для появлений.
- **Сдержанность**: никакого параллакса, никакого перехвата прокрутки. Только тонкое угасание и смещение.

## 7. Ограничения использования

- Сохраняйте нейтральную редакционную сдержанность, мягкие скругления и скупое использование акцентного цвета вместе; зелёные акценты сами по себе не создают поверхность в духе OpenAI.
- Используйте дисплейные моменты в стиле Signifier только для редакционной или анонсовой иерархии, оставляя элементы управления продуктом в гротескной системе.
- Избегайте декоративной анимации, тяжёлых теней и чрезмерно крупных декоративных карточек; система должна ощущаться спокойной, читаемой и осмысленной.