Design System v1.0 · 2026
Minzifa Travel
Design System
Design System
Единый источник правды для дизайнеров и разработчиков. Все токены, компоненты и паттерны — в одном месте.
Manrope + Inter Travel Pine #022B1B Travel Green #00D37F radius-small = DEFAULT 5 size tokens WCAG 2 AA
Принципы
Система построена на четырёх ключевых принципах, которые отражают характер бренда.
Ясность
Каждый компонент говорит сразу и без двусмысленности.
Уверенность
Тёмный Pine как основа даёт ощущение экспертности.
Сдержанность
Акценты редки — они работают именно потому, что редки.
Предсказуемость
Один токен — одна роль. Без исключений.
Быстрый доступ
Ключевые значения, которые нужны каждый день.
Travel Pine
#022B1B
Travel Green
#00D37F
Travel White
#F9F8F6
8
radius-small — DEFAULT
8px mobile · 12px desktop
Mn
Manrope · Inter
Заголовки · Текст
Цвета
Foundations
Цветовая система построена на трёх ролях: движение (Green), уверенность (Pine) и ясность (White). Нажмите на свотч, чтобы скопировать HEX.
Основные цвета
Travel Green
#00D37F
Копировать
Travel Pine
#022B1B
Копировать
Travel White
#F9F8F6
Копировать
Дополнительные цвета
Системны парами: Bright — для акцентов, Dark — для фонов. Не более 1–2 Bright в одном макете.
Bright Turquoise
#1ECAD3
Dark Turquoise
#08363A
Bright Saffron
#F4C542
Dark Saffron
#3B2E08
Bright Terracotta
#F47A3A
Dark Terracotta
#3A1408
Bright Silk Fuchsia
#E94AA3
Dark Silk Fuchsia
#3A0A1F
Цвета интерфейса
| Токен | HEX | Применение |
|---|---|---|
| --content-primary | #022B1B | Заголовки, основной контент |
| --content-secondary | #454746 | Большинство текстов |
| --content-tertiary | #6A6D6C | Плейсхолдеры, метки "необязательно" |
| --content-link | #454745 | Ссылки, иконки внешних ссылок |
| --bg-screen | #F9F8F6 | Фон большинства экранов |
| --bg-elevated | #FFFFFF | Карточки, модальные окна |
| --interactive-accent | #00D37F | Фон основных кнопок, акценты |
| --sentiment-negative | #D21430 | Ошибки, деструктивные действия |
| --sentiment-positive | #007A4A | Успех, позитивные уведомления |
| --sentiment-warning | #F4C542 | Предупреждения (только фон) |
Типографика
Foundations
Два шрифта с чёткими ролями. Manrope создаёт характер, Inter обеспечивает читабельность. Никогда не используйте ALL CAPS.
Manrope — заголовочный
Геометричный гротеск. Уверенный, современный, без излишней декоративности.
Путешествие под контролем
Безопасное бронирование
Узбекистан, 8 дней / 7 ночей
Самарканд — Бухара — Хива
Inter — текстовый
Нейтральный UI-гротеск для экранов. Высокая читабельность, аккуратная "деловая" подача.
Мы делаем путешествия по Центральной Азии предсказуемыми и спокойными: без сюрпризов, с понятным составом.
Включено: перелёты, гид, транспорт, проживание DBL. Не включено: авиабилеты.
Цена за человека · DBL · Private · от 2 гостей
Забронировать тур
Популярное направление
Правила
✕ Не использовать
ALL CAPS в заголовках и основном тексте ✕ Выравнивание по ширине (
justify) — запрещено ✕ Длина строки не более 50–60 символов
✓ Манрей для заголовков, Inter — для всего остального
Радиусы
Foundations
5 токенов без "случайных" значений. Острых углов по умолчанию нет. Один тип элемента = один токен везде.
radius-small — токен по умолчанию. Используйте его для всех компонентов, если нет явного указания на более крупный. 8px на мобильных, 12px на десктопе.
Интерактивный playground
Нажмите на токен, чтобы увидеть его применение.
8px
small
12px
medium
16px
large
24px
x-large
32px
2x-large
pill
special
Забронировать
radius-small
8px
desktop: 12px
Таблица токенов
| Токен | Mobile | Desktop | Применение |
|---|---|---|---|
| radius-small DEFAULT | 8px | 12px | Теги, алерты, тултипы, базовый компонент |
| radius-medium | 12px | 16px | Кнопки, поля ввода |
| radius-large | 16px | 24px | Карточки, модальные окна, изображения |
| radius-x-large | 24px | 32px | Крупные блоки, секции с контентом |
| radius-2x-large | 32px | 40px | Hero-блоки, промо-баннеры |
| pill | height / 2 | Pill-кнопки, теги-пилюли | |
| circle | 50% | Аватары, иконки в круге | |
Отступы
Foundations
Шаг сетки 4px. Все значения кратны 4. Используйте семантические токены — не хардкодьте значения.
Базовая шкала
size-4
4px
Минимальный зазор внутри компонентов
size-8
8px
Внутренние отступы мелких элементов
size-12
12px
padding-medium
size-16
16px
padding-large, gap в компонентах
size-24
24px
padding-x-large, поля экрана mobile
size-32
32px
padding-2x-large, between-sections
size-48
48px
Секции, блоки
size-64
64px
Крупные секции
size-96
96px
Hero, верхние отступы страниц
Семантические токены padding
| Токен | Значение | Применение |
|---|---|---|
| padding-small | 8px | Плотные компоненты: теги, чипы |
| padding-medium | 12px | Стандартные компоненты |
| padding-large | 16px | Карточки, блоки |
| padding-x-large | 24px | Крупные блоки, секции |
| padding-2x-large | 32px | Основные секции страницы |
| screen-mobile (horizontal) | 24px | Боковые поля на мобильных |
| between-sections | 32px | Расстояние между секциями |
Сетка
Foundations
5 брейкпоинтов от XS до XL. Максимальная ширина контента — 1440px. При большей ширине контент центрируется.
Интерактивная демонстрация
XS
S
M
L
XL
Колонки
6
Margin
20px
Gutter
12px
Полная таблица
| Брейкпоинт | Диапазон | Колонки | Margin | Gutter |
|---|---|---|---|---|
| XS | 320–479px | 6 | 20px | 12px |
| S | 480–767px | 6 | 32px | 12px |
| M | 768–991px | 12 | 40px | 16px |
| L | 992–1199px | 12 | 80px | 28px |
| XL | 1200–1440px | 12 | 100px | 32px |
| XXL | > 1440px | Сетка центрирована, max-width 1440px | ||
Иконки
Foundations
Стиль — SF Symbols. Хорошо сочетается с Inter и Manrope. Ясность важнее оригинальности для глобальной аудитории.
Размеры
| Размер | px | Применение |
|---|---|---|
| Стандарт (icon-md) | 24px | Большинство иконок в UI |
| Уведомления (icon-lg) | 48px | Аватары, уведомления |
| Кнопки (icon-xl) | 56px | Основные действия |
| Hero (icon-2xl) | 72px | Пустые состояния, промо |
Цветовые варианты
✈
Interactive
Pine
Pine
⚙
Info
Primary
Primary
★
White
on dark
on dark
♦
Accent
Green
Green
🗺
Map
📅
Calendar
👥
Group
✅
Check
Анимация
Foundations
Движение служит ясности, не развлечению. Каждая анимация объясняет изменение состояния.
Кривые и длительности
| Токен | Duration | Easing | Применение |
|---|---|---|---|
| motion-instant | 0ms | — | Мгновенные изменения (toggle) |
| motion-fast | 100ms | ease-out | Hover-состояния, микроинтерфейс |
| motion-default | 200ms | ease-in-out | Большинство переходов |
| motion-slow | 350ms | cubic-bezier(.34,1.56,.64,1) | Появление элементов, spring |
| motion-page | 500ms | ease-in-out | Переходы между страницами |
Демо анимаций
Fade + Slide Up
350ms spring
Scale
200ms ease-in-out
Slide
350ms spring
Кнопки
Components
Кнопки используют radius-medium (12/16px). Акцент используется умеренно — он работает потому, что редок.
Варианты
Основные варианты
Размеры
На тёмном фоне
Pill и специальные
Запрещённые CTA
Не использовать: "Успейте забронировать", "Не упустите шанс", "Горящий тур", "Только сейчас", "Жми сюда", "Лучшее предложение".
Токены
| Вариант | Radius | Height | Применение |
|---|---|---|---|
| btn-primary | radius-medium | size-large (48px) | Основное действие на экране |
| btn-accent | radius-medium | size-large (48px) | Ключевой CTA (редко) |
| btn-outline | radius-medium | size-large (48px) | Второстепенное действие |
| btn-ghost | radius-medium | size-large (48px) | Нейтральное/отмена |
| btn-sm | radius-small | size-medium (40px) | В плотных интерфейсах |
| btn-lg | radius-large | size-x-large (56px) | Hero-секции |
Поля ввода
Components
Высота 48px, radius-medium. Фокус — border 1.5px Pine + тень 3px. Без агрессивных эффектов.
Состояния
Как к вам обращаться
Адрес подтверждён
Введите полный номер
Токены
| Состояние | Border | Shadow |
|---|---|---|
| Default | 1.5px #E0DDD6 | none |
| Hover | 1.5px #A0A09E | none |
| Focus | 1.5px #022B1B | 0 0 0 3px rgba(2,43,27,.08) |
| Error | 1.5px #D21430 | none |
| Success | 1.5px #007A4A | none |
| Disabled | 1px #E0DDD6 | none, opacity 0.5 |
Карточки
Components
radius-large (16/24px). Hover: transform translateY(-2px) + тень. Изображение занимает верхнюю треть карточки.
Карточка тура
🏛
Узбекистан · 8 дней
Три столицы: Ташкент — Самарканд — Бухара
🏔
Кыргызстан · 10 дней
Горы и озёра: Бишкек — Иссык-Куль — Каракол
Информационная карточка
Включено в тур
✓Встреча и проводы в аэропорту
✓Проживание DBL (7 ночей)
✓Русскоязычный гид
✓Комфортный транспорт
✓Входные билеты
Не включено
✕Авиабилеты
✕Виза (при необходимости)
✕Медицинская страховка
✕Личные расходы
Теги и бейджи
Components
radius-small (DEFAULT). Теги кодируют смысл цветом. Не использовать как украшение без смысловой нагрузки.
Варианты
Категории направлений
Активно продаётся Private Small Group Популярный Сезонный Мест нет
Статусы тура
Подтверждён Ожидает оплаты Отменён В обработке
Числовые бейджи
🔔
3 ✉
12 Уведомления
Components
radius-medium. Sentiment-цвета. Использовать только для функциональных состояний, не для декора.
Варианты
Бронирование подтверждено
Детали и маршрут отправлены на вашу почту. Гид свяжется с вами за 48 часов до начала тура.
Оплата не прошла
Проверьте данные карты или используйте другой способ оплаты.
Осталось 2 места на заезд 12 апреля
Для подтверждения бронирования необходимо завершить оплату в течение 30 минут.
Для граждан вашей страны виза не требуется
Безвизовый въезд на срок до 30 дней. Необходим загранпаспорт со сроком действия от 6 месяцев.
Фокус-состояния
Components
Обязательны для всех интерактивных элементов. Соответствуют WCAG 2 AA. Никогда не полагайтесь на браузерные стили по умолчанию.
Принцип: 2px border + 2px прозрачный offset. Цвет — Interactive Primary (#022B1B). Для деструктивных кнопок — Sentiment Negative (#D21430).
Демо
Кнопка с фокусом (Tab ↹)
Поле ввода с фокусом
Ссылка с фокусом
Подробнее о маршруте Деструктивная кнопка с фокусом
Правила
| Элемент | Стиль |
|---|---|
| Кнопки, карточки | outline 2px #022B1B, offset 2px |
| Поля ввода | border 1.5px #022B1B, box-shadow 0 0 0 3px rgba(2,43,27,.1) |
| Ссылки | outline 2px #022B1B, offset 2px, border-radius 4px, padding 2px |
| Иконки-кнопки | outline 2px #022B1B, offset 2px, border-radius 4px |
| Деструктивные | outline 2px #D21430, offset 2px |
CSS-токены
For Developers
Готовый блок для вставки в проект. Включает все цвета, радиусы, отступы и медиазапрос для десктопа.
Копировать CSS-переменные
/* Minzifa Travel Design System — CSS Tokens */ :root {
/* === BRAND COLORS === */ --color-pine: #022B1B;
--color-green: #00D37F;
--color-white: #F9F8F6;
/* === CONTENT === */ --content-primary: #022B1B;
--content-secondary: #454746;
--content-tertiary: #6A6D6C;
--content-link: #454745;
/* === BACKGROUNDS === */ --bg-screen: #F9F8F6;
--bg-elevated: #FFFFFF;
--bg-neutral: rgba(2, 43, 27, 0.08);
--bg-overlay: rgba(2, 43, 27, 0.08);
/* === BORDERS === */ --border-neutral: rgba(2, 43, 27, 0.12);
--border-default: #E0DDD6;
/* === INTERACTIVE === */ --interactive-primary: #022B1B;
--interactive-accent: #00D37F;
--interactive-secondary:#868685;
/* === SENTIMENT === */ --sentiment-negative: #D21430;
--sentiment-positive: #007A4A;
--sentiment-warning: #F4C542;
/* === RADIUS (radius-small = DEFAULT) === */ --radius-small: 8px; /* DEFAULT */ --radius-medium: 12px;
--radius-large: 16px;
--radius-x-large: 24px;
--radius-2x-large: 32px;
/* === SIZE === */ --size-small: 24px;
--size-medium: 40px;
--size-large: 48px;
--size-x-large: 56px;
--size-2x-large: 72px;
/* === PADDING === */ --padding-small: 8px;
--padding-medium: 12px;
--padding-large: 16px;
--padding-x-large: 24px;
--padding-2x-large: 32px;
/* === TYPOGRAPHY === */ --font-heading: 'Manrope', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* === MOTION === */ --motion-fast: 100ms ease-out;
--motion-default: 200ms ease-in-out;
--motion-slow: 350ms cubic-bezier(.34,1.56,.64,1);
}
/* Desktop — larger radii */ @media (min-width: 992px) {
:root {
--radius-small: 12px;
--radius-medium: 16px;
--radius-large: 24px;
--radius-x-large: 32px;
--radius-2x-large: 40px;
}
}
