Mint Social
Design System

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

Account Details

Premium account
58% Potential

Viewers

45,031

views

Engagement

25.2%

focused

Actions Performed

  • 3 Posts Added
  • Premium Plan Bought
  • 2 Videos Added
  • Sponsorship Signed

Mobile App Sync

#11

Influence Ranking

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

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

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

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

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

Soft SaaS / Social Analytics
Aqua Primary#61C0BF

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

Mint Soft#BBDED6

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

Peach Wash#FAE3D9

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

Rose Tint#FFB6B9

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

Account Pink#E95D91

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

Lemon CTA#FFE56A

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

Sky Backdrop#D8E7F3

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

Deep Ink#364D58

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

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

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

Display / 36
Your Stats
Title / 24
Account Details
Body / 14
Компоненты читаются быстро: короткие строки, понятные числовые метрики и мягкая визуальная иерархия.
Caption / 12
1230 Points · Monthly Goal · Active account

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

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

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

Компоненты

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

Buttons

36px height

Inputs

compact

Controls

states

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

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

Reach

83.2K

+12.4%

Audience reached this month.

Focus

25.2%

engaged

Interaction depth is rising.

Revenue

$12.5K

sponsored

Creator deals signed.

Rank

#11

top 20

Influence ranking position.

Account Channel Status Engagement Points Action
David Jones Instagram Active 25.2% 1230
Mila Stone Twitter Review 18.7% 980
Nova Studio Facebook Paused 11.4% 640

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

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

Campaign Overview

Premium social accounts · May report

Viewers

45,031

+8.2%

Engagement

25.2%

focused

Points

550

monthly goal

Activity curve

Weekly account movement

stable

Next action

Invite partner to sponsorship review and sync mobile assets.