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

> Category: Медиа и потребительский сектор
> Визуальное открытие. Красный акцент, кирпичная сетка, изображение на первом месте.

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

Сайт Pinterest — это тёплый холст, наполненный вдохновением, который делает визуальное открытие похожим на лайфстайл-журнал. Дизайн построен на мягком, слегка тёплом белом фоне с Pinterest-красным (`#e60023`) в качестве единственного яркого акцента бренда. В отличие от холодных синих тонов большинства технологических платформ, нейтральная шкала Pinterest имеет выраженный тёплый подтон — серые тона тяготеют к оливковому/песчаному (`#91918c`, `#62625b`, `#e5e5e0`), а не к холодной стали, создавая уютную, ремесленную атмосферу, располагающую к просмотру.

Типографика использует Pin Sans — фирменный шрифт с широким набором запасных вариантов, включая японские шрифты, что отражает глобальный охват Pinterest. В крупном масштабе (70px, насыщенность 600) Pin Sans создаёт большие, привлекательные заголовки. В меньшем размере система компактна: кнопки — 12px, подписи — 12–14px. Система именования переменных CSS (`--comp-*`, `--sema-*`, `--base-*`) раскрывает изощрённую трёхуровневую архитектуру дизайн-токенов: уровень компонентов, семантический уровень и базовый уровень.

Отличительные черты Pinterest — щедрая система скруглений (12px–40px, плюс 50% для кругов) и тёплые фоны кнопок. Вторичная кнопка (`#e5e5e0`) имеет выраженный тёплый, песчаный оттенок, а не холодный серый. Основная красная кнопка использует скругление 16px — округлое, но не «таблеткообразное». В сочетании с тёплыми фонами бейджей (`hsla(60,20%,98%,.5)` — тонкий жёлто-тёплый оттенок) и макетами, где главенствует фотография, результатом становится дизайн, ощущаемый как рукотворный и личный, а не корпоративный и стерильный.

**Ключевые характеристики:**
- Тёплый белый холст с нейтральными оливковыми/песчаными тонами — уютно, не стерильно
- Pinterest-красный (`#e60023`) как единственный смелый акцент — никогда не тонкий, всегда уверенный
- Шрифт Pin Sans с глобальным набором запасных вариантов (включая CJK)
- Трёхуровневая архитектура токенов: `--comp-*` / `--sema-*` / `--base-*`
- Тёплые вторичные поверхности: песчаный серый (`#e5e5e0`), тёплый бейдж (`hsla(60,20%,98%,.5)`)
- Щедрые скругления: 16px стандарт, до 40px для крупных контейнеров
- Фотография на первом плане — пины/изображения являются основным визуальным элементом
- Тёмный тёмно-фиолетовый текст (`#211922`) — тёплый, с лёгким сливовым оттенком

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

### Основной бренд
- **Pinterest-красный** (`#e60023`): Основной CTA, акцент бренда — смелый, уверенный красный
- **Зелёный 700** (`#103c25`): `--base-color-green-700`, акцент успеха/природы
- **Зелёный 700 при наведении** (`#0b2819`): `--base-color-hover-green-700`, нажатый зелёный

### Текст
- **Сливово-чёрный** (`#211922`): Основной текст — тёплый почти-чёрный со сливовым подтоном
- **Чёрный** (`#000000`): Вторичный текст, текст кнопок
- **Оливковый серый** (`#62625b`): Вторичные описания, приглушённый текст
- **Тёплый серебристый** (`#91918c`): `--comp-button-color-text-transparent-disabled`, отключённый текст, границы полей ввода
- **Белый** (`#ffffff`): Текст на тёмных/цветных поверхностях

### Интерактивные
- **Синий фокус** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, кольца фокуса
- **Фиолетовый производительности** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, функции производительности
- **Фиолетовый рекомендаций** (`#7e238b`): `--sema-color-hover-text-recommendation`, рекомендации ИИ
- **Синий ссылки** (`#2b48d4`): Цвет текста ссылки
- **Синий Facebook** (`#0866ff`): `--facebook-background-color`, социальный вход
- **Нажатый синий** (`#617bff`): `--base-color-pressed-blue-200`, нажатое состояние

### Поверхности и границы
- **Песчаный серый** (`#e5e5e0`): Фон вторичной кнопки — тёплый, ремесленный
- **Тёплый светлый** (`#e0e0d9`): Фоны круглых кнопок, бейджи
- **Тёплый смыв** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, тонкий тёплый фон бейджа
- **Туман** (`#f6f6f3`): Светлая поверхность (при 50% непрозрачности)
- **Граница отключена** (`#c8c8c1`): `--sema-color-border-disabled`, отключённые границы
- **Серый при наведении** (`#bcbcb3`): `--base-color-hover-grayscale-150`, граница при наведении
- **Тёмная поверхность** (`#33332e`): Фоны тёмных секций

### Семантические
- **Красный ошибки** (`#9e0a0a`): Состояния ошибки флажков/форм

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

