Анатомия системы

Архитектура
цифрового порядка

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

Открыть библиотеку Документация
Системная типографика Формли

Иерархия: Типографика как инструмент управления вниманием

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

От H1 до Body Text, каждый элемент имеет строго заданный вес (weight) и интерлиньяж (line-height). Это позволяет глазу пользователя мгновенно сканировать контент, выделяя главное без лишнего визуального напряжения. Контраст между заголовками и основным текстом настроен на 12 пунктов.

Открыть типографическую шкалу →

Ритм: Система модульных отступов (8px grid)

8px
Базовая единица
16px
Малый отступ
32px
Средний отступ
64px
Большой отступ

Спектр: Минималистичная палитра с высокой контрастностью

Цвет используется только тогда, когда он несет функцию. Наша палитра состоит из 3 уровней серого для фона и текста, и одного яркого акцента (Golden Yellow) для ключевых действий.

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

Иконки: Монолинейный набор

500+ элементов

Полный набор иконок для финансовых, аналитических и системных интерфейсов. Единый визуальный язык.

Толщина 2px

Строгая монолинейная структура. Идеально масштабируется без потери четкости на Retina-дисплеях.

SVG Sprite

Эффективная загрузка через SVG Sprite. Поддержка динамического изменения цвета через CSS переменные.

Исследуйте структуру

Получите доступ к исходным файлам и документации по построению интерфейсов.

Начать проект Скачать гайд