Style Guide

Справочник стилей, компонентов и паттернов дизайна MD Platform.

Используйте эту страницу как референс при создании новых сервисов, а также передавайте AI-агенту для соблюдения визуального стиля.

Цветовая палитра

Бренд
Brand Dark
#160F39
Brand Red
#FF4345
Ссылки и акценты
Link
#007FDA
Link Hover
#005899
Robot / AI
#4ABAFF
Robot Hover
#39AAEF
Фон и текст
Background
#eef2f7
Foreground
#171717
White (cards)
#ffffff
Primary (основной синий)
50
100
200
300
400
500
600
700
800
900
Accent (фиолетовый)
50
100
200
300
400
500
600
700
Статусные цвета
Success
emerald
Warning
amber
Error
red
Info
sky

Типографика

Шрифты

Основной: Inter, запасной: Roboto Flex

Моноширинный: SF Mono, ui-monospace

Насыщенность

Обычный текст: 300 (Light)

Заголовки и акценты: 400 (Regular)

Масштаб размеров (+20% от Tailwind)
h1 (40px)Заголовок h1
text-3xlТекст 36px
text-2xlТекст 29px
text-xlТекст 24px
text-sectionТекст 20px (секции)
text-lgТекст 22px
text-baseТекст 19px
text-smТекст 17px (основной)
text-xsТекст 14px (мелкий)
text-metric1 234

Тени и скругления

Тени (box-shadow)
shadow-card
0 1px 3px .04, 0 4px 12px .03
shadow-card-hover
0 2px 8px .06, 0 8px 24px .06
shadow-card-lg
0 4px 12px .06, 0 12px 32px .04
Скругления (border-radius)
rounded-sm
1px
rounded
3px
rounded-md
4px
rounded-lg
6px
rounded-xl
8px
rounded-2xl
11px
rounded-3xl
17px
rounded-full
9999px

Кнопки

Варианты
Disabled

Бейджи и статусы

Статусы
Черновик На редактуре Изображения На утверждении Готово Опубликовано
Роли
Человек AI-агент Система
Действия
Одобрено Отклонено Поиск Правки beta

Карточки

Простая карточка (.card)
Карточка без тени
bg-white rounded-xl
Интерактивная карточка (.card-interactive)
Наведите курсор
shadow-card → shadow-card-hover
Пустое состояние
Данных пока нет
Добавьте первую запись, чтобы начать работу

Формы

Навигация

Активный пункт меню

Конфигурация (для AI-агента)

tailwind.config.ts
colors: { brand: { dark: "#160F39", red: "#FF4345" }, link: { DEFAULT: "#007FDA", hover: "#005899" }, robot: { DEFAULT: "#4ABAFF", hover: "#39AAEF" }, primary: { 50-900 blue scale }, accent: { 50-700 violet scale } } borderRadius: { sm: "1px", DEFAULT: "3px", md: "4px", lg: "6px", xl: "8px", "2xl": "11px", "3xl": "17px", full: "9999px" } boxShadow: { card, card-hover, card-lg }
globals.css (ключевые правила)
body { color: #171717; background: #eef2f7; font-family: "Inter", sans-serif; font-weight: 300; font-size: 17px; } h1 { color: #160F39; font-size: 40px; font-weight: 400; line-height: 1.1; } .font-bold, .font-semibold { font-weight: 400; } .font-medium, .font-normal { font-weight: 300; } .text-xs: 14px .text-sm: 17px .text-base: 19px .text-lg: 22px .text-xl: 24px .text-2xl: 29px .text-3xl: 36px .text-section: 20px .text-metric: 43px .card { bg-white rounded-xl } .card-interactive { + shadow-card hover:shadow-card-hover } .btn-primary { bg-primary-600 text-white } .badge { text-xs px-1.5 py-0.5 rounded }
Стек технологий
Next.js 14 + React 18 + TypeScript Tailwind CSS 3.4 Fonts: Google Fonts (Inter, Roboto Flex) Icons: inline SVG, Heroicons-style Backend: FastAPI + SQLAlchemy + Celery