initial: ads-stories project with interesting theme

design.md

@@ -0,0 +1,115 @@
+# 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*