### Семейство шрифтов
- **Основной**: `Pin Sans`, запасные: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`

### Иерархия

| Роль | Шрифт | Размер | Насыщенность | Межстрочный интервал | Межбуквенный интервал | Примечания |
|------|------|------|--------|-------------|----------------|-------|
| Дисплейный герой | Pin Sans | 70px (4,38rem) | 600 | normal | normal | Максимальный эффект |
| Заголовок секции | Pin Sans | 28px (1,75rem) | 700 | normal | -1,2px | Отрицательный трекинг |
| Основной текст | Pin Sans | 16px (1,00rem) | 400 | 1,40 | normal | Стандартное чтение |
| Жирная подпись | Pin Sans | 14px (0,88rem) | 700 | normal | normal | Выраженные метаданные |
| Подпись | Pin Sans | 12px (0,75rem) | 400–500 | 1,50 | normal | Мелкий текст, теги |
| Кнопка | Pin Sans | 12px (0,75rem) | 400 | normal | normal | Надписи на кнопках |

### Принципы
- **Компактная шкала кегля**: Диапазон 12px–70px с драматическим скачком — большинство функционального текста находится в диапазоне 12–16px, создавая плотную, похожую на приложение информационную иерархию.
- **Тёплое распределение насыщенности**: 600–700 для заголовков, 400–500 для основного текста. Нет сверхлёгких насыщенностей — текст всегда ощущается весомым.
- **Отрицательный трекинг у заголовков**: -1,2px при 28px создаёт уютные, интимные заголовки секций.
- **Единственное семейство шрифтов**: Pin Sans справляется со всем — дополнительный дисплейный или моноширинный шрифт не обнаружен.

## 4. Стили компонентов

### Кнопки

**Основной красный**
- Фон: `#e60023` (Pinterest-красный)
- Текст: `#000000` (чёрный — необычный выбор для контраста на красном)
- Отступы: 6px 14px
- Скругление: 16px (щедро скруглённый, не «таблетка»)
- Граница: `2px solid rgba(255, 255, 255, 0)` (прозрачная)
- Фокус: семантическая граница + контур через переменные CSS

**Вторичный песчаный**
- Фон: `#e5e5e0` (тёплый песчаный серый)
- Текст: `#000000`
- Отступы: 6px 14px
- Скругление: 16px
- Фокус: та же семантическая система границ

**Круговое действие**
- Фон: `#e0e0d9` (тёплый светлый)
- Текст: `#211922` (сливово-чёрный)
- Скругление: 50% (круг)
- Использование: действия с пинами, элементы управления навигацией

**Призрак / Прозрачный**
- Фон: прозрачный
- Текст: `#000000`
- Без границы
- Использование: третичные действия

### Карточки и контейнеры
- Пин-карточки с приоритетом фотографии и щедрым скруглением (12px–20px)
- Отсутствие традиционной тени блока на большинстве карточек
- Белые или тёплые туманные фоны
- Белая толстая граница 8px на некоторых контейнерах изображений

### Поля ввода
- Ввод электронной почты: белый фон, граница `1px solid #91918c`, скругление 16px, отступы 11px 15px
- Фокус: система семантических границ + контур через переменные CSS

### Навигация
- Чистый заголовок на белом или тёплом фоне
- Логотип Pinterest + строка поиска по центру
- Pin Sans 16px для навигационных ссылок
- Pinterest-красные акценты для активных состояний

### Обработка изображений
- Кирпичная сетка в стиле пинов (фирменный макет Pinterest)
- Скруглённые углы: 12px–20px на изображениях
- Фотография как основной контент — каждый пин является изображением
- Толстые белые границы (8px) на контейнерах избранных изображений

## 5. Принципы макета

### Система отступов
- Базовая единица: 8px
- Шкала: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- Большие скачки: 32px → 80px → 100px для отступов между секциями

### Сетка и контейнер
- Кирпичная сетка для контента пинов (фирменный макет)
- Центрированные секции контента с щедрой максимальной шириной
- Полноширинный тёмный подвал
- Строка поиска как основной элемент навигации

### Философия пространства
- **Плотность вдохновения**: Кирпичная сетка плотно укладывает пины — плотность контента И ЕСТЬ ценностное предложение. Пустое пространство существует между секциями, а не внутри сетки.
- **Дышит сверху, плотность снизу**: Героические/featured секции получают щедрые отступы; сетка пинов компактна и иммерсивна.

### Шкала скруглений
- Стандарт (12px): Маленькие карточки, ссылки
- Кнопка (16px): Кнопки, поля ввода, средние карточки
- Комфортный (20px): Featured-карточки
- Большой (28px): Крупные контейнеры
- Секция (32px): Элементы вкладок, большие панели
- Герой (40px): Героические контейнеры, крупные блоки-featured
- Круг (50%): Кнопки действий, индикаторы вкладок

## 6. Глубина и высота

