Mint дизайн-схема для приложений

Цвета Типографика Компоненты Файлы Экран SaaS

Детали аккаунта

премиум-аккаунт
58% потенциал

Зрители

45,031

просмотров

Вовлеченность

25.2%

фокус

Выполненные действия

  • добавлено 3 поста
  • куплен премиум-план
  • добавлено 2 видео
  • подписано спонсорство

Синхронизация приложения

#11

Рейтинг влияния

Файлы для будущих приложений

Эта страница работает как визуальный референс, а файлы ниже помогают быстро перенести стиль в новый проект: токены, стартовый экран, README и готовый промпт для Codex.

донор стиля
CSS Tokens Цвета, тени, радиусы, типографика и базовые классы. tokens/mint-tokens.css AppStarter Мини-шаблон приложения с сайдбаром, метриками, таблицей и формой. templates/mint-app-starter.html Codex Prompt Текст, который можно давать Codex, чтобы он повторял этот стиль. prompts/use-mint-design-system.md README Короткая инструкция по структуре и правилам использования. README.md

Цветовая система

Палитра построена на четырех цветах из референса и дополнительных акцентах интерфейса: чистая белая поверхность, мягкое голубое окружение, лимонный CTA и розовая карточка аккаунта.

мягкий SaaS / социальная аналитика
Основная аква#61C0BF

Навигация, активные состояния, линии графиков.

Мягкая мята#BBDED6

Фоны чипов, заливки графиков, тихие плашки.

Персиковая дымка#FAE3D9

Теплые блоки, аватары, вторичные зоны.

Розовый тон#FFB6B9

Эмоциональные маркеры и мягкие уведомления.

Акцент аккаунта#E95D91

Яркий коммерческий акцент и график вовлеченности.

Лимонный CTA#FFE56A

Главные действия без агрессии и перегруза.

Небесный фон#D8E7F3

Внешний фон и спокойный воздух вокруг приложения.

Глубокие чернила#364D58

Текст, иконки, контрастные бейджи.

Типографика и плотность

Шкала компактная: крупный заголовок только для ключевого экрана, карточки используют плотные подписи и короткие числовые акценты. Межстрочный интервал остается комфортным для SaaS-дашборда.

Заголовок / 36
Ваша статистика
Название / 24
Детали аккаунта
Текст / 13
Компоненты читаются быстро: короткие строки, понятные числовые метрики и мягкая визуальная иерархия.
Подпись / 12
1230 баллов · цель месяца · активный аккаунт

Принципы настроения

воздушно тепло социально точно

Интерфейс должен ощущаться дружелюбным, но не игрушечным. Белые карточки держат структуру, бирюза ведет пользователя, желтый подсвечивает действие, а розовый добавляет живости в метрики и коммерческие блоки.

Компоненты

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

Кнопки

высота 36px

Поля ввода

компактно

Управление

состояния

Карточки и данные

Карточки держат единый радиус 8px, спокойную тень и компактную структуру. Цвет используется дозированно: статус, линия графика, CTA или небольшой эмоциональный блок.

Охват

83,2 тыс.

+12,4%

Аудитория за этот месяц.

Фокус

25,2%

вовлечены

Глубина взаимодействия растет.

Доход

12,5 тыс.

спонсоры

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

Ранг

#11

топ-20

Позиция в рейтинге влияния.

Аккаунт Канал Статус Вовлеченность Баллы Действие
Анна Волкова Instagram Активен 25.2% 1230
Мила Стоун Twitter Проверка 18.7% 980
Студия Нова Facebook Пауза 11.4% 640

Экран продукта

Финальный пример показывает, как токены собираются в рабочий интерфейс: боковая навигация, плотные метрики, график, таблица и социальный профиль.

Обзор кампании

Премиум-аккаунты · отчет за май

Зрители

45 031

+8,2%

Вовлеченность

25,2%

фокус

Баллы

550

цель месяца

Кривая активности

Движение аккаунта за неделю

стабильно

Следующее действие

Пригласить партнера на обзор спонсорства и синхронизировать мобильные материалы.