sfera-new/docs/design/DESIGN_SYSTEM.md

ДИЗАЙН-СИСТЕМА SFERA

🎨 ФИЛОСОФИЯ ДИЗАЙНА

SFERA использует современную Glass Morphism дизайн-систему с космической тематикой, создающую ощущение технологичности и инновационности. Дизайн построен на принципах полупрозрачности, многослойности и световых эффектов.

Ключевые принципы:

• Glass Morphism - полупрозрачные элементы с blur эффектами
• Космическая эстетика - градиенты и эффекты вдохновленные космосом
• Многослойность - использование z-index и backdrop-filter
• Световые эффекты - glow, shadow и анимированные блики
• Адаптивность - корректное отображение на всех устройствах

🌈 ЦВЕТОВАЯ ПАЛИТРА

Основная палитра (OKLCH цветовое пространство)

Система использует современное OKLCH цветовое пространство для более точной цветопередачи.

Light Theme (корни CSS):

:root {
  --background: oklch(0.98 0.02 320); /* Светло-розовый фон */
  --foreground: oklch(0.145 0 0); /* Темный текст */
  --primary: oklch(0.65 0.28 315); /* Фиолетовый основной */
  --primary-foreground: oklch(0.985 0 0); /* Белый на primary */
  --secondary: oklch(0.94 0.08 315); /* Светло-фиолетовый */
  --secondary-foreground: oklch(0.205 0 0); /* Темный на secondary */
  --accent: oklch(0.9 0.12 315); /* Акцентный фиолетовый */
  --accent-foreground: oklch(0.205 0 0); /* Темный на accent */
  --destructive: oklch(0.577 0.245 27.325); /* Красный для ошибок */
  --muted: oklch(0.94 0.05 315); /* Приглушенный фон */
  --muted-foreground: oklch(0.556 0 0); /* Приглушенный текст */
  --border: oklch(0.9 0.08 315); /* Границы элементов */
  --input: oklch(0.96 0.05 315); /* Фон полей ввода */
  --ring: oklch(0.65 0.28 315); /* Фокусное кольцо */
}

Dark Theme:

.dark {
  --background: oklch(0.08 0.08 315); /* Темно-фиолетовый фон */
  --foreground: oklch(0.985 0 0); /* Белый текст */
  --primary: oklch(0.75 0.32 315); /* Яркий фиолетовый */
  --primary-foreground: oklch(0.08 0.08 315); /* Темный на primary */
  --secondary: oklch(0.18 0.12 315); /* Темно-фиолетовый */
  --secondary-foreground: oklch(0.985 0 0); /* Белый на secondary */
  --accent: oklch(0.2 0.15 315); /* Темный акцент */
  --destructive: oklch(0.704 0.191 22.216); /* Светло-красный */
  --border: oklch(0.22 0.12 315); /* Темные границы */
  --input: oklch(0.15 0.1 315); /* Темный фон полей */
}

Chart Colors (для графиков):

:root {
  --chart-1: oklch(0.7 0.25 315); /* Основной фиолетовый */
  --chart-2: oklch(0.65 0.22 290); /* Синий */
  --chart-3: oklch(0.6 0.2 340); /* Розовый */
  --chart-4: oklch(0.75 0.18 305); /* Светло-фиолетовый */
  --chart-5: oklch(0.68 0.24 325); /* Пурпурный */
}

Sidebar Colors:

:root {
  --sidebar: oklch(0.985 0 0); /* Белый сайдбар */
  --sidebar-foreground: oklch(0.145 0 0); /* Темный текст */
  --sidebar-primary: oklch(0.65 0.28 315); /* Активные элементы */
  --sidebar-accent: oklch(0.9 0.12 315); /* Hover состояния */
  --sidebar-border: oklch(0.9 0.08 315); /* Границы сайдбара */
}

🎭 ГРАДИЕНТЫ И ЭФФЕКТЫ

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

1. Purple (основной):

.gradient-purple {
  background: linear-gradient(
    135deg,
    oklch(0.75 0.32 315) 0%,
    /* Яркий фиолетовый */ oklch(0.68 0.28 280) 30%,
    /* Синий переход */ oklch(0.65 0.3 250) 70%,
    /* Глубокий синий */ oklch(0.6 0.25 330) 100% /* Пурпурный */
  );
}

2. Galaxy (для фонов):

