ads-stories/interesting/design.md

Design System — Interesting

Статус: Live from Figma
Источник: https://www.figma.com/file/H5KJles5GpNiKk1tm9SjWc
Дата анализа: 2026-07-05
Файл: interesting
Версия: 2372699282987939162

---

1. ЦВЕТА (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;

  /* 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);
}

---

2. ТИПОГРАФИКА (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;
}

---

3. РАЗМЕРЫ (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

---

4. CSS VARIABLES (production-ready)

/* Auto-generated from Figma — Interesting theme */
: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;
}

---

Generated from Figma • Figma to HyperFrames v1.0