Style Guide
Справочник визуального стиля приложений и сайтов iprotocol.
Базовые токены
| Токен | Значение | Назначение |
|---|---|---|
| Шрифт | SF Pro, системный sans-serif | Все интерфейсные элементы |
| #333333 | Основной текст | Заголовки, названия карточек |
| #6f7c87 | Muted | Подписи полей, вспомогательный текст |
| #E1E6E7 | Контрол обычный | Кнопки, вкладки |
| #CED3D4 | Контрол активный | Hover и активное состояние |
| #BEC3C4 | Бордюр контрола | Активные кнопки и вкладки |
Заголовки
4 уровня
Заголовок H1 26px / 500
Заголовок H2 22px / 500
Заголовок H3 18px / 500
Заголовок H4 15px / 500
Правило
Заголовки спокойные, без тяжелого жирного начертания. Для компактных панелей использовать 15-18px.
Текст и ссылки
4 типа текста
Основной текст 14px / 400 / #333333
Вторичный текст 13px / 400 / #414B56
Подпись 12px / 300 / #6F7C87
CAPTION 11px / 400 / #6F7C87
Ссылки
Ссылка в карточке: Данат Шаль
Цвет ссылки #2067B0, начертание 500, underline только на hover.
Кнопки
Варианты
Черная залитая
Серая залитая
Зеленая контурная
Красная контурная
Бордюр кнопки
| Толщина | 1px |
| Радиус | 8px |
| Активный бордюр | #BEC3C4 |
| Высота | 34px |
| Горизонтальный отступ | 15px |
Вкладки
Прямоугольные
Компании
Контакты
Овальные
Активная
Обычная
Контурные
Серая контурная
Черная контурная
Поля ввода
Input
Параметры
| Бордюр | 1px solid #C9D1D8 |
| Радиус | 8px для поиска, 3px для компактных настроек |
| Высота | 34px |
| Текст | #414B56 |
Фон и текст на цветном фоне
Серый #E1E6E7 / #56595A
Зеленый #D9F7BE / #2B5514
Красный #FFD6D6 / #7A1F1F
Желтый #FFF1B8 / #6B4D00
Оранжевый #FFE0B2 / #7A3B00
Синий #E6F4FF / #145369
Правило: светлый цветной фон получает темный родственный текст, насыщенный темный фон получает белый текст.
Окна и выпадающие списки
Выпадающий список
Параметры меню
| Фон | #FFFFFF |
| Радиус | 18px |
| Минимальная ширина | 220px |
| Внутренний отступ | 12px сверху/снизу, 19px слева/справа у пунктов |
| Текст пункта | #686868, 15px / 400 |
| Hover пункта | #F7F7F7 |
| Тень | 0 10px 28px rgba(0,0,0,.18) |
Пункты и чекбоксы
Checkbox
Параметры
| Размер | 15px x 15px |
| Цвет | #2067B0 через accent-color |
| Gap до текста | 8px |
| Высота строки | 44px |
Стрелки у кнопок выпадающих списков
Кнопка
Сфера деятельности ⌄Параметры стрелки
| Размер | 9px x 5px |
| Отступ от текста | 5.5px через gap |
| Толщина линии | 1.1px |
| Концы | Округленные stroke-linecap/linejoin |
| Вертикальное положение | translateY(1.5px) |
Канбан-элементы
Стадия
Новая стадия12
Карточка
Параметры карточки
| Ширина колонки | 300px |
| Левая линия | 4px solid цвет стадии |
| Остальная рамка | 1px solid цвет стадии |
| Радиус | 0 12px 12px 0 |
| Тень | Нет |