Перейти к содержимому

SkiMobile · действующее руководство по бренду и стандартам сети.

Визуальная система

Цвета

Фирменная палитра, темы, акценты и состояния. Токены, контраст, RGB/CMYK и готовые файлы.

Библиотека цветов

Загружаем палитру…

Роли вместо случайных оттенков

Палитра SkiMobile строится на глубоком синем #0A1B3D, горном голубом #6DB9E5 и белом #FFFFFF. Глубокий синий создаёт опору, белый оставляет воздух, голубой выделяет ключевой элемент. В рекламном макете отправная пропорция — 70% нейтрального поля, 20% синего и 10% акцента; иерархия сообщения важнее буквального подсчёта площади.

Логотип сохраняет собственные цвета: #007DC4, #E31E24, #2B2A29 и белый. Цветные мастеры и монохром берите из библиотеки логотипа. Пользовательские темы и акценты меняют интерфейс, сохраняя идентичность знака и печатных материалов.

Светлая и тёмная темы

Семантическая роль компонента одинакова в обеих темах. Поверхности: --background, --surface, --muted и --popover. Текст: --foreground, --muted-foreground и --popover-foreground. Кнопка использует связанную пару фона и подписи: --accent / --accent-foreground или --primary / --primary-foreground.

Голубой — интерфейсный акцент по умолчанию: #0072AB в светлой теме и #70C8F3 в тёмной. Настройки также предлагают бирюзовый, фиолетовый, зелёный и янтарный. Повышенный контраст усиливает текст и границы; в светлой теме акценты становятся темнее. Системная тема следует устройству. Все 20 сочетаний используют читаемые пары текста и кнопок.

Библиотека следует настройкам сайта и показывает фактические CSS-значения. Для проверки другого режима используйте выбор темы, контраста и акцента образца. Этот выбор сохраняется в ссылке, не меняя настройки гостя. Полный CSS содержит все режимы, CSS режима — выбранное сочетание.

Цвет действия и цвет состояния

--accent обозначает выбранное действие и активную навигацию. --info — полезную информацию, --success — успешно завершённое действие, --warning — ограничение или необходимость внимания. Эти состояния сохраняют свой смысл при смене акцента: зелёная тема не превращает предупреждение в зелёное.

Красный --destructive зарезервирован для ошибок, критических сообщений и действий с последствиями: #C52228 в светлой теме и #FF747B в тёмной. Для обычной акции, скидки, активной вкладки или счётчика используйте акцент. Красный внутри логотипа остаётся фирменным цветом знака.

Состояние всегда сопровождается текстом и отличимой иконкой. Ошибка называет проблему и следующий шаг; предупреждение объясняет ограничение. Недоступное действие использует --disabled / --disabled-foreground и реальное disabled-состояние. Цвет не служит единственным способом передачи смысла.

Читаемость, границы и фокус

Обычный текст: не ниже 4,5:1. Крупный текст от 24 px, либо от 18,67 px при жирном начертании: не ниже 3:1. Значимые иконки, границы полей и авторский индикатор фокуса: не ниже 3:1 к соседней поверхности. Для обычного текста AAA — 7:1. Решение принимается по точному значению, до округления.

--border разделяет карточки и декоративные области; он не заменяет различимую границу поля. Для неё используйте --control-border, для фокуса — --ring. Фокус показывается с отступом от элемента, чтобы цвет кнопки не поглощал контур. Проверяйте соседние поверхности, прозрачность и реальное состояние компонента.

Не используйте #6DB9E5 как обычный текст на белом и не ослабляйте читаемый текст прозрачностью. Для информации на фото добавляйте ровную подложку. Повышенный контраст и системные принудительные цвета сохраняют подписи, состояния и фокус. Проверка палитры подтверждает сочетания цветов; доступность всего продукта проверяется отдельно.

Экран и производство

Для экрана используйте sRGB: HEX, RGB, CSS, JSON и RGB ASE. SVG-карта и PDF-справочник помогают сверить макет. CMYK ASE содержит семь именованных процессных рецептур, согласованных с существующими CMYK-мастерами логотипа. Эти числа описывают DeviceCMYK; профиль типографии применяется при подготовке тиража.

Перед тиражом укажите материал, способ нанесения, профиль и требования типографии. Сделайте цветопробу на конечном материале и сравните голубой, красный и глубокий синий при одинаковом освещении. Готовые рецептуры не переименовываются в Pantone, а справочник не маркируется как PDF/X.

Белый 0 / 0 / 0 / 0 означает отсутствие краски на белом материале. На тёмной основе, при тиснении, вышивке или отдельной белой краске используйте одноцветный векторный мастер и самостоятельную производственную спецификацию. Мелкие надписи печатайте одной краской; не имитируйте чёрный текст четырёхкрасочной заливкой.

Файлы и внедрение

Разработчик подключает полный CSS и использует семантические переменные. Дизайнер импортирует RGB ASE или JSON-токены; для печатного макета — CMYK ASE. Векторная карта палитры не заменяет мастер логотипа. Комплект содержит исходники, PDF RU/EN и инструкцию; у каждого файла указаны версия, размер и SHA-256.

JSON использует формат Design Tokens 2025.10: тип color, пространство srgb, компоненты 0–1 и alpha. Фирменные цвета находятся в identity, режимы интерфейса — в modes. Изменения вносятся в shared/colors, затем запускаются colors:generate и colors:check; CSS сайта и библиотека обновляются вместе.

Передача между носителями

Цветные логотипы сохраняют свою палитру; Моби и физические носители используют постоянный глубокий синий, голубой и белый. Пользовательские пять акцентов меняют интерфейс, включая пиктограммы действий, но не красят исходный логотип и маскота.

SVG-шаблоны применения имеют экранный RGB. Профиль CMYK и особенности бумаги задаёт производственная подготовка по согласованной цветопробе. Не называйте автоматический пересчёт RGB универсальным печатным стандартом.