| Уровень | Обработка | Использование |
|-------|-----------|-----|
| Плоский (Уровень 0) | Без тени | По умолчанию — пины опираются на контент, а не тень |
| Тонкий (Уровень 1) | Минимальная тень (из токенов) | Приподнятые оверлеи, выпадающие меню |
| Фокус (Доступность) | Кольцо `--sema-color-border-focus-outer-default` | Состояния фокуса |

**Философия теней**: Pinterest использует минимальные тени. Кирпичная сетка опирается на контент (фотографию) для создания визуального интереса, а не на эффекты высоты. Глубина исходит из тепла цветов поверхностей и щедрого скругления контейнеров.

## 7. Что делать и чего не делать

### Делать
- Использовать тёплые нейтральные цвета (`#e5e5e0`, `#e0e0d9`, `#91918c`) — тёплый оливковый/песчаный тон — это идентичность
- Применять Pinterest-красный (`#e60023`) только для основных CTA — он смелый и единственный
- Использовать исключительно Pin Sans — один шрифт для всего
- Применять щедрые скругления: 16px для кнопок/полей ввода, 20px+ для карточек
- Держать кирпичную сетку плотной — плотность контента — это ценность
- Использовать тёплые фоны бейджей (`hsla(60,20%,98%,.5)`) для тонких тёплых смывов
- Использовать `#211922` (сливово-чёрный) для основного текста — теплее чистого чёрного

### Не делать
- Не использовать холодные серые нейтральные — всегда тёплые/оливковые тона
- Не использовать чистый чёрный (`#000000`) в качестве основного текста — использовать сливово-чёрный (`#211922`)
- Не использовать кнопки в форме «таблетки» — скругление 16px округлое, но не «таблетка»
- Не добавлять тяжёлые тени — Pinterest плоский по дизайну, глубина из контента
- Не использовать малые скругления (<12px) на карточках — щедрое скругление является основным
- Не вводить дополнительные цвета бренда — красный + тёплые нейтральные — это полная палитра
- Не использовать тонкие насыщенности шрифта — Pin Sans минимум 400

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

### Контрольные точки
| Название | Ширина | Ключевые изменения |
|------|-------|-------------|
| Мобильный | <576px | Один столбец, компактный макет |
| Большой мобильный | 576–768px | Сетка пинов в 2 столбца |
| Планшет | 768–890px | Расширенная сетка |
| Небольшой десктоп | 890–1312px | Стандартная кирпичная сетка |
| Десктоп | 1312–1440px | Полный макет |
| Большой десктоп | 1440–1680px | Расширенные столбцы сетки |
| Ультраширокий | >1680px | Максимальная плотность сетки |

### Стратегия сворачивания
- Сетка пинов: 5+ столбцов → 3 → 2 → 1
- Навигация: строка поиска + иконки → упрощённая мобильная навигация
- Блоки featured: бок о бок → стек
- Герой: 70px → масштабируется пропорционально
- Подвал: тёмный многоколоночный → стек

## 9. Руководство по промптам для агентов

### Быстрая цветовая справка
- Бренд: Pinterest-красный (`#e60023`)
- Фон: Белый (`#ffffff`)
- Текст: Сливово-чёрный (`#211922`)
- Вторичный текст: Оливковый серый (`#62625b`)
- Поверхность кнопки: Песчаный серый (`#e5e5e0`)
- Граница: Тёплый серебристый (`#91918c`)
- Фокус: Синий фокус (`#435ee5`)

### Примеры промптов для компонентов
- «Создать герой: белый фон. Заголовок 70px Pin Sans насыщенность 600, сливово-чёрный (#211922). Красная кнопка CTA (#e60023, скругление 16px, отступы 6px 14px). Вторичная песчаная кнопка (#e5e5e0, скругление 16px).»
- «Оформить карточку пина: белый фон, скругление 16px, без тени. Фотография заполняет верхнюю часть, ниже описание 16px Pin Sans насыщенность 400 в #62625b.»
- «Создать круговую кнопку действия: фон #e0e0d9, скругление 50%, иконка #211922.»
- «Создать поле ввода: белый фон, 1px solid #91918c, скругление 16px, отступы 11px 15px. Фокус: синий контур через семантические токены.»
- «Оформить тёмный подвал: фон #33332e. Логотип Pinterest в белом цвете. Ссылки 12px Pin Sans в #91918c.»

### Руководство по итерациям
1. Тёплые нейтральные повсюду — оливковый/песчаный серый, никогда холодная сталь
2. Pinterest-красный только для CTA — смелый и единственный
3. 16px скругление на кнопках/полях ввода, 20px+ на карточках — щедро, но не «таблетка»
4. Pin Sans — единственный шрифт — компактный 12px для интерфейса, 70px для дисплея
5. Фотография несёт дизайн — интерфейс остаётся тёплым и минималистичным
6. Сливово-чёрный (#211922) для текста — теплее чистого чёрного