# Design System — Interesting Theme

> **Источник:** https://www.figma.com/file/H5KJles5GpNiKk1tm9SjWc  
> **Дата анализа:** 2026-07-05  
> **Компонентов:** 427 | **Цветов:** 10 | **Шрифтов:** 614 instances

---

## 1. CANVAS

| Параметр | Значение |
|----------|----------|
| Width | 1080px |
| Height | 1920px |
| Aspect Ratio | 9:16 (Stories) |
| Background | `#000000` |

---

## 2. COLORS

### Palette

| Token | Hex | Usage |
|-------|-----|-------|
| `--color-bg` | `#000000` | Фон |
| `--color-surface` | `#e7f7f7` | Поверхность |
| `--color-surface-light` | `#ecf9f9` | Поверхность 2 |
| `--color-purple` | `#867de5` | Акцент 1 |
| `--color-purple-dark` | `#5d26be` | Акцент 2 |
| `--color-pink` | `#ff6fcc` | Акцент 3 |
| `--color-yellow` | `#e6ff6f` | Акцент 4 |
| `--color-text` | `#ffffff` | Текст |
| `--color-text-muted` | `#d9d9d9` | Текст 2 |
| `--color-ink` | `#010101` | Текст 3 |

### Gradients

| Token | Definition |
|-------|------------|
| `--gradient-primary` | `linear-gradient(135deg, #867de5, #ff6fcc)` |
| `--gradient-secondary` | `linear-gradient(135deg, #5d26be, #e6ff6f)` |
| `--gradient-accent` | `linear-gradient(90deg, #ff6fcc, #e6ff6f)` |

---

## 3. TYPOGRAPHY

### Fonts

| Font | Weights | Instances |
|------|---------|-----------|
| Sora | 100, 200, 300 | 584 |
| Inter | 400 | 30 |

### Scale

| Element | Size | Weight | Usage |
|---------|------|--------|-------|
| H1 | 96px | 300 | Hero |
| H2 | 64px | 300 | Заголовок |
| H3 | 48px | 200 | Подзаголовок |
| H4 | 32px | 200 | Карточка |
| Body | 20px | 100 | Текст |
| Caption | 16px | 100 | Мелкий |

---

## 4. COMPONENTS (427 from Figma)

### Card Patterns

| Type | Size | Count |
|------|------|-------|
| Hero | 1920×1080 | 40 |
| Card Large | 557×611 | 3 |
| Card Medium | 538×433 | 2 |
| Card Small | 400×210 | 21 |
| Button | 400×80 | 21 |
| Nav | 1760×161 | 4 |

---

## 5. CSS VARIABLES

```css
:root {
  /* Colors */
  --color-bg: #000000;
  --color-surface: #e7f7f7;
  --color-surface-light: #ecf9f9;
  --color-purple: #867de5;
  --color-purple-dark: #5d26be;
  --color-pink: #ff6fcc;
  --color-yellow: #e6ff6f;
  --color-text: #ffffff;
  --color-text-muted: #d9d9d9;
  --color-ink: #010101;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-purple), var(--color-pink));
  --gradient-secondary: linear-gradient(135deg, var(--color-purple-dark), var(--color-yellow));
  --gradient-accent: linear-gradient(90deg, var(--color-pink), var(--color-yellow));

  /* Typography */
  --font-primary: 'Sora', -apple-system, sans-serif;
  --font-weight-light: 200;
  --font-weight-thin: 100;
  --font-weight-regular: 300;
}
```

---

*Generated from Figma • Figma to HyperFrames v1.0*