.bg-gradient-smooth,
.gradient-galaxy {
  background: linear-gradient(
    135deg,
    oklch(0.15 0.25 270) 0%,
    /* Темно-синий */ oklch(0.25 0.3 300) 15%,
    /* Фиолетовый */ oklch(0.45 0.35 320) 30%,
    /* Яркий фиолетовый */ oklch(0.2 0.28 250) 45%,
    /* Синий */ oklch(0.35 0.32 280) 60%,
    /* Средний фиолетовый */ oklch(0.1 0.2 290) 75%,
    /* Темно-синий */ oklch(0.18 0.25 260) 100% /* Финальный синий */
  );
}

3. Cosmic (интенсивный):

.gradient-cosmic {
  background: linear-gradient(
    135deg,
    oklch(0.45 0.35 270) 0%,
    /* Средний синий */ oklch(0.55 0.4 300) 25%,
    /* Фиолетовый */ oklch(0.65 0.3 330) 50%,
    /* Розовый */ oklch(0.5 0.35 250) 75%,
    /* Синий */ oklch(0.4 0.3 280) 100% /* Темно-фиолетовый */
  );
}

4. Специальные градиенты:

Sunset (теплый):

.gradient-sunset {
  background: linear-gradient(
    135deg,
    oklch(0.75 0.25 45) 0%,
    /* Желтый */ oklch(0.7 0.28 25) 30%,
    /* Оранжевый */ oklch(0.68 0.3 355) 70%,
    /* Красный */ oklch(0.65 0.32 320) 100% /* Пурпурный */
  );
}

Ocean (холодный):

.gradient-ocean {
  background: linear-gradient(
    135deg,
    oklch(0.65 0.22 220) 0%,
    /* Голубой */ oklch(0.68 0.25 200) 30%,
    /* Синий */ oklch(0.7 0.28 180) 70%,
    /* Циан */ oklch(0.72 0.3 160) 100% /* Зеленовато-синий */
  );
}

Emerald (зеленый):

.gradient-emerald {
  background: linear-gradient(
    135deg,
    oklch(0.7 0.28 150) 0%,
    /* Зеленый */ oklch(0.72 0.3 140) 30%,
    /* Ярко-зеленый */ oklch(0.68 0.25 160) 70%,
    /* Изумрудный */ oklch(0.65 0.22 170) 100% /* Сине-зеленый */
  );
}

Текстовые градиенты:

.text-gradient {
  background: linear-gradient(135deg, oklch(0.75 0.32 315) 0%, oklch(0.7 0.3 280) 50%, oklch(0.68 0.28 250) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-bright {
  background: linear-gradient(135deg, oklch(0.85 0.35 315) 0%, oklch(0.8 0.32 280) 40%, oklch(0.75 0.3 250) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px oklch(0.75 0.32 315 / 0.4);
}

✨ GLASS MORPHISM ЭФФЕКТЫ

Основные Glass стили:

1. Glass Card (карточки):

.glass-card {
  background: rgba(255, 255, 255, 0.12); /* Полупрозрачный фон */
  backdrop-filter: blur(20px); /* Размытие заднего плана */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Полупрозрачная граница */
  box-shadow:
    0 8px 32px rgba(168, 85, 247, 0.18),
    /* Фиолетовая тень */ 0 4px 16px rgba(147, 51, 234, 0.12),
    /* Дополнительная тень */ inset 0 1px 0 rgba(255, 255, 255, 0.3); /* Внутренняя подсветка */
  transition: all 0.3s ease;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.15); /* Ярче при hover */
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 12px 40px rgba(168, 85, 247, 0.25),
    /* Усиленная тень */ 0 6px 20px rgba(147, 51, 234, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

2. Glass Input (поля ввода):

.glass-input {
  background: rgba(255, 255, 255, 0.08); /* Минимальная прозрачность */
  backdrop-filter: blur(12px); /* Меньше blur для читаемости */
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  outline: none;
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.12); /* Ярче при фокусе */
  border: 1px solid rgba(168, 85, 247, 0.6); /* Фиолетовая граница */
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.2),
    /* Фокусное кольцо */ 0 4px 20px rgba(147, 51, 234, 0.3),
    /* Светящаяся тень */ 0 0 20px rgba(168, 85, 247, 0.15); /* Glow эффект */
}

3. Glass Button (кнопки):

.glass-button {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.9) 0%,
    /* Фиолетовый градиент */ rgba(120, 119, 248, 0.9) 40%,
    /* Сине-фиолетовый */ rgba(59, 130, 246, 0.85) 100% /* Синий */
  );
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 8px 32px rgba(168, 85, 247, 0.35),
    /* Фиолетовая тень */ inset 0 1px 0 rgba(255, 255, 255, 0.2); /* Внутренняя подсветка */
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Анимированный блик */
.glass-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: left 0.5s ease;
}

