SG PRO / Система дизайна

Этап 03 · Технический стенд

Цвет · Типографика · Пространство

Система дизайна

Общая визуальная основа SG PRO. Один поток контента — от узкого экрана до широкого монитора.

Типографика

01 / RoadRadio + Raleway

RoadRadio Regular 400 — заголовки; Thin 100 — кнопки и навигация. Raleway 400–700 — основной текст и подписи. Размеры ниже указаны при базовом шрифте 16 px.

H1
32–72 px

Точная работа

H2
28–48 px

Внимание к деталям

H3
24–32 px

Каждый элемент на своём месте

H4
20–24 px

Ясная структура и ритм

H5
18–20 px

Кириллица, латиница и цифры

H6
16 px

Аа Бб Вв Ёё Йй · SG PRO · 0123456789

Основной текст

Чёткая иерархия помогает читать длинные русские фразы. Размер текста плавно меняется от 16 до 18 px, межстрочный интервал — 1,6.

Выделение 700, средний 500 и полужирный 600.

Подпись 14 px. Ёж, йод, № 03, 123 456 ₽. Ссылка в тексте узнаваема без цвета.

Метка / 600 / 14 px

Крупный вводный текст сохраняет спокойный ритм и остаётся в потоке страницы.

Никаких фиксированных высот для текста. Длинное слово для проверки переноса: электрооборудованиеавтомобиля.

Цвет и поверхности

02 / Монохром

Чёрный
#000000

Белый
#ffffff

Поверхность
#f4f4f4

Рамка
#dedede

Вторичный текст
#595959

Светлая поверхность

Вторичный текст сохраняет контраст. Тонкая рамка отделяет поверхность от фона.

К элементам Пример ссылки

Тёмная поверхность

Чёрный и белый — основа reference SG PRO. Текст не зависит от прозрачности панели.

К элементам К сетке

Сетка и ритм

03 / Grid + Flex

Контейнер ограничивает длину строк. Колонки перестраиваются по доступному месту, а группы элементов переносятся без отдельной мобильной копии.

4

8

12

16

24

32

48

64

96

Автоматическая колонка

Минимум 16 rem, один поток контента.

Автоматическая колонка

Минимум 16 rem, один поток контента.

Автоматическая колонка

Минимум 16 rem, один поток контента.

Тестовая композиция 3 к 2: большая колонка и две малые области. — Технический SVG-образец. Пропорции 3:2 зарезервированы до загрузки.

10 px20 px30 px

Элементы интерфейса

04 / Состояния

Технический пример полей. Используйте тестовый текст. Кнопка сбрасывает введённые значения; отправки данных нет.

Проверка клавиатуры и раскрытия

Tab перемещает фокус, Shift + Tab возвращает его назад. Enter или Пробел раскрывает этот блок.

Вернуться к началу стенда — техническая страница SG PRO