215 lines
5.9 KiB
Markdown
215 lines
5.9 KiB
Markdown
# Style.md — Interesting Theme
|
||
|
||
> **Статус:** Live from Figma API
|
||
> **Источник:** https://www.figma.com/file/H5KJles5GpNiKk1tm9SjWc
|
||
> **Дата анализа:** 2026-07-05
|
||
> **Файл:** interesting
|
||
> **Версия:** 2372699282987939162
|
||
|
||
---
|
||
|
||
## 1. CANVAS & LAYOUT
|
||
|
||
| Token | Value | Source |
|
||
|-------|-------|--------|
|
||
| `--canvas-width` | `1080px` | Stories format |
|
||
| `--canvas-height` | `1920px` | Stories format |
|
||
| `--canvas-ratio` | `9:16` | Stories format |
|
||
| `--bg-canvas` | `#000000` | Derived from Figma #000000 |
|
||
| `--safe-top` | `280px` | WhatsApp/IG UI |
|
||
| `--safe-bottom` | `380px` | IG/Telegram UI |
|
||
| `--safe-content` | `Y:280-1540` | 1260px height |
|
||
|
||
---
|
||
|
||
## 2. COLORS (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;
|
||
|
||
--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);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 3. TYPOGRAPHY (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;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 4. SPACING (derived from Figma frames)
|
||
|
||
| Token | Value | Source |
|
||
|-------|-------|--------|
|
||
| `--space-1` | `4px` | Micro |
|
||
| `--space-2` | `8px` | Inline |
|
||
| `--space-3` | `16px` | Element gaps |
|
||
| `--space-4` | `24px` | Section |
|
||
| `--space-5` | `32px` | Component |
|
||
| `--space-6` | `40px` | Card padding |
|
||
| `--space-8` | `64px` | Scene gaps |
|
||
|
||
---
|
||
|
||
## 5. DIMENSIONS (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 |
|
||
|
||
---
|
||
|
||
## 6. COMPONENTS (427 from Figma)
|
||
|
||
*Создаются из фреймов на основе паттернов:*
|
||
|
||
| Component | Type | Size | Pattern |
|
||
|-----------|------|------|---------|
|
||
| Hero | FRAME | 1920×1080 | 40 instances |
|
||
| Card | FRAME | 400×210 | 21 instances |
|
||
| Card Large | FRAME | 380×391 | 16 instances |
|
||
| Button | FRAME | 400×80 | 21 instances |
|
||
| Input | FRAME | 400×90 | 21 instances |
|
||
|
||
---
|
||
|
||
## 7. CSS VARIABLES (production-ready)
|
||
|
||
```css
|
||
/* Auto-generated from Figma */
|
||
: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;
|
||
|
||
/* Spacing */
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 16px;
|
||
--space-4: 24px;
|
||
--space-5: 32px;
|
||
--space-6: 40px;
|
||
--space-8: 64px;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
*Generated from Figma • Figma to HyperFrames v1.0*
|