ads-stories/design.md

Design System — Interesting Theme

Источник: https://www.figma.com/file/H5KJles5GpNiKk1tm9SjWc
Дата анализа: 2026-07-05
Компонентов: 427 | Цветов: 10 | Шрифтов: 614 instances

---

1. CANVAS

Параметр	Значение
Width	1080px
Height	1920px
Aspect Ratio	9:16 (Stories)
Background	#000000

---

2. COLORS

Palette

Token	Hex	Usage
--color-bg	#000000	Фон
--color-surface	#e7f7f7	Поверхность
--color-surface-light	#ecf9f9	Поверхность 2
--color-purple	#867de5	Акцент 1
--color-purple-dark	#5d26be	Акцент 2
--color-pink	#ff6fcc	Акцент 3
--color-yellow	#e6ff6f	Акцент 4
--color-text	#ffffff	Текст
--color-text-muted	#d9d9d9	Текст 2
--color-ink	#010101	Текст 3

Gradients

Token	Definition
--gradient-primary	linear-gradient(135deg, #867de5, #ff6fcc)
--gradient-secondary	linear-gradient(135deg, #5d26be, #e6ff6f)
--gradient-accent	linear-gradient(90deg, #ff6fcc, #e6ff6f)

---

3. TYPOGRAPHY

Fonts

Font	Weights	Instances
Sora	100, 200, 300	584
Inter	400	30

Scale

Element	Size	Weight	Usage
H1	96px	300	Hero
H2	64px	300	Заголовок
H3	48px	200	Подзаголовок
H4	32px	200	Карточка
Body	20px	100	Текст
Caption	16px	100	Мелкий

---

4. COMPONENTS (427 from Figma)

Card Patterns

Type	Size	Count
Hero	1920×1080	40
Card Large	557×611	3
Card Medium	538×433	2
Card Small	400×210	21
Button	400×80	21
Nav	1760×161	4

---

5. CSS VARIABLES

:root {
  /* Colors */
  --color-bg: #000000;
  --color-surface: #e7f7f7;
  --color-surface-light: #ecf9f9;
  --color-purple: #867de5;
  --color-purple-dark: #5d26be;
  --color-pink: #ff6fcc;
  --color-yellow: #e6ff6f;
  --color-text: #ffffff;
  --color-text-muted: #d9d9d9;
  --color-ink: #010101;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-purple), var(--color-pink));
  --gradient-secondary: linear-gradient(135deg, var(--color-purple-dark), var(--color-yellow));
  --gradient-accent: linear-gradient(90deg, var(--color-pink), var(--color-yellow));

  /* Typography */
  --font-primary: 'Sora', -apple-system, sans-serif;
  --font-weight-light: 200;
  --font-weight-thin: 100;
  --font-weight-regular: 300;
}

---

Generated from Figma • Figma to HyperFrames v1.0