vai8
Расширенная версия. Минимальная высота — 24 пикселя.
Каталог · редакция 2026-07-27
Графические элементы
производственного сайта
Пятнадцать групп графики, без которых сайт в 2026 году выглядит недоделанным. Каждый образец — рабочая разметка на токенах vai8, а не картинка. Переключатель тем в шапке показывает поведение в обеих темах: графика обязана держать оба фона.
01
Логотип и его версии
Одного файла недостаточно. Нужен набор: полный знак, монохром для печати, инверсия для пёстрых подложек и обозначенное защитное поле.
Основной
Монохром
vai8
Для печати, гравировки и одноцветных подложек.
Инверсия
vai8
Плашка акцентом, когда знак ложится на снимок или пёстрый фон.
Защитное поле
vai8
Свободное поле вокруг знака — не меньше высоты символа.
02
Фавиконы и иконки приложения
В 2026 достаточно трёх файлов вместо прежней дюжины: SVG с поддержкой тёмной темы, один растровый запасной и иконка для домашнего экрана.
Размерный ряд
888
Знак обязан читаться на 16 пикселях — детали убираются.
favicon.svg · favicon.ico 32Домашний экран
8
Без прозрачности, с полями по краю — система скруглит сама.
apple-touch-icon 180×180Манифест
88
Квадратная и маскируемая версии для установки как приложения.
192 · 512 · maskable03
Карточка для ссылок и соцсетей
Изображение, которое видят при отправке ссылки в мессенджер. Отсутствие карточки заметнее плохой карточки: ссылка выглядит недоделанной.
Открытый граф
vai8 — единый язык интерфейсатокены · компоненты · правила
Крупный текст: в ленте карточка часто шириной в палец.
1200×630 · до 300 КБКвадратная
vai8дизайн-система
Для площадок, обрезающих широкий формат по центру.
1200×120004
Иконочный набор
Один набор на весь сайт: единая сетка, одинаковая толщина линии, одинаковые скругления. Смешение двух наборов видно сразу и читается как небрежность.
Штриховой, сетка 24
Толщина 1.8, скругление концов, поле 2 пикселя внутри клетки.
stroke-width 1.8 · 24×24Акцентные
Акцентом красится только то, что действует или требует внимания.
05
Индикаторы состояния
Состояние обязано читаться формой, а не только цветом: при нарушении цветовосприятия зелёный и красный неразличимы. Точка, подпись и позиция несут смысл вместе с оттенком.
Метки
Готово
Ожидает
Сбой
Черновик
Цвет плюс слово. Одного цвета недостаточно.
Счётчики
31299+
Моноширинные цифры, чтобы счётчик не дёргался при смене значения.
Полоса важности
Критично
Предупреждение
К сведению
Для списков и журналов: важность видна боковым зрением.
06
Аватары
Нужны три варианта: с фотографией, с инициалами при её отсутствии и групповой стек. Плюс индикатор присутствия, если продукт диалоговый.
Инициалы и присутствие
АКМП
ДС
Запасной вариант обязателен: фотография есть не у всех.
Группа
АКМПДС
+7
Перекрытие на треть, остаток числом. Порядок устойчивый.
07
Графика ожидания
Четыре разных случая, подменять один другим нельзя: неизвестная длительность, известная доля, загрузка содержимого и фоновое обновление.
Неизвестное время
Спиннер уместен до трёх секунд. Дальше нужен текст о происходящем.
Скелетон
Повторяет будущую раскладку — страница не прыгает при подстановке.
Известная доля
62 % · осталось 40 секунд
Полоса плюс оценка времени. Без оценки полоса тревожит.
Кольцо
Компактная замена полосе — для карточек и плиток.
08
Пустые состояния и ошибки
Три разных пустоты требуют трёх разных рисунков: ничего ещё не создано, ничего не найдено по запросу, произошёл сбой. Один рисунок на все случаи вводит в заблуждение.
Ещё ничего нет
Пока пустоСоздайте первую запись
Ведёт к действию, а не констатирует пустоту.
Ничего не найдено
Ничего не нашлосьПопробуйте короче или снимите фильтры
Подсказывает, что именно изменить в запросе.
Сбой
Не удалось загрузитьПовторить попытку
Всегда с кнопкой повтора: тупик недопустим.
09
Фоны и атмосфера
Плоская заливка выдаёт шаблон. Слой фактуры даёт глубину, но обязан гаситься маской к краям — иначе перетягивает внимание с содержимого.
Инженерная сетка
Задаёт масштаб. Шаг кратен базовой сетке отступов.
Свечение акцентом
Направляет взгляд в область заголовка. Один источник на экран.
Точки
Спокойнее сетки. Уместно под плотным содержимым.
Приглушённая плоскость
Подложка второго уровня для выделения блоков.
10
Диаграммы
Часть системы, а не вставка из библиотеки. Своя палитра, свои подписи, подчёркнутая последняя точка, приглушённая сетка.
Спарклайн
Без осей. Последняя точка выделена — она и есть сообщение.
Столбцы
Акцентом только значимый столбец, остальные нейтральны.
Тепловая карта
Одна шкала насыщенности вместо радуги.
11
Процессы и последовательности
Нумерация уместна там, где порядок несёт смысл: оформление заказа, проверка документов, установка. В остальных случаях цифры — украшение.
Шаги
1
2
3
4
Пройденное, текущее и предстоящее различаются формой, не только цветом.
Временная шкала
Заявка принята
Ключ выпущен
Подключение
Для событий с датами, где важна хронология.
12
Медиа и заглушки
Каждое изображение обязано занимать своё место до загрузки — иначе страница прыгает под курсором. Соотношение сторон задаётся заранее, всегда.
Широкий формат
16 : 9
Обложки, видео, карточки материалов.
width + height обязательныКвадрат
1 : 1
Товары, участники, плитки каталога.
Классический
4 : 3
Фотографии, снимки экрана.
AVIF → WebP → JPEG13
Состояния наведения и фокуса
Кликабельное обязано выглядеть кликабельным до касания, а фокус с клавиатуры — быть видимым всегда. Это графика, её проектируют вместе с остальным.
Наведение
Подъём, смена границы, тень. Только transform и opacity.
Кольцо фокуса
Вид в фокусе
Толщина 3 пикселя, контраст к обеим подложкам.
Недоступно
Недоступно
Приглушение плюс курсор запрета. Причина — рядом текстом.
14
Курсоры и зоны нажатия
Курсор — тоже графика интерфейса. Минимальная зона нажатия в 2026 году — 24 на 24 пикселя, это обязательное требование доступности, а не пожелание.
Зона нажатия
24 × 24 — минимум
Видимая иконка может быть меньше, зона нажатия — нет.
Виды курсора
указатель
текст
захват
запрет
Наведите на метки — курсор обязан соответствовать действию.
15
Форматы и вес
Сводка на 2026 год. Растр без современного формата и векторной альтернативы — прямая потеря в скорости загрузки.
| Что | Формат | Потолок веса |
|---|---|---|
| Логотип, иконки | SVG | 10 КБ |
| Фотографии | AVIF + WebP | 200 КБ |
| Главное изображение | AVIF, приоритет загрузки | 150 КБ |
| Карточка ссылки | PNG или JPEG | 300 КБ |
| Анимация интерфейса | CSS или Lottie | 50 КБ |
| Видео-фон | AV1 с запасным H.264 | 2 МБ |