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):

```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:

```css
.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 (для графиков):

```css
: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:

```css
: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 (основной):

```css
.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 (для фонов):

```css
.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 (интенсивный):

```css
.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 (теплый):**

```css
.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 (холодный):**

```css
.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 (зеленый):**

```css
.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% /* Сине-зеленый */
  );
}
```

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

```css
.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 (карточки):

```css
.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 (поля ввода):

```css
.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 (кнопки):

```css
.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 (вторичные элементы):

```css
.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:

```css
.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 (световые эффекты):

```css
.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. Анимированный фон:

```css
.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. Плавающие частицы:

```css
.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;
  }
}
```

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

### Шрифты:

```css
: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 (скругления):

```css
: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) - большие блоки

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

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

```css
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 эффекты:

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

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

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

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

### Breakpoints:

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

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

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

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

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

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

```css
/* Сетки */
.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 состояния:

```css
.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 с фоном

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

```css
.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 переменные, что позволяет легко кастомизировать тему:

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

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

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

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

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

### Утилиты Tailwind:

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

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

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

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

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

```css
/* Убираем стрелки у 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_