.glass-button:hover::before {
  left: 100%; /* Блик пробегает по кнопке */
}

.glass-button:hover {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 1) 0%,
    /* Полная непрозрачность */ rgba(120, 119, 248, 1) 40%,
    rgba(59, 130, 246, 0.95) 100%
  );
  box-shadow:
    0 12px 40px rgba(168, 85, 247, 0.45),
    /* Усиленная тень */ inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px); /* Подъем кнопки */
}

4. Glass Secondary (вторичные элементы):

.glass-secondary {
  background: rgba(255, 255, 255, 0.1); /* Меньше прозрачности */
  backdrop-filter: blur(16px); /* Средний blur */
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.glass-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 24px rgba(139, 69, 199, 0.15);
}

5. Glass Sidebar:

.glass-sidebar {
  background: rgba(255, 255, 255, 0.08); /* Очень прозрачный */
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 32px rgba(168, 85, 247, 0.15),
    /* Мягкая тень */ inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

🎭 СПЕЦИАЛЬНЫЕ ЭФФЕКТЫ

1. Glow Effects (световые эффекты):

.glow-purple {
  box-shadow:
    0 0 20px rgba(168, 85, 247, 0.5),
    /* Близкое свечение */ 0 0 40px rgba(120, 119, 248, 0.35),
    /* Среднее свечение */ 0 0 60px rgba(59, 130, 246, 0.2),
    /* Дальнее свечение */ 0 0 80px rgba(192, 132, 252, 0.15); /* Общий ореол */
}

.glow-text {
  text-shadow:
    0 0 10px rgba(168, 85, 247, 0.6),
    /* Текстовое свечение */ 0 0 20px rgba(120, 119, 248, 0.45),
    0 0 30px rgba(59, 130, 246, 0.3),
    0 0 40px rgba(192, 132, 252, 0.25);
}

2. Анимированный фон:

.bg-animated {
  background: /* основной градиент */;
  position: relative;
  overflow: hidden;
}

.bg-animated::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(168, 85, 247, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(120, 119, 248, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(59, 130, 246, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 60% 30%, rgba(192, 132, 252, 0.2) 0%, transparent 50%);
  animation: float 20s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    opacity: 1;
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    opacity: 0.8;
    transform: translateY(-20px) rotate(2deg);
  }
  66% {
    opacity: 0.9;
    transform: translateY(10px) rotate(-1deg);
  }
}

3. Плавающие частицы:

.particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
}

.particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: particleFloat 15s linear infinite;
}

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

📝 ТИПОГРАФИКА

Шрифты:

:root {
  --font-sans: var(--font-geist-sans); /* Основной шрифт */
  --font-mono: var(--font-geist-mono); /* Моноширинный */
}

Geist Sans - современный, читаемый шрифт для интерфейсов
Geist Mono - для кода, артикулов и технической информации

Размеры текста:

• text-xs (12px) - мелкий текст, бейджи
• text-sm (14px) - описания, подписи
• text-base (16px) - основной текст
• text-lg (18px) - заголовки карточек
• text-xl (20px) - заголовки секций
• text-2xl (24px) - главные заголовки

Weights (жирность):

• font-normal (400) - обычный текст
• font-medium (500) - акцентный текст
• font-semibold (600) - заголовки
• font-bold (700) - важные элементы

📐 РАЗМЕРЫ И ОТСТУПЫ

Border Radius (скругления):

:root {
  --radius: 0.625rem; /* 10px - базовый */
}

--radius-sm: calc(var(--radius) - 4px); /* 6px - маленькие */
--radius-md: calc(var(--radius) - 2px); /* 8px - средние */
--radius-lg: var(--radius); /* 10px - большие */
--radius-xl: calc(var(--radius) + 4px); /* 14px - очень большие */

Стандартные размеры элементов:

