Nature Design System (Ui-Kit) — единая библиотека компонентов для бренда

Дизайн-система для цифровых продуктов бренда NATURE

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

Решение:
— Комплексный UI-Kit, включающий 15+ ключевых компонентов:
— Фундамент: Цветовая палитра (Color Palette), Типографика (Typography), Отступы (Spacing), Сетка (Grid System).
— Базовые элементы: Кнопки (Button, Icon Buttons), Чекбоксы (Checkbox), Радиокнопки (Radio), Переключатели (Switcher).
— Сложные компоненты: Поля ввода (Input, Password, Text Area), Ценники (Price), Выпадающие списки (Dropdown), Навигация (Breadcrumb, Pagination).

Ключевые особенности:
— Консистентность: Единые правила оформления для всех продуктов бренда.
— Модульность: Компоненты легко комбинируются и адаптируются под новые задачи.
— Эффективность: Сокращение времени разработки интерфейсов на 30–50%.
— Адаптивность: Гибкая сетка и продуманные отступы для любых устройств.
— Доступность: Контрастные цвета, четкие состояния интерактивных элементов (hover, active, disabled).

Результат:
UI-Kit стал основой для:
— Корпоративного сайта и мобильного приложения NATURE;
— Эффективность: Сокращение времени разработки интерфейсов на 30–50%.
— CRM-системы для менеджеров;
— Маркетплейса экотоваров.

Инструменты:
— Figma (Auto Layout, Variants, Component Properties).

Desktop 1920px
Mobile 320px

Primary Button
Primary Button (Icon Right)
Secondary Button (Icon Right)
Disabled Button