## Колірна палітра

### Основні кольори

**Передумови**

- Колір: `#f2f2f0`

- Опис: Світлий нейтральний брудно-білуватий, чистий та мінімалістичний

- Використання: Усі фони слайдів без винятку

**Основний текст і рядки**

- Колір: `#2B2B2B` або `#1A1A1A`

- Опис: Дуже темно-сірий, майже чорний

- Використання: Весь текстовий контент, лінії роздільників заголовків, геометричні контури, контури символів

### Акцентні кольори

**Яскраво-синій**

- Колір: `#5B7FFF` (альтернатива: `#4D6FE8`)

- Опис: Середньо-яскраво-блакитний з енергією

- Використання: Кругові вузли на геометричних фігурах, одяг/шарфи персонажів, заповнення ґудзиків, декоративні точки

**Приглушене золото**

- Колір: `#C9B568` (альтернатива: `#D4C17A`)

- Опис: Теплий гірчично-золотистий відтінок

- Використання: Кругові вузли на геометричних фігурах (чергуються з синім), декоративні акценти

### Правила нанесення кольору

- Фон ЗАВЖДИ `#E8E6E3`

- Текст ЗАВЖДИ `#2B2B2B`

- Синій та золотий кольори використовуються ЛИШЕ для круглих вузлів та акцентів символів

- Ніколи не використовуйте синій або золотий як великі блоки або кольори тексту

- Зберігайте високий контраст між текстом і фоном

## Система типографіки

### Сімейства шрифтів

**Основний шрифт для відображення: Roca Two (або подібний із засічками)**

- Характеристики: Жирний, дружній шрифт із засічками та округлими рисами

- Вага: Жирний/Важкий

- Використання: усі заголовки слайдів, основні заголовки, заголовки розділів

- Зберегти той самий шрифт

**Шрифт додаткової частини тексту: Poppins (або Inter)**

- Характеристики: Чистий, сучасний шрифт без засічок з чудовою читабельністю

- Вага: Звичайна (400) для тіла, Середня (500) для акценту

- Використання: весь основний текст, підзаголовки, підписи, номери сторінок, текст логотипу

- зберегти той самий шрифт

### Ієрархія розмірів шрифту

**Надзвичайно великі заголовки** (Слайди обкладинки, роздільники основних розділів)

- Шрифт: **Roca Two**

- Розмір: 72-96 пунктів

- Колір: `#2B2B2B`

- Використання: «Головна назва», «Дякую», «Порядок денний»

**Великі заголовки** (Назви слайдів)

- Шрифт: **Roca Two**

- Розмір: 48-60 пунктів

- Колір: `#2B2B2B`

- Використання: «Наше бачення», «Позиціонування бренду», «Що таке YouMind?»

**Основний текст** (абзаци, описи)

- Шрифт: Poppins Regular

- Розмір: 18-24 пункти

- Колір: `#2B2B2B`

- Висота рядка: 1,6-1,8

- Використання: весь вміст абзаців, описи

**Дрібний текст** (нумери сторінок, нижній колонтитул, підписи)

- Шрифт: Poppins Regular

- Розмір: 16-18 пунктів

- Колір: `#2B2B2B`

- Використання: "Сторінка X", URL-адреси веб-сайтів, адреси електронної пошти

**Текст кнопки/таблетки**

- Шрифт: Poppins Regular або Medium

- Розмір: 20-24 пункти

- Колір: `#2B2B2B`

- Використання: Текст всередині заокруглених кнопок для таблеток

### Правила типографіки

- Ніколи не змішуйте шрифти із зарубками - для відображення потрібно використовувати лише **Roca Two**

- Ніколи не використовуйте шрифт із засічками для основного тексту - лише Poppins

- Підтримуйте постійну висоту рядка (1,6-1,8) для зручності читання

- Весь текст має бути у форматі `#2B2B2B` - без винятків

- Достатній інтервал між абзацами (24-32 пункти)

## Система макета

### Структура глобального заголовка

**Тільки титульне скло (сторінка 1):**

**Елемент лівого заголовка:**

- Логотип

- Розмір: діаметр 32-40 pt

- Колір: Чорний контур `#2B2B2B`

- Положення: 60-80 пікселів від лівого краю, 60-80 пікселів від верхнього краю

- Інтервал: 12-16 пікселів між логотипом і текстом

**Елемент правого заголовка:**

- Шрифт: Poppins Regular, 16-18 пунктів

- Колір: `#2B2B2B`

- Положення: 60-80 пікселів від правого краю, 60-80 пікселів зверху

- Вирівнювання: по правому краю

**Роздільник заголовка:**

- Тонка горизонтальна лінія

- Вага: 1-2 пт

- Колір: `#2B2B2B`

- Розташування: Під елементами заголовка, на всю ширину з полями

- Відстань від країв: 60-80 пікселів зліва та справа

**Слайди зі змістом (сторінки 2-4) та заключний слайд (сторінка 5):**

- БЕЗ логотипу YouMind

- Тільки текст "Сторінка X"

- Розташування: у верхньому правому куті, внизу по центру або в іншому непомітному місці

- Без роздільної лінії заголовка

- Більше вертикального простору для контенту

### Система маржі

**Стандартні поля:**

- Зверху: 60-80 пікселів (під роздільником заголовка додайте ще 40-60 пікселів)

- Знизу: 60-80 пікселів

- Ліворуч: 80-100 пікселів

- Праворуч: 80-100 пікселів

**Розділ вмісту:**

- Після врахування заголовка та полів, область вмісту становить приблизно 1200-1280 пікселів завширшки × 600-680 пікселів заввишки (для 16:9 з роздільною здатністю 1920×1080)

## Візуальні елементи

### Намальовані вручну геометричні фігури

**Основний дизайн:**

- Стиль: Недосконалі, намальовані від руки прямокутники та квадрати

- Товщина лінії: 2-3 пт

- Колір: Чорний `#2B2B2B`

- Якість: Органічна, злегка хиткі лінії (не ідеально рівні)

- З'єднання: лінії, що з'єднують фігури під різними кутами

**Кругові вузли:**

- Форма: Ідеальні кола

- Розмір: діаметр 24-40 pt

- Заливка: Суцільний колір - або `#5B7FFF` (синій), або `#C9B568` (золотий)

- Розташування: У точках з'єднання та кутах геометричних фігур

- Візерунок: чергуйте синій та золотий для різноманітності

**Правила розміщення:**

- Розташування в кутах слайдів (угорі ліворуч, угорі праворуч, унизу ліворуч, унизу праворуч)

- Ніколи не перетинайтеся з текстовим контентом

- Тримайте відстань 40-60 пікселів від областей контенту

- Створіть візуальний баланс – якщо ліва сторона має форми, то й права також повинна

- Типове розташування: 2-4 з'єднаних прямокутника з 3-6 круговими вузлами

### Закруглені кнопки для таблеток

**Технічні характеристики конструкції:**

- Форма: Заокруглений прямокутник (форма таблетки)

- Межа: 2 pt суцільний чорний колір `#2B2B2B`

- Заливка: прозора або `#E8E6E3` (така ж, як і фон)

- Радіус межі: Радіус повної висоти (ідеальна таблетка)

- Відступи: 16-24 пікселів по горизонталі, 12-16 пікселів по вертикалі

- Текст: Poppins Regular, 20-24pt, `#2B2B2B`

**Використання:**

- Елементи навігації на слайдах порядку денного

- Кнопки заклику до дії

- Мітки розділів

- Завжди окреслено, ніколи не заповнено кольором

**Стан при наведенні курсора/активний стан (якщо інтерактивний):**

- Заливка: `#5B7FFF` (синій)

- Текст: Білий `#FFFFFF`

- Межа: `#5B7FFF`

### Декоративні точкові сітки

**Технічні характеристики:**

- Крапки: Маленькі кола, діаметром 3-4 pt

- Колір: `#2B2B2B`

- Візерунок: Звичайна сітка, інтервал 12-16 пікселів

- Розташування: сітка 6×6 або 8×8

- Розташування: верхній правий кут, 100-150 пікселів від країв

- Використання: Додатковий акцент, додає візуального інтересу, не перевантажуючи

### Іконки (мінімальне використання)

**Стиль:**

- Тільки лінійний малюнок, без заливки

- Вага: 2-3 пт

- Колір: `#2B2B2B`

- Розмір: 48-64 пунктів

- Приклади: значок ока (зір), ціль/перехрестя (місія)

- Використання: рідко, лише для підкріплення певних концепцій

## Система ілюстрації персонажів

### Специфікації дизайну персонажів

**Базова структура:**

- Мінімалістична, намальована від руки ілюстрація простого білого гуманоїдного персонажа у вигляді каракулів. Персонаж має округлу, видовжену голову, дві маленькі чорні цятки замість очей та помітний загострений ніс. У нього немає чітко виражених пальців рук або ніг. Він носить товстий, довгий, суцільний синій шарф [необов'язково: замініть «гірчично-золотий шарф»], обмотаний навколо шиї, а хвіст звисає вниз. У художньому стилі використовуються товсті, текстуровані контури чорного маркера та однотонні кольори без затінення, на однотонному, брудно-білому фоні. Персонаж є [те, що відповідає контексту].

**Синій акцент (КРИТИЧНО):**

- Елемент: Шарф, сорочка або предмет одягу

- Колір: `#5B7FFF` (яскраво-синій)

- Стиль: Намальовані від руки, плавні органічні форми

- Охоплення: 15-25% персонажа

- Мета: Фірмова ідентичність, візуальний інтерес, рух

**Стильова послідовність:**

- Завжди якість малювання від руки (органічність, недосконалі лінії)

- Завжди додавайте синій акцентний елемент

- Зберігайте однакову товщину лінії для всіх символів

- Зберігайте пропорції однаковими в усіх позах

### Керівні принципи мінімалістичної ілюстрації

**Простота понад усе:**

- Усі ілюстрації мають бути максимально простими та мінімалістичними

- Висота символів НЕ повинна перевищувати 120 пунктів (приблизно 10-12% висоти слайда)

- Геометричні елементи повинні бути невеликими та обмеженими лише кутами

- Загальне покриття ілюстрації має становити менше 15% площі слайда

- Уникайте складних або детальних малюнків

**Простір та дихальна зона:**

- Залишайте достатньо білого простору по всьому слайду

- Текст повинен займати лише 50-55% площі контенту (зазвичай лівий бік)

- Права сторона повинна залишатися переважно порожньою для візуального простору для дихання

- Великі поля з усіх боків: мінімум 100 пікселів, бажано 100-120 пікселів

- Ілюстрації обмежені лише нижнім правим кутом, на відстані щонайменше 100 пікселів від країв

**Баланс макета:**

- Центр слайда має бути чистим і порожнім

- Уникайте захаращення або заповнення всього доступного простору

- Стратегічно використовуйте білий простір для створення фокусу та чіткості

- Менше – це більше: видаліть непотрібні візуальні елементи

- Надайте пріоритет читабельності та простору над декором