Визуальный язык

Компоненты

Компоненты, от которых зависит узнаваемость SEETO — карточки событий, бейджи и иллюстрации, с примерами и правилами использования.

Обновлено 14 августа 2026 Опубликовано Версия 0.6

Бейдж — `ds-badge`

Назначение: короткий статус-лейбл на карточке. Оси: data-tone (event/place/collection).

Событие Место Подборка

Date badge — `ds-date-badge`

Назначение: дата и время в углу карточки события. Радиус — 16px 16px 4px, минимальная ширина — 59 px.

14:2012 февраля

Карточка события — `ds-event-card`

Назначение: главный строительный блок ленты. Устройство: изображение → градиентная подложка → date-badge → контент (тег, заголовок, описание) → опциональный подвал с CTA. Ниже — пять готовых сочетаний поверхности карточки с фото, у каждого своя ситуация применения.

Карточка события — Dark Default: тёмная подложка, белый текст — Dark Default Универсальный вариант по умолчанию. Берите его, если не уверены, какой выбрать, — тёмная подложка держит текст читаемым на любом фото.

Карточка события — Light Invert: светлая подложка, тёмный текст — Light Invert Для фото, которые «тонут» под тёмной подложкой (светлое небо, светлый фон). Подложка и текст светлые, тег и текст — тёмные.

Карточка события — Colored with CTA: подложка в цвет фото, есть кнопка «Забронировать» — Colored with CTA Подложка окрашивается в доминирующий тон фото. Используйте для событий с прямым бронированием — есть место и кнопка действия.

Карточка события — Colored: подложка в цвет фото, без кнопки бронирования — Colored Тот же цветной подбор подложки, но без строки бронирования — для витринных карточек и подборок, где нет прямого действия.

Карточка события — Light Colored: светлая подложка в цвет фото, есть кнопка «Забронировать» — Light Colored Colored with CTA для светлых/пастельных фото — подложка светлая в тон фото, текст тёмный.

Референс — Figma, «Feed cards». Изображения также доступны на странице «Материалы».

Ошибка использования: не смешивать несколько цветных карточек (Colored/Colored with CTA/Light Colored) подряд в одной ленте без хотя бы одной Dark Default между ними — акценты гасят друг друга.

Иллюстрации

Назначение: лёгкие line-art иллюстрации жестов рук с точечным цветным акцентом — для пустых состояний, онбординга и декоративных акцентов интерфейса. Раздел пополняется — сейчас показаны первые 5 иллюстраций, набор будет расти.