Связаться с нами
Кейс 04 / Система «ФинТех» / Стиль-гайд

Единый язык
интерфейса

Документированная система правил, обеспечивающая консистентность визуального опыта на всех 120+ экранах приложения.

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

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

4.2 Рейтинг UX
-30% Время верстки
Пример страницы из дизайн-системы: типографика и цветовая палитра

Типографика

Иерархия, построенная на контрасте весов.

Manrope

Используется для заголовков, навигации и акцентных блоков. Жесткая геометрия букв создает ощущение надежности и технологичности.

Inter

Основной шрифт интерфейса (UI Copy). Выбран за свою нейтральность и высокую читабельность в малых размерах (12px, 14px).

Заголовки (Display)
Manrope
Weights: 400, 600, 700, 800
Основной текст (Body)
Inter
Weights: 300, 400, 500
Моноширинный (Code)
JetBrains Mono

Цветовые переменные

Смысловое кодирование состояний.

Основная палитра

Matte Black
#1C1C1E
Muted Indigo
#4B4C68
Burnt Sienna
#C85A3C

Фоны и границы

Milk White
#FDFCF8
Surface Alt
#F4F4F2
Border Color
#E8E6E1

Семантика

Цвета состояний (Success, Error, Warning) продублированы текстовыми метками для обеспечения доступности (WCAG AA).

--c-success: #34C759;
--c-error: #FF3B30;
--c-warning: #FF9500;

Компоненты интерфейса

Атомарный подход к построению UI.

Каждый элемент библиотеки обладает состояниями (Default, Hover, Active, Disabled) и вариантами размеров (SM, MD, LG).

Кнопки (Buttons)

Поля ввода (Inputs)

Активен

Карточки (Cards)

Базовая карточка

Использование стандартного отступа 24px и радиуса 12px.

Footer content
Акцентная карточка

Использование акцентного цвета для привлечения внимания к важной информации.

Правила отступов

Математическая сетка 8px.

Все макроскопические и микроскопические отступы кратны 8px. Это позволяет разработчикам легко переносить дизайн в код без использования кастомных значений.

  • Unit: 8px
    Базовая единица сетки
  • Padding: 16px
    Внутренний отступ малых компонентов
  • Padding: 32px
    Внутренний отступ карточек и секций
  • Section: 64px+
    Вертикальный ритм страницы
16px
32px
64px
128px (Section Gap)

Нужна ваша собственная система?

Мы поможем структурировать хаос в интерфейсе и создать масштабируемую базу для вашей команды.

Заказать дизайн-систему