116 lines
2.8 KiB
Markdown
116 lines
2.8 KiB
Markdown
# 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*
|