ads-stories/style.md

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

: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

: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)

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