Дизайн-система, вдохновлённая 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

Иерархия

Принципы

• Сдержанность как идентичность: насыщенность ограничена 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 только для редакционной или анонсовой иерархии, оставляя элементы управления продуктом в гротескной системе.
• Избегайте декоративной анимации, тяжёлых теней и чрезмерно крупных декоративных карточек; система должна ощущаться спокойной, читаемой и осмысленной.