Style Guide
Справочник визуального стиля приложений и сайтов iprotocol.
Базовые токены
| Токен | Значение | Назначение |
|---|---|---|
| Шрифт | SF Pro, системный sans-serif | Все интерфейсные элементы |
| #333333 | Основной текст | Заголовки, названия карточек |
| #6f7c87 | Muted | Подписи полей, вспомогательный текст |
| #E1E6E7 | Контрол обычный | Кнопки, вкладки |
| #CED3D4 | Контрол активный | Hover и активное состояние |
| #BEC3C4 | Бордюр контрола | Активные кнопки и вкладки |
Типографика сайта
Заголовки сайта
H1 48px / 500
H2 36px / 500
H3 28px / 500
H4 22px / 500
Тексты сайта
Основной текст сайта 18px / 400.
Вторичный текст сайта 16px / 400.
Вспомогательный текст сайта 14px / 400.
CAPTION 12px / 500
| Цвет основного текста | #333333 |
| Цвет вторичного текста | #414B56 |
| Цвет вспомогательного текста | #6F7C87 |
| Цвет подписи | #6F7C87 |
Заголовки
4 уровня
Заголовок H1 26px / 500
Заголовок H2 22px / 500
Заголовок H3 18px / 500
Заголовок H4 15px / 500
Правило
Заголовки спокойные, без тяжелого жирного начертания. Для компактных панелей использовать 15-18px.
Текст и ссылки
4 типа текста
Основной текст 14px / 400
Вторичный текст 13px / 400
Подпись 12px / 300
CAPTION 11px / 400
| Цвет основного текста | #333333 |
| Цвет вторичного текста | #414B56 |
| Цвет подписи | #6F7C87 |
| Цвет caption | #6F7C87 |
Ссылки
Ссылка в карточке: Данат Шаль
| Цвет ссылки | #2067B0 |
| Начертание | 500 |
| Подчеркивание | Только при наведении |
Кнопки
Вкладки
Прямоугольные
Компании
Контакты
Овальные
Активная
Обычная
Контурные
Серая контурная
Черная контурная
Поля ввода
Input
Параметры
| Толщина бордюра | 1px solid |
| Цвет бордюра | #C9D1D8 |
| Цвет бордюра при фокусе | #0077FF |
| Радиус | 8px для поиска, 3px для компактных настроек |
| Высота | 34px |
| Цвет текста | #414B56 |
Фон и текст на цветном фоне
Серый
Фон #E1E6E7
Текст #56595A
Зеленый
Фон #D9F7BE
Текст #2B5514
Красный
Фон #FFD6D6
Текст #7A1F1F
Желтый
Фон #FFF1B8
Текст #6B4D00
Оранжевый
Фон #FFE0B2
Текст #7A3B00
Синий
Фон #E6F4FF
Текст #145369
Правило: светлый цветной фон получает темный родственный текст, насыщенный темный фон получает белый текст.
Окна и выпадающие списки
Выпадающий список
Параметры меню
| Фон | #FFFFFF |
| Радиус | 18px |
| Минимальная ширина | 220px |
| Внутренний отступ | 12px сверху/снизу, 19px слева/справа у пунктов |
| Шрифт пункта | 15px / 400 |
| Цвет текста пункта | #686868 |
| Фон пункта при наведении | #F7F7F7 |
| Акцент поля, чекбокса и ссылок | #2067B0 |
| Тень | 0 10px 28px rgba(0,0,0,.18) |
Пункты и чекбоксы
Checkbox
Параметры
| Размер | 15px x 15px |
| Цвет чекбокса | #2067B0 |
| CSS-свойство | accent-color |
| Gap до текста | 8px |
| Высота строки | 44px |
Пилюля выбора пользователя
Выбранные пользователи
Семёнов Василий
Меркулов Даниил
Скоропупов Алексей
Пустое состояние
Не выбраны
Параметры
| Контейнер | min-height 34px, padding 6px, gap 6px, flex-wrap |
| Фон контейнера | #FBFCFD |
| Толщина бордюра контейнера | 1px solid |
| Цвет бордюра контейнера | #EDF1F5 |
| Радиус контейнера | 8px |
| Пилюля | inline-flex, min-height 24px, padding 2px 8px, gap 6px |
| Радиус пилюли | 999px |
| Фон пилюли | #FFFFFF |
| Бордюр пилюли | 1px solid |
| Цвет бордюра пилюли | #D8E0EA |
| Шрифт текста | 12px / 400 |
| Цвет текста | #182231 |
| Крестик | 18x18px, круг |
| Фон крестика | #EDF1F5 |
| Цвет крестика | #647084 |
Стрелки у кнопок выпадающих списков
Кнопка
Сфера деятельности ⌄Параметры стрелки
| Размер | 9px x 5px |
| Отступ от текста | 5.5px через gap |
| Толщина линии | 1.1px |
| Концы | Округленные stroke-linecap/linejoin |
| Вертикальное положение | translateY(1.5px) |
Поле с перетягиванием
Draggable field
Название поля в карточке
Параметры
| Высота | 34px minimum |
| Радиус | 8px |
| Толщина бордюра | 1px solid |
| Цвет бордюра | #DFE5EA |
| Фон | #FFFFFF |
| Цвет текста | #414B56 |
| Handle | 2 столбца по 3 точки, 16px x 22px |
| Точки handle | #9AA3AD |
Крестик закрытия
Close action
Параметры
| Размер кнопки | 34px x 34px |
| Радиус hover-фона | 8px |
| Фон спокойный | transparent |
| Фон при наведении | #F7F7F7 |
| Цвет крестика | #647084 |
| Цвет крестика при наведении | #2C2D2E |
| Линии крестика | 12px x 1.5px, округленные концы |
Календарь
Поле даты
Параметры календаря
| Поле | 39px, иконка календаря слева, активный border без тени |
| Цвет активного border | #0077FF |
| Попап | 272px x 304px, радиус 18px |
| Фон попапа | #FFFFFF |
| Отступ до дат | 10px от края попапа до кружка даты |
| Дата | 36px x 36px, текст 14px / 400 |
| Фон даты при наведении | #D5F5FE |
| Сегодня | Текст без заливки |
| Цвет сегодняшней даты | #00C9FB |
| Выбранная дата | Белый текст на синем фоне |
| Фон выбранной даты | #00C9FB |
| Месяцы и годы | 84px x 36px, радиус 18px; выбранное значение только синим текстом, пилюля только на hover |
| Цвет стрелок | #A7ADB5 |
| Цвет стрелок при наведении | #505C6A |
Канбан-элементы
Стадия
Новая стадия12
Карточка
Параметры карточки
| Ширина колонки | 300px |
| Левая линия | 4px solid цвет стадии |
| Остальная рамка | 1px solid цвет стадии |
| Радиус | 0 12px 12px 0 |
| Тень | Нет |