Стиль элементов

Интерфейс продуктов Контура чистый, незашумленный. Элементы показываются только когда они нужны. Например:

• показывайте чекбоксы массового выбора только при наведении,
• компонент массовых действий показывайте только при выборе хотя бы одного элемента списка,
• поле поиска сворачивайте до иконки, если оно не используется постоянно,
• окрашивайте компоненты в функциональные цвета только при наведении.

Неправильно

Правильно

Сводите количество линий выравнивания контента и вложенностей к минимуму. Интерфейс должен легко адаптироваться при уменьшении экрана.

Неправильно

Правильно

Стремитесь к сохранению монохромности в интерфейсе. Основные цвета: белый и чёрный. Допустимо использование цвета продукта и функциональных цветов: красный, зелёный и жёлтый.

Неправильно

Правильно

Контролы либо чёрные, либо в цвет продукта. Кроме красного и оранжевого.

Неправильно

Правильно

Смотрите гайд Цвет

Контрастная типографика. Без тонких шрифтов и начертаний близких по толщине и кеглю:

Неправильно

Правильно

Смотрите гайд Типографика

Интерфейс плоский, без наслоений и объема.

Неправильно

Правильно

Тень у объекта может быть только, если это другой слой: модальное окно, сайдпейдж, тултип.

Чтобы зонировать контент, используйте отступы, разделители, заливки или рамки.

Блоки в интерфейсе, контролы, или выделенные области, имеют скругление:

• Для инпутов — 2 px — это позволит отличить их от кнопок;
• Для маленьких блоков и контролов — 8 px — универсальное скругление для всех контролов;
• Для больших блоков и больших попапов — 16 px — для сохранения соотношения скругления и размера элементов.

Блоки не должны быть слишком узкими, например, блок со скруглениями 16 px не может быть высотой 32 px, только 48 px и больше.

Неправильно

Правильно

У блоков со скруглением 16 px нужно применять оптическое выравнивание, когда левая и правая границы выходят за линии выравнивания на 4 px.