Визуальный язык
SEETO живёт на тёмной базе #0a0a0b с одним уверенным акцентом — rose. Остальные цвета
дисциплинируют, а не соревнуются с ним. Нажмите на значение, чтобы скопировать его.
Primitive-цвета (--seeto-color-*) — это исходные значения без контекста. Semantic-токены
(--seeto-bg-*, --seeto-text-*, --seeto-action-* и другие) указывают
на них по назначению и это то, что нужно использовать в интерфейсах и материалах — не примитивы напрямую.
Полный список semantic-токенов — в файле
design-system/tokens.css, который можно скачать на странице
«Материалы».
Rose
Основной акцент: primary-действия, бейджи событий, ссылки-акцент.
Orange
Альтернативный акцент: вторичные CTA, тёплые карточные акценты.
Cyan
Декоративный акцент карточек контента.
Olive
Декоративный акцент карточек контента.
Sand
Декоративный акцент карточек контента.
Impulse 500 — отдельный от продуктовой палитры цвет. Он существует только для одной
задачи: акцентная версия логотипа на светлом фоне (см. страницу «Логотип»). Это
не то же самое, что Rose из акцентной палитры выше — цвета близки по тону, но это два
разных токена с разным назначением. Не используйте Impulse 500 как замену Rose в интерфейсе
продукта, и не используйте Rose для перекраски логотипа.
Impulse 500
Только логотип: версия «Impulse» для светлого фона. Не для UI продукта.
Neutral 0
Основной текст и иконки на тёмном фоне.
Neutral 25
Светлый фон карточек на светлой версии.
Neutral 50
Светлые поверхности, светлый вариант UI.
Neutral 100
Вторичный текст на тёмном фоне.
Neutral 200
Третичный текст, неактивные иконки.
Neutral 300
Третичный текст, разделители на светлом фоне.
Neutral 400
Приглушённый текст, неактивные вкладки.
Neutral 500
Disabled-поверхности.
Neutral 600
Границы карточек, вторичные кнопки.
Neutral 700
Поверхность карточек по умолчанию.
Neutral 800
Приглушённая поверхность, приподнятые панели.
Black / Neutral 900
Базовый фон приложения.
Warm graphite
Текст поверх тёплых/светлых карточных акцентов.
Warm gray
Приглушённый текст в меню и карточках.
Cool gray
Вспомогательный холодный нейтральный тон.
Success
Успех, положительные статусы, «Можно».
Warning
Предупреждение, статус «Обновляется».
Error
Ошибка, «Нельзя», деструктивные действия.
Info
Информационные сообщения.
Можно
Один rose-акцент на экран для главного действия. Всё остальное — нейтральные тона.
Нельзя
Смешивать rose, orange и cyan в одном блоке как равнозначные акценты — палитра теряет иерархию.
Можно
Использовать --seeto-action-alt-text (графитовый) поверх orange — контраст 2,85:1 для
белого недостаточен, поэтому текст на этом фоне всегда тёмный.
Нельзя
Ставить белый текст поверх orange или sand-акцента — это ниже порога WCAG AA.
| Переменная | Значение по умолчанию | Назначение |
|---|---|---|
--seeto-bg-base | #0a0a0b | Базовый фон приложения |
--seeto-bg-card-default | #1e1e21 | Фон карточки события |
--seeto-text-primary | #ffffff | Основной текст |
--seeto-text-secondary | #b3b7be | Вторичный текст |
--seeto-action-primary-bg | #b72e3f | Фон основной кнопки |
--seeto-action-primary-bg-hover | #c73b4e | Hover основной кнопки |
--seeto-action-primary-bg-active | #9f2435 | Active основной кнопки |
--seeto-border-default | rgba(255,255,255,.2) | Граница по умолчанию |
--seeto-focus-ring | #ffffff | Кольцо фокуса |
Нужен цвет, которого нет в палитре, — сначала спросите, точно ли он нужен.