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

Иерархия

Принципы

• Компактная шкала кегля: Диапазон 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. Глубина и высота

Философия теней: 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. Адаптивное поведение

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

Стратегия сворачивания

• Сетка пинов: 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) для текста — теплее чистого чёрного