Mint Social
Design System
Viewers
45,031
views
Engagement
25.2%
focused
Actions Performed
- 3 Posts Added
- Premium Plan Bought
- 2 Videos Added
- Sponsorship Signed
Mobile App Sync
Influence Ranking
Файлы для будущих приложений
Эта страница работает как визуальный референс, а файлы ниже помогают быстро перенести стиль в новый проект: токены, стартовый экран, README и готовый промпт для Codex.
tokens/mint-tokens.css
App starter
Мини-шаблон приложения с сайдбаром, метриками, таблицей и формой.
templates/mint-app-starter.html
Codex prompt
Текст, который можно давать Codex, чтобы он повторял этот стиль.
prompts/use-mint-design-system.md
README
Короткая инструкция по структуре и правилам использования.
README.md
Цветовая система
Палитра построена на четырех цветах из референса и дополнительных акцентах интерфейса: чистая белая поверхность, мягкое голубое окружение, лимонный CTA и розовая карточка аккаунта.
#61C0BFНавигация, активные состояния, линии графиков.
#BBDED6Фоны чипов, заливки графиков, тихие плашки.
#FAE3D9Теплые блоки, аватары, вторичные зоны.
#FFB6B9Эмоциональные маркеры и мягкие уведомления.
#E95D91Яркий коммерческий акцент и график engagement.
#FFE56AГлавные действия без агрессии и перегруза.
#D8E7F3Внешний фон и спокойный воздух вокруг приложения.
#364D58Текст, иконки, контрастные бейджи.
Типографика и плотность
Шкала компактная: крупный заголовок только для ключевого экрана, карточки используют плотные подписи и короткие числовые акценты. Межстрочный интервал остается комфортным для SaaS-дашборда.
Принципы настроения
Интерфейс должен ощущаться дружелюбным, но не игрушечным. Белые карточки держат структуру, бирюза ведет пользователя, желтый подсвечивает действие, а розовый добавляет живости в метрики и коммерческие блоки.
Компоненты
Набор покрывает базовую SaaS-поверхность: кнопки, сегменты, поля, переключатели, чипы, карточки метрик и плотные списки действий.
Buttons
36px heightInputs
compactControls
statesКарточки и данные
Карточки держат единый радиус 8px, спокойную тень и компактную структуру. Цвет используется дозированно: статус, линия графика, CTA или небольшой эмоциональный блок.
Reach
83.2K
+12.4%Audience reached this month.
Focus
25.2%
engagedInteraction depth is rising.
Revenue
$12.5K
sponsoredCreator deals signed.
Rank
#11
top 20Influence ranking position.
| Account | Channel | Status | Engagement | Points | Action |
|---|---|---|---|---|---|
| David Jones | Active | 25.2% | 1230 | ||
| Mila Stone | Review | 18.7% | 980 | ||
| Nova Studio | Paused | 11.4% | 640 |
Экран продукта
Финальный пример показывает, как токены собираются в рабочий интерфейс: боковая навигация, плотные метрики, график, таблица и социальный профиль.
Campaign Overview
Premium social accounts · May report
Viewers
45,031
+8.2%Engagement
25.2%
focusedPoints
550
monthly goalActivity curve
Weekly account movement
Next action
Invite partner to sponsorship review and sync mobile assets.