• Высота кнопок: h-8 (32px), h-9 (36px), h-10 (40px)
• Высота полей ввода: h-9 (36px) стандарт, h-11 (44px) glass
• Отступы в карточках: p-6 (24px)
• Отступы в кнопках: px-4 py-2 (16px/8px)

Spacing Scale (отступы):

• gap-1 (4px) - минимальные отступы
• gap-2 (8px) - элементы в строке
• gap-4 (16px) - стандартные отступы
• gap-6 (24px) - карточки и секции
• gap-8 (32px) - большие блоки

🌊 АНИМАЦИИ И ПЕРЕХОДЫ

Стандартные переходы:

transition: all 0.3s ease; /* Универсальный */
transition: color 0.2s ease; /* Только цвет */
transition: transform 0.2s ease; /* Только трансформации */
transition: box-shadow 0.3s ease; /* Только тени */

Кривые анимации:

• ease - стандартная (медленно-быстро-медленно)
• ease-in - медленное начало
• ease-out - медленное окончание
• ease-in-out - медленное начало и окончание

Hover эффекты:

/* Кнопки поднимаются */
.button:hover {
  transform: translateY(-2px);
}

/* Карточки увеличивают тень */
.card:hover {
  box-shadow: 0 12px 40px rgba(168, 85, 247, 0.25);
}

/* Ссылки подчеркиваются */
.link:hover {
  text-decoration: underline;
}

📱 АДАПТИВНОСТЬ

Breakpoints:

/* Mobile First подход */
/* По умолчанию - мобильные устройства */

@media (min-width: 640px) {
  /* sm: */
  /* Маленькие планшеты */
}

@media (min-width: 768px) {
  /* md: */
  /* Планшеты */
}

@media (min-width: 1024px) {
  /* lg: */
  /* Десктоп */
}

@media (min-width: 1280px) {
  /* xl: */
  /* Большой десктоп */
}

Адаптивные паттерны:

/* Сетки */
.grid-cols-1 md:grid-cols-2 lg:grid-cols-3

/* Текст */
.text-sm md:text-base lg:text-lg

/* Отступы */
.p-4 md:p-6 lg:p-8

/* Скрытие */
.hidden md:block

🎯 ACCESSIBILITY

Focus состояния:

.focus-visible:border-ring {
  border-color: var(--ring);
}

.focus-visible:ring-ring\/50 {
  box-shadow: 0 0 0 3px rgba(var(--ring), 0.5);
}

Цветовые контрасты:

• Основной текст: минимум 4.5:1 с фоном
• Крупный текст: минимум 3:1 с фоном
• Интерактивные элементы: минимум 3:1 с фоном

Состояния ошибок:

.aria-invalid:ring-destructive\/20 {
  box-shadow: 0 0 0 3px rgba(var(--destructive), 0.2);
}

.aria-invalid:border-destructive {
  border-color: var(--destructive);
}

🛠️ КАСТОМИЗАЦИЯ

CSS Custom Properties:

Все цвета и размеры используют CSS переменные, что позволяет легко кастомизировать тему:

/* Изменение основного цвета */
:root {
  --primary: oklch(0.65 0.28 270); /* Меняем с 315 на 270 = синий */
}

/* Изменение размера скруглений */
:root {
  --radius: 1rem; /* Больше скругления */
}

Создание новых градиентов:

.gradient-custom {
  background: linear-gradient(135deg, oklch(L C H) 0%, /* Lightness Chroma Hue */ oklch(L C H) 100%);
}

🔧 ИНСТРУМЕНТЫ И УТИЛИТЫ

Утилиты Tailwind:

/* Курсоры */
.cursor-pointer              /* Для кликабельных элементов */

/* Скроллбары */
.scrollbar-thin              /* Тонкие скроллбары */
.scrollbar-thumb-white\/20   /* Цвет ползунка */

/* Обрезка текста */
.truncate                    /* Обрезка с ... */
.line-clamp-2               /* Обрезка на 2 строки */

/* Позиционирование */
.absolute                    /* Абсолютное */
.relative                    /* Относительное */
.fixed                       /* Фиксированное */

Кастомные утилиты:

/* Убираем стрелки у number input */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Принудительный cursor для интерактивных элементов */
button,
[role='button'],
[data-state] {
  cursor: pointer;
}

---

Дизайн-система основана на анализе globals.css и UI компонентов
Версия документа: 2025-08-21
Основа: Glass Morphism + OKLCH + Cosmic Theme + Radix UI