# Design System — Interesting

> **Статус:** Live from Figma  
> **Источник:** https://www.figma.com/file/H5KJles5GpNiKk1tm9SjWc  
> **Дата анализа:** 2026-07-05  
> **Файл:** interesting  
> **Версия:** 2372699282987939162

---

## 1. ЦВЕТА (10 unique from Figma)

### Palette

| Token | Hex | Usage |
|-------|-----|-------|
| `--color-primary` | `#ffffff` | Фон, текст |
| `--color-bg` | `#000000` | Фон тёмный |
| `--color-surface` | `#e7f7f7` | Поверхность светлая |
| `--color-purple` | `#867de5` | Фиолетовый основной |
| `--color-purple-dark` | `#5d26be` | Фиолетовый тёмный |
| `--color-pink` | `#ff6fcc` | Розовый акцент |
| `--color-yellow` | `#e6ff6f` | Жёлтый акцент |
| `--color-ink` | `#010101` | Чёрный текст |
| `--color-gray` | `#d9d9d9` | Серый текст |
| `--color-surface-light` | `#ecf9f9` | Поверхность светлая 2 |

### Gradients

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

### CSS Variables

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

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-purple), var(--color-pink));
  --gradient-secondary: linear-gradient(135deg, var(--color-purple-dark), var(--color-purple));
  --gradient-accent: linear-gradient(90deg, var(--color-pink), var(--color-yellow));
  --gradient-dark: linear-gradient(180deg, var(--color-bg), #1a0b2e);
}
```

---

## 2. ТИПОГРАФИКА (614 instances from Figma)

### Fonts

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

### Scale

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

### CSS

```css
:root {
  --font-primary: 'Sora', -apple-system, sans-serif;
  --font-secondary: 'Inter', -apple-system, sans-serif;
  --font-weight-light: 200;
  --font-weight-thin: 100;
  --font-weight-regular: 400;
  --font-weight-bold: 300;
}
```

---

## 3. РАЗМЕРЫ (303 frames from Figma)

### Unique Sizes

| Size | Count | Usage |
|------|-------|-------|
| 1920×1080 | 40 | Hero frames |
| 400×210 | 21 | Cards |
| 400×80 | 21 | Buttons/headers |
| 400×90 | 21 | Inputs |
| 380×391 | 16 | Cards large |
| 380×138 | 16 | Cards medium |
| 1760×161 | 4 | Navigation |
| 1760×391 | 4 | Hero large |
| 1760×677 | 2 | Hero extra |
| 1160×640 | 4 | Content |
| 1160×320 | 8 | Content small |

### Component Sizes

| Component | Width | Height | Count |
|-----------|-------|--------|-------|
| Hero | 1920px | 1080px | 40 |
| Card | 400px | 210px | 21 |
| Card Large | 380px | 391px | 16 |
| Button | 400px | 80px | 21 |
| Input | 400px | 90px | 21 |
| Nav | 1760px | 161px | 4 |

---

## 4. CSS VARIABLES (production-ready)

```css
/* Auto-generated from Figma — Interesting theme */
:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-bg: #000000;
  --color-surface: #e7f7f7;
  --color-purple: #867de5;
  --color-purple-dark: #5d26be;
  --color-pink: #ff6fcc;
  --color-yellow: #e6ff6f;
  --color-ink: #010101;
  --color-gray: #d9d9d9;
  --color-surface-light: #ecf9f9;

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

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

---

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