# 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*