Основы

Gravity-UI содержит набор библиотек и компонентов для создания функциональных интерфейсов. Дизайн-система поддерживает работу с несколькими темами: есть светлая, темная и их версии с повышенным контрастом. Внешний вид компонентов можно гибко настроить для каждой из этих тем.

Цвет

Дизайн-система содержит 4 темы, основанные на двуслойной цветовой модели. Механизм темизации спроектирован для гибкой настройки цвета и поддержки айдентики брендов с разным набором требований.

Типографика

Система типографики состоит из стилей для наборного текста, акциденции и кода (моноширинный шрифт). Можно использовать как шрифты по умолчанию, так и задать свои.

Радиусы скругления контролов

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

Создание и работа с темой

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