Руководство по стилю
Система фирменного стиля
КАМА ПРОФИ
Основной фирменный знак, система версий, правила применения и визуальные опоры для будущего сайта и бренд-носителей.
Основные версии
1. Основная горизонтальная
2. Основная вертикальная
Адаптивные версии
3. Инверсная на тёмном фоне
4. Компактный знак
5. Монохромная версия
Типографика
Montserrat
Геометрический гротеск с уверенной корпоративной подачей. Подходит для промышленного B2B: чисто, современно, без декоративного шума.
Aa Бб 123
Заголовки
Montserrat ExtraBold / 800
Надёжный партнёр вашего производства
64-72px / line-height 0.95-1.05
Подзаголовки
Montserrat Bold / 700
Аутстаффинг и подбор персонала для промышленных предприятий
32-40px / line-height 1.1-1.2
Основной текст
Montserrat Medium / 500, Regular / 400
Компания берёт на себя подбор, кадровое сопровождение, юридическую
ответственность и управление персоналом на объекте.
16-18px / line-height 1.5-1.65
Система отступов
Отступы и ритм
Для сайта и бренд-носителей используем единую шаговую систему отступов. Базовый модуль - 8px. Все внешние и внутренние интервалы собираются из кратных значений, чтобы блоки, текст и карточки держали один ритм.
XS
8px
микроотступы, иконки, подписи
S
16px
текст внутри карточек, списки
M
24px
внутренние отступы блоков, gap
L
32px
интервалы между смысловыми группами
XL
48px
отступы между секциями и крупными модулями
2XL
64px
hero и ключевые вертикальные разрывы
Язык
В интерфейсах, заголовках, подписях и служебном тексте в приоритете
использовать русский язык. Английские слова допустимы только там,
где без них нельзя обойтись.
Текст
Между заголовком и абзацем держать 16-24px. Между абзацами - 16px.
Длинные текстовые блоки не сжимать ниже line-height 1.5.
Блоки
Между карточками внутри одной секции использовать 24-32px. Между
крупными секциями страницы - 48-64px по вертикали.
Контейнеры
Внутренние padding карточек и модулей строить от 24px. Для hero,
типографики и логотипных блоков использовать 32-42px.
Структура сайта
Руководство по UX/UI сайта
Будущий сайт строится вокруг двух ключевых аудиторий: бизнеса и соискателей. Ниже зафиксированы основные разделы, ключевые страницы и обязательные UX-блоки, которые должны лечь в основу интерфейса.
01
Главная
Hero, две CTA, о компании, преимущества, язык, быстрые переходы.
02
Для бизнеса
Безопасность и экономия, калькулятор, услуги, этапы, кейсы, форма КП.
03
Соискателям
Условия работы, легальное трудоустройство, вакансии, анкета, фото.
04
Контакты
Реквизиты, телефоны, email, офис, график, карта, каналы связи.
Аудитории
Сайт должен явно разделять B2B-сценарии для клиентов и B2C-сценарии
для соискателей, не смешивая их в одном потоке.
Ключевой модуль
Калькулятор скрытых издержек является центральным UX-элементом
раздела «Для бизнеса» и требует отдельной проработки состояний.
Многоязычность
Все страницы и компоненты проектируются сразу под 5 языков:
RU, EN, UZ, TJ, TM. Переключатель языка постоянен во всех шаблонах.
Шаблоны
Для гида обязательно зафиксировать паттерны: главная, лендинг услуги,
вакансии, кейс, контакты, формы, успех и пустые состояния.
Сетка и контейнеры
Контентная сетка сайта
Для UX/UI сайта фиксируем единый контейнер, шаг колонок и правила адаптива. Все страницы должны собираться на одной сетке, чтобы hero, формы, карточки, калькулятор и контентные блоки выглядели согласованно.
Desktop
12 колонок
Контейнер: 1280-1360px, боковые поля: 40-48px, gap: 24px
Tablet
8 колонок
Контейнер: 100%, боковые поля: 24-32px, gap: 24px
Mobile
4 колонки
Контейнер: 100%, боковые поля: 16-24px, gap: 16px
Контейнер
Не растягивать текст и интерфейс на всю ширину экрана. Основной
контент должен жить в ограниченном контейнере.
Колонки
Все крупные секции собирать через колонки, а не случайное ручное
позиционирование блоков и отступов.
Адаптив
На mobile не только уменьшать размеры, но и перестраивать структуру:
длинные двухколоночные блоки переводить в одну колонку.
Читаемость
Длинные текстовые массивы, формы и калькулятор не должны становиться
слишком широкими, даже если экран это позволяет.
Цвета интерфейса
Роли UI-цветов
Помимо фирменной палитры, для сайта фиксируем роли цветов в интерфейсе. Это нужно, чтобы кнопки, тексты, поверхности, рамки и статусы использовались последовательно на всех страницах и во всех языковых версиях.
Основной
#0B1D3A - основные CTA, активные элементы, заголовки
Акцент
#0066FF - hover, акценты, ссылки, индикаторы
Поверхность
#FFFFFF - карточки, формы, светлые поверхности
Фон
#F5F7FA - фон секций, мягкие UI-подложки
Граница
rgba(11,29,58,0.12) - линии, разделители, input borders
Основной текст
#1A2B45 - основной интерфейсный текст
Вторичный текст
#55657E - пояснения, вторичный текст, подписи
Успех
#1F8B4C - успешная отправка, подтверждение, валидность
Предупреждение
#C78512 - предупреждения и пограничные сценарии
Ошибка
#C83A3A - ошибки форм, критические сообщения
CTA
Основные кнопки и ключевые действия использовать в `Primary`.
`Accent` применять как усиливающий цвет, а не как основной фон всех кнопок.
Текст
Для длинного текста использовать `Text Primary` и `Text Secondary`.
Не строить большие текстовые массивы на чистом синем фоне без необходимости.
Поверхности
Карточки, формы и спокойные секции собирать на `Surface` и
`Background`, чтобы сохранить воздух и читабельность.
Статусы
`Success`, `Warning` и `Error` использовать только для
функциональных состояний, а не как декоративную палитру.
Поля формы
Структура ввода
Формы для КАМА ПРОФИ должны выглядеть делово и прозрачно: четкая подпись, спокойная поверхность, понятное сообщение об ошибке и устойчивая верстка на всех языках и длинах текста.
Статус валидации
Поле заполнено корректно
Укажите корректный номер телефона
Выбор
Подписи
У каждого поля есть постоянный label над полем. Placeholder не заменяет подпись.
Размеры
Базовая высота input и select: `56px`. Внутренний горизонтальный padding:
`18-20px`. Радиус: `16px`.
Ошибки
Ошибку показывать рядом с полем ясным языком. Не использовать только цвет
без текста.
Карточки
Базовые паттерны
Сайт будет собираться из повторяемых карточек: преимущества, услуги, вакансии, кейсы и логотипы клиентов. Поэтому важно заранее зафиксировать единую геометрию, ритм заголовков и логику контента внутри блока.
Преимущество
Полная кадровая и юридическая ответственность
Карточка короткого тезиса. Используется на главной и в блоках доверия.
Услуга
Аутстаффинг для производственных объектов
Карточка услуги может содержать 2-3 строки описания и один спокойный CTA.
Вакансия
Комплектовщик на склад
График: вахта 30/45 дней • Проживание и сопровождение включены.
Клиент
ЛОГОТИП
Логотипы партнеров размещать в спокойной одинаковой сетке без визуального шума.
Структура
Заголовок, короткое описание и при необходимости CTA. Не перегружать
карточку лишними декоративными слоями.
Ритм
Все карточки внутри одной группы должны держать одинаковый padding,
радиус и вертикальный интервал.
Сетка
Desktop: 3-4 карточки в ряд. Tablet: 2. Mobile: 1. Логика сетки не
должна ломаться от длинного русского текста.
Состояния интерфейса
Сценарии отклика
Интерфейс должен быть понятным не только в идеальном состоянии. Нужно заранее зафиксировать, как сайт ведет себя при загрузке, ошибке, пустом результате и успешной отправке формы.
Загрузка
Использовать спокойные skeleton-блоки вместо скачков интерфейса.
Успешная отправка
Заявка отправлена
Пользователь должен сразу понимать, что действие завершено успешно.
Ошибка
Не удалось отправить форму
Ошибка должна объяснять, что произошло и что делать дальше.
Пустой результат
По вашему запросу вакансии пока не найдены
Даже пустой экран должен вести к следующему действию, а не обрывать сценарий.
Ясность
Состояние должно называться человеческим языком: без сухих системных формулировок.
Следующий шаг
Успех, ошибка и пустой результат должны подсказывать, что делать дальше.
Спокойствие
Не использовать агрессивные цветовые пятна и тревожные тексты без необходимости.
Калькулятор
Ключевой B2B-модуль
Калькулятор скрытых издержек — центральный инструмент для бизнеса. Он переводит абстрактное обещание выгоды в наглядный расчет и должен быть одним из самых продуманных UX-блоков всего сайта.
Количество сотрудников
25 человек
Период расчета
12 месяцев
Сценарий
Самостоятельный найм
Через КАМА ПРОФИ
Итоговая разница
1 480 000 ₽
Потенциальная экономия за счет снижения кадровой, административной и юридической нагрузки.
Получить коммерческое предложение
Логика
Пользователь должен понимать, из каких факторов складывается расчет, без ощущения черного ящика.
Конверсия
После результата нужен ясный CTA: запрос КП, консультация или отправка данных менеджеру.
Адаптив
На mobile блок перестраивается в одну колонку, но результат и CTA остаются сразу видимыми.
Шаблоны страниц
Каркас основных экранов
Чтобы дальше быстрее собирать сайт, нужно зафиксировать не только компоненты, но и типовые страницы: их порядок блоков, смысл и логику перехода пользователя.
Главная
Hero → преимущества → калькулятор → услуги → кейсы/доверие → форма → footer.
Для бизнеса
Проблема → решение → услуги → схема работы → кейсы → CTA → контакты.
Соискателям
Условия → вакансии → процесс трудоустройства → документы → форма отклика.
Контакты
Каналы связи → карта/адрес → реквизиты → быстрая форма связи.
Логика
Каждая страница должна вести пользователя по одной понятной задаче, а не смешивать все сразу.
Повторяемость
Порядок секций может меняться, но header, сетка, CTA и footer должны работать по одной системе.
Адаптив
На mobile страницы не просто сжимаются, а упрощаются по ритму, длине и приоритету блоков.
Медиа и визуальный стиль
Фото, иконки, графика
Визуальный язык сайта должен оставаться промышленным, деловым и современным. Фото и графика не должны превращать интерфейс в стоковую подборку или перегруженный корпоративный коллаж.
Фото производства
Реальные объекты, форма, техника безопасности, рабочие процессы, чистый кадр и правдивый контекст.
Кадрирование
Делать акцент на масштабе, людях, среде и фирменных носителях, не обрезая смысловые детали случайно.
Иконки
Только лаконичные line/light иконки в едином характере. Без клипарта и разношерстных наборов.
Обработка
Сдержанный контраст, холодноватый баланс, без грязных фильтров, кислотных градиентов и случайных эффектов.
Правдивость
Показывать реальные условия, объекты и людей, а не обезличенный визуальный шум.
Единый характер
Фото, иконки и графические модули должны ощущаться одной системой, а не случайным набором источников.
Чистота
Не использовать тяжелые тени, псевдо-3D, стоковый глянец и лишнюю декоративную промышленную атрибутику.
Коллекция иконок
Рабочий набор для сайта
Для сайта используем Font Awesome Pro 7.2.0 Light.
Базовый источник в проекте: assets/icons.
Услуги и процессы
Юр. защита
Персонал
Сопровождение
Управление
Партнерство
Этапы работы
Структура
Услуги B2B
Соискатели и документы
Соискатели
Специалисты
Идентификация
Договор
Документы
Миграция
Проверка
Поиск вакансий
Объекты, логистика, доверие
Производство
Склад
Безопасность
Логистика
Транспорт
Объект
Баланс рисков
Право
Контакты и интерфейс
Телефон
Email
Адрес
График
География
Языки
Меню
Переход
Источник
Используем только Font Awesome Pro 7.2.0 Light.
Стиль
Не смешивать `solid`, `regular` и сторонние библиотеки. Базовый стиль
сайта: легкие контурные иконки с единым визуальным весом.
Применение
Использовать иконки в сервисных карточках, преимуществах, документах,
контактах, навигации, формах и состояниях интерфейса.
Адаптивное поведение
Desktop, tablet, mobile
Адаптив в этой системе означает не просто уменьшение блоков, а приоритизацию контента, перестройку композиции и сохранение читабельной логики для бизнеса и соискателей на любом устройстве.
Desktop
2-4 колонки, сложные композиции, полный header, расширенные карточечные группы, калькулятор в 2 колонки.
Tablet
Сокращение до 2 колонок, уплотнение секций, упрощение сложных композиций без потери структуры.
Mobile
Одна колонка, короткие заголовки, CTA в зоне видимости, меньше декоративных слоев и быстрый доступ к действию.
Приоритет
На маленьком экране первыми остаются смысл, контакт, CTA и ключевой контент, а не вторичные детали.
Не сжимать, а перестраивать
Двухколоночные блоки, таблицы, калькулятор и сложные группы должны логично раскладываться в одну колонку.
Читаемость
На mobile заголовки, карточки и формы не должны становиться тесными или перегруженными строками.
Конверсия
Телефон, форма и основной CTA должны оставаться доступными и заметными на всех брейкпоинтах.
Принципы использования
- Масштаб. Знак должен уверенно читаться как вместе с логотипом, так и отдельно: в favicon, на каске, нашивке и в интерфейсных иконках.
- Контраст. Использовать только фирменные сочетания: navy, white и electric blue. Не вводить случайные дополнительные цвета.
- Минимализм. Избегать декоративного шума: клипарта, шаблонных индустриальных иконок, лишних эффектов и перегруженной графики.
- Система. Форма знака может использоваться как графический модуль в транспорте, спецодежде, навигации, баннерах и цифровых интерфейсах.