195 lines
4.8 KiB
Markdown
195 lines
4.8 KiB
Markdown
# Style.md — Figma Analysis v1.0
|
||
|
||
> **Статус:** Live from Figma API
|
||
> **Источник:** https://www.figma.com/file/eK2J5cS2dSzv8kIblv8iOY
|
||
> **Дата анализа:** 2026-07-05
|
||
> **Файл:** like stype2
|
||
> **Версия:** 2372687492209533567
|
||
|
||
---
|
||
|
||
## 1. CANVAS & LAYOUT
|
||
|
||
| Token | Value | Source |
|
||
|-------|-------|--------|
|
||
| `--canvas-width` | `1080px` | Stories format |
|
||
| `--canvas-height` | `1920px` | Stories format |
|
||
| `--canvas-ratio` | `9:16` | Stories format |
|
||
| `--bg-canvas` | `#050508` | Derived from #000000 |
|
||
| `--safe-top` | `280px` | WhatsApp/IG UI |
|
||
| `--safe-bottom` | `380px` | IG/Telegram UI |
|
||
| `--safe-content` | `Y:280-1540` | 1260px height |
|
||
|
||
---
|
||
|
||
## 2. COLORS (7 unique from Figma)
|
||
|
||
### Palette
|
||
|
||
| Token | Hex | Usage |
|
||
|-------|-----|-------|
|
||
| `--color-primary` | `#ffffff` | Фон, текст |
|
||
| `--color-accent` | `#d1f800` | Жёлтый акцент |
|
||
| `--color-bg` | `#000000` | Фон тёмный |
|
||
| `--color-brand` | `#0566fa` | Синий (Stripe-like) |
|
||
| `--color-surface` | `#feffff` | Поверхность |
|
||
| `--color-text` | `#161616` | Тёмный текст |
|
||
| `--color-muted` | `#f4f4f4` | Светлый текст |
|
||
|
||
### Gradients
|
||
|
||
| Token | Definition |
|
||
|-------|------------|
|
||
| `--gradient-primary` | `linear-gradient(135deg, #ffffff, #d1f800)` |
|
||
| `--gradient-secondary` | `linear-gradient(135deg, #d1f800, #000000)` |
|
||
| `--gradient-brand` | `linear-gradient(135deg, #0566fa, #d1f800)` |
|
||
|
||
### CSS Variables
|
||
|
||
```css
|
||
:root {
|
||
--color-primary: #ffffff;
|
||
--color-accent: #d1f800;
|
||
--color-bg: #000000;
|
||
--color-brand: #0566fa;
|
||
--color-surface: #feffff;
|
||
--color-text: #161616;
|
||
--color-muted: #f4f4f4;
|
||
|
||
--gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-accent));
|
||
--gradient-secondary: linear-gradient(135deg, var(--color-accent), var(--color-bg));
|
||
--gradient-brand: linear-gradient(135deg, var(--color-brand), var(--color-accent));
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 3. TYPOGRAPHY (214 instances from Figma)
|
||
|
||
### Fonts
|
||
|
||
| Font | Family | Weights | Instances |
|
||
|------|--------|---------|-----------|
|
||
| Inter | `Inter` | 400, 700 | 214 |
|
||
|
||
### Scale
|
||
|
||
| Element | Size | Weight | Source |
|
||
|---------|------|--------|--------|
|
||
| Base | 14px | 400 | Figma |
|
||
| Small | 15px | 400 | Figma |
|
||
| Regular | 16px | 400 | Figma |
|
||
| Subhead | 18px | 700 | Figma |
|
||
| Body | 20px | 400 | Figma |
|
||
| Caption | 21px | 400 | Figma |
|
||
| Button | 22px | 700 | Figma |
|
||
| Heading | 24px | 700 | Figma |
|
||
|
||
### CSS
|
||
|
||
```css
|
||
:root {
|
||
--font-primary: 'Inter', -apple-system, sans-serif;
|
||
--font-size-base: 16px;
|
||
--font-size-sm: 14px;
|
||
--font-size-lg: 18px;
|
||
--font-weight-regular: 400;
|
||
--font-weight-bold: 700;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 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 (156 frames from Figma)
|
||
|
||
### Unique Sizes
|
||
|
||
| Size | Count | Usage |
|
||
|------|-------|-------|
|
||
| 1920×1080 | 16 | Hero frames |
|
||
| 184×79 | 9 | Card elements |
|
||
| 204×58 | 7 | Button variants |
|
||
| 204×82 | 6 | Input fields |
|
||
| 184×58 | 4 | Icon containers |
|
||
|
||
### Component Sizes
|
||
|
||
| Component | Width | Height | Count |
|
||
|-----------|-------|--------|-------|
|
||
| Hero | 1920px | 1080px | 16 |
|
||
| Card | 488px | 416px | 1 |
|
||
| Button | 204px | 58px | 7 |
|
||
| Input | 464px | 344px | 1 |
|
||
| Badge | 63px | 63px | 2 |
|
||
|
||
---
|
||
|
||
## 6. COMPONENTS (0 components from Figma)
|
||
|
||
*Компоненты не найдены в исходном файле. Создаются из фреймов.*
|
||
|
||
| Component | Type | Size |
|
||
|-----------|------|------|
|
||
| Button | FRAME | 204×58 |
|
||
| Input | FRAME | 464×344 |
|
||
| Card | FRAME | 488×416 |
|
||
| Badge | FRAME | 63×63 |
|
||
|
||
---
|
||
|
||
## 7. CSS VARIABLES (production-ready)
|
||
|
||
```css
|
||
/* Auto-generated from Figma */
|
||
:root {
|
||
/* Colors */
|
||
--color-primary: #ffffff;
|
||
--color-accent: #d1f800;
|
||
--color-bg: #000000;
|
||
--color-brand: #0566fa;
|
||
--color-surface: #feffff;
|
||
--color-text: #161616;
|
||
--color-muted: #f4f4f4;
|
||
|
||
/* Gradients */
|
||
--gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-accent));
|
||
--gradient-secondary: linear-gradient(135deg, var(--color-accent), var(--color-bg));
|
||
--gradient-brand: linear-gradient(135deg, var(--color-brand), var(--color-accent));
|
||
|
||
/* Typography */
|
||
--font-primary: 'Inter', -apple-system, sans-serif;
|
||
--font-size-base: 16px;
|
||
--font-size-sm: 14px;
|
||
--font-size-lg: 18px;
|
||
--font-weight-regular: 400;
|
||
--font-weight-bold: 700;
|
||
|
||
/* 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*
|