Доверие
Спокойная светлая подача, высокий контраст и отсутствие декоративного шума.
Дизайн-система A3
Визуальный язык продуктовых сайтов A3. Страница собрана на тех же токенах, что и весь сайт: образцы ниже показывают реальные значения, а не картинку с ними.
Пять качеств визуального языка
Предметность
Каждый блок объясняет конкретную функцию, сценарий или результат, а не абстрактное обещание.
Редакционная выразительность
Крупная типографика, асимметричные сетки и разные масштабы блоков создают ритм без перегруженной анимации.
Материальность
Иллюстрации выглядят как физические композиции из бумаги, керамики и графита вместо шаблонных 3D-объектов.
Семейное сходство
Палитра, типографика, радиусы и поведение адаптива одинаковы во всех продуктах A3. Меняются сюжет и композиция.
Палитра
Восемь базовых цветов. Все производные оттенки вычисляются из них, поэтому смена базового значения меняет весь сайт.
#F5F6FA--c-bgФон страницы и мягкие подложки
#FFFFFF--c-surfaceКарточки, поля, текст на тёмном
#212527--c-inkОсновной текст, тёмные панели, кнопки
#6B6B6B--c-mutedПобочный текст и неактивные состояния
#51C247--c-successУспех и подтверждение
#DF720C--c-warningПредупреждение и ручная проверка
#E83437--c-errorОшибка и критическое состояние
#6C5CE7--c-accentФокус, активная ссылка, точечный акцент
Правила применения
- Основная кнопка всегда тёмная, белая кнопка живёт только внутри тёмной панели.
- Зелёный, оранжевый и красный несут смысл. Как декор они не используются.
- Фиолетовый применяется точечно: подчёркивание активного пункта, фокус, ссылка.
- Новый цвет не попадает в компонент напрямую: сначала появляется семантический токен.
- Чистый чёрный не используется: тёмный тон холоднее и лучше ложится на подложку.
Типографика
Golos Text, self-hosted. Шрифт подходит кириллице, расширенной латинице и продуктовой подаче.
Правила текста
- Заголовок первого экрана занимает не больше двух строк на desktop.
- Основной текст ограничивается примерно 44-65 символами в строке.
- Uppercase не используется как постоянный декоративный приём.
- Длинное и короткое тире не применяются: точка, двоеточие или запятая.
- Копирайтинг конкретный: функция, условие, результат, ограничение.
Главный заголовокПлатформа собирает документооборот, финансы и кадры в одном контуре
Заголовок секцииПлатформа собирает документооборот, финансы и кадры в одном контуре
Заголовок карточкиПлатформа собирает документооборот, финансы и кадры в одном контуре
Основной текстПлатформа собирает документооборот, финансы и кадры в одном контуре
Вторичный текстПлатформа собирает документооборот, финансы и кадры в одном контуре
Подпись и метаинформацияПлатформа собирает документооборот, финансы и кадры в одном контуре
Форма и поверхности
Три радиуса покрывают весь интерфейс. Тени холодные и очень мягкие, они не ставятся каждой белой поверхности по умолчанию.
Типы поверхностей
- Фон страницы без контейнера, когда иерархию создаёт сетка.
- Белая карточка с тонкой холодной границей.
- Мягкая карточка без цветной границы на подложке.
- Тёмная панель для одного важного тезиса или финального призыва.
28pxКарточки, крупные изображения, тёмные панели
12pxПоля, компактные плашки, внутренние поверхности
999pxКнопки, переключатели, фильтры
Компоненты
Базовые элементы в реальном исполнении.
Кнопки
Плашки статусов
УспехВниманиеОшибкаИнформация
Поле формы
Label всегда над полем, placeholder его не заменяет.
Движение
Движение помогает иерархии, а не демонстрирует технологию.
- Появление секции: прозрачность и сдвиг на 22 пикселя, длительность 0.65 секунды.
- Переход между страницами: прозрачность и сдвиг на 10 пикселей, около 0.28 секунды.
- Кнопка поднимается на 2 пикселя при наведении и слегка сжимается при нажатии.
- Кликабельная карточка поднимается на 5 пикселей и получает мягкую тень.
- При включённом уменьшении движения анимации становятся практически мгновенными.
Чего мы не делаем
- Крупных фиолетовых или синих контейнеров без семантической причины.
- Одинаковых белых карточек в три колонки во всех секциях подряд.
- Первого экрана из одного текста и градиентного пятна.
- Эмодзи вместо интерфейсной иконки или флага.
- Кнопок разного цвета и с разными названиями для одного действия.
- Декоративных цифр, за которыми нет источника.
- Тяжёлой анимации без запасного поведения для уменьшенного движения.
Нужны фирменные материалы A3?
Логотип, палитру и шаблоны презентаций высылаем по запросу, поможем привести ваши материалы к единому стилю с платформой.