Цветовые токены (CSS variables)

Токены определены в @snypr/ui/styles.css и подключены через Tailwind preset.

Brand

primary — var(--primary)
secondary — var(--secondary)
accent — var(--accent)

Semantic

success — var(--success)
warning — var(--warning)
danger (destructive) — var(--destructive)

Neutrals & Surfaces

background — var(--background)
foreground — var(--foreground)
muted — var(--muted)
border — var(--border)
surface — var(--surface)
surface-subtle — var(--surface-subtle)

Sidebar

sidebar-background — var(--sidebar-background)
sidebar-foreground — var(--sidebar-foreground)
sidebar-accent — var(--sidebar-accent)
sidebar-border — var(--sidebar-border)

Primary (Midnight Navy)

Основной брендовый цвет - глубокий профессионализм и авторитет.

50#F1F5F9
100#E2E8F0
200#CBD5E1
300#94A3B8
400#64748B
500#475569
600#334155
700#1E293B
800#0F172A
900#020617

Accent (Deep Crimson)

Цвет акцента - точность, срочность и критические точки фокуса.

50#FEF2F2
100#FEE2E2
200#FECACA
300#FCA5A5
400#F87171
500#EF4444
600#DC2626
700#B91C1C
800#991B1B
900#7F1D1D

Secondary (Obsidian Teal)

Вторичный цвет - глубина, надежность и профессиональный фокус.

50#F0FDFA
100#CCFBF1
200#99F6E4
300#5EEAD4
400#2DD4BF
500#14B8A6
600#0D9488
700#0F766E
800#134E4A
900#042F2E

Success & Positive Actions

Зеленая палитра для успешных операций, подтверждений и положительных состояний

50#F0FDF4
Spring Mint
100#DCFCE7
Light Green
200#BBF7D0
Mint Green
300#86EFAC
Fresh Green
400#4ADE80
Bright Green
500#22C55E
True Green
600#16A34A
Emerald
700#15803D
Forest Green
800#166534
Pine Green
900#14532D
Dark Forest

Warning & Attention

Оранжевая палитра для предупреждений, важных уведомлений и привлечения внимания

50#FFFBEB
Cream
100#FEF3C7
Light Amber
200#FDE68A
Golden Yellow
300#FCD34D
Bright Yellow
400#FBBF24
Sunflower
500#F59E0B
Orange
600#D97706
Dark Orange
700#B45309
Bronze
800#92400E
Copper
900#78350F
Dark Bronze

Neutral (Professional Foundation)

Нейтральная палитра для чистого, профессионального фундамента.

0#FFFFFF
Pure White
50#F8FAFC
100#F1F5F9
Storm Gray
200#E2E8F0
300#CBD5E1
Steel Gray
400#94A3B8
500#64748B
600#475569
700#334155
800#1E293B
900#0F172A
Midnight Navy

Базовые отступы (Tailwind scale)

Используем стандартную систему Tailwind CSS с множителем 4px для консистентности

px
1px / 0.0625rem
p-px
0.5
2px / 0.125rem
p-0.5
1
4px / 0.25rem
p-1
1.5
6px / 0.375rem
p-1.5
2
8px / 0.5rem
p-2
2.5
10px / 0.625rem
p-2.5
3
12px / 0.75rem
p-3
3.5
14px / 0.875rem
p-3.5
4
16px / 1rem
p-4
5
20px / 1.25rem
p-5
6
24px / 1.5rem
p-6
7
28px / 1.75rem
p-7
8
32px / 2rem
p-8
9
36px / 2.25rem
p-9
10
40px / 2.5rem
p-10
12
48px / 3rem
p-12
16
64px / 4rem
p-16
20
80px / 5rem
p-20

Практические примеры отступов

Как использовать отступы в реальных компонентах и интерфейсах

🧱 Внутренние отступы (padding)

Кнопки
Small (px-2 py-1)

Medium (px-4 py-2)

Large (px-6 py-3)
Карточки
Компактная (p-3)
Стандартная (p-4)
Просторная (p-6)
Поля ввода

📏 Внешние отступы (margin)

Вертикальные отступы
Элемент 1
Элемент 2 (mb-4)
Элемент 3 (mb-6)
Элемент 4
Горизонтальные отступы
A
B (mr-4)
C (mr-6)
D

🎯 Семантические отступы

Заголовок секции

Описание секции с отступом mb-4 для разделения от контента

Карточка контента

Текст с отступом mb-3

💡 Рекомендации по отступам:

  • 2-4px - мелкие детали (иконки, badges)
  • 8-12px - элементы внутри компонентов
  • 16-24px - отступы между компонентами
  • 32-48px - отступы между секциями
  • 64px+ - большие разделители макета

Базовая типографика

Heading 1 / 48
Используйте для hero/крупных заголовков
Heading 2 / 36
Heading 3 / 30
Heading 4 / 24
Heading 5 / 20
Body / 16 — основной текстовый стиль
Secondary / 14 — вторичный текст
Caption / 12 — подписи и бейджи

🆕 Градиентные заголовки

Специальные заголовки с градиентами и иконками для акцентов и CTA блоков

Все варианты градиентов

SnyPR Brand Gradient
Orange Fire Gradient
Nature Green Gradient
Purple Magic Gradient
Premium Gold Gradient

Размеры

XL размер (text-xl)
LG размер (text-lg)
MD размер (text-base)
SM размер (text-sm)

💡 Использование:

  • Brand - основные заголовки SnyPR
  • Orange - призывы к действию, важные акценты
  • Green - успех, результативность, экология
  • Purple - премиум функции, магия технологий
  • Gold - премиум планы, награды, достижения

Dashboard Buttons

Варианты, размеры, состояния.

Button vs LinkButton comparison

Различия между кнопками для действий и кнопками для навигации.

Button variant="link" - для действий:

Shared UI Buttons (@snypr/ui)

Кросс‑пакетные компоненты из библиотеки.

🚀 Создание кампании
Новое

Полный интерфейс создания PR-кампании с формой, валидацией и предпросмотром

📱 Предпросмотр

Предпросмотр будет доступен после заполнения формы
Автосохранение включено

📊 Дашборд аналитики
Live

Сводка данных с метриками, графиками и интерактивными элементами

Кампании

24

+3 за неделю

Отправлено

12.4K

+1.2K за неделю

Открытия

68%

+5% за неделю

Конверсия

12%

+2% за неделю

Активность за месяц

📈 График активности

Топ кампании

НазваниеОткрытияСтатус
Запуск Alpha89%
Активна
Событие Beta76%
Черновик
Интервью CEO92%
Завершена

👥 Управление контактами
Pro

Полнофункциональный интерфейс управления базой журналистов и медиа-контактов

Выбрано: 3 контакта
АП
Анна Петрова
Активный
Главный редакторРоссийская Газета
editor@rg.ru
СИ
Сергей Иванов
Активный
ЖурналистРБК
journalist@rbc.ru
МС
Мария Сидорова
Неактивный
КорреспондентВедомости
press@vedomosti.ru
Показано 3 из 1,247 контактов

🔔 Настройки уведомлений
Beta

Современный интерфейс настроек с группировкой, переключателями и предпросмотром

Кампании

Аналитика

📧 Предпросмотр

SnyPR - Кампания создана
Ваша PR-кампания "Запуск продукта Alpha" была успешно создана.
Посмотреть
Изменить

🎨 UI Components

На основе Material UI

  • • Accordion / Collapse
  • • Breadcrumbs
  • • Chip / Tag
  • • DatePicker
  • • Drawer / Sidebar
  • • Fab (Floating Action Button)
  • • List / ListItem
  • • Menu
  • • Modal / Dialog (✓ Done)
  • • Pagination
  • • Progress Bar
  • • Rating
  • • Skeleton
  • • Stepper
  • • Switch / Toggle
  • • Tabs (✓ Done)
  • • Timeline

⚡ Advanced Components

Из Mantine UI

  • • ColorPicker
  • • DataTable
  • • FileInput
  • • JsonInput
  • • MultiSelect
  • • NumberInput
  • • PasswordInput
  • • RichTextEditor
  • • Spotlight / Command
  • • Tree / TreeView
  • • Calendar
  • • Charts Integration
  • • CodeEditor
  • • Dropzone
  • • Notifications
  • • Carousel
  • • Kanban Board

🚀 SnyPR Specific

Уникальные компоненты

  • • CampaignCard
  • • ContactCard
  • • MediaOutletPicker
  • • EmailTemplate Editor
  • • AnalyticsChart
  • • AIPersonalizationPanel
  • • StatusIndicator
  • • DeliverabilityMeter
  • • ContactValidationBadge
  • • RegionSelector
  • • TagCloud
  • • CampaignTimeline
  • • ResponseTracker
  • • GeographyMap
  • • PriorityMatrix
  • • QuotaUsageBar
  • • IntegrationStatus
🎯 Приоритеты на 2025

Фокусируемся на компонентах, которые максимально ускорят разработку PR-функций

DataTable
RichTextEditor
MultiSelect
DatePicker
Charts