ads-stories/interesting/style.md

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

: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

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

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