# Дизайн-система, натхненна Duolingo

> Category: Продуктивність і SaaS
> Платформа для вивчення мов. Яскравий совиний зелений, масивні тіні, гейміфікована радість.

## 1. Візуальна тема та атмосфера

Duolingo — це гейміфікація, виражена як візуальна мова. Інтерфейс безсоромно яскравий: **совиний зелений** (`#58cc02`) є основним брендовим кольором, а масивна тінь 4px знизу на кожному інтерактивному елементі нагадує тривимірну кнопку, яку хочеться натиснути. Сторінка біла (`#ffffff`) із товстими рамками 2–3px у темно-сірому (`#e5e5e5`), а вся система сприймається як iOS-застосунок 2015 року, відроджений із кращою ієрархією.

Типографіка використовує **Feather Bold** (кастомний закруглений гротеск) для інтерфейсу та **Mona Sans** (або Inter) для основного тексту. Розміри відображення великі й впевнені — Duolingo ніколи не шепоче. Заголовки часто мають зелений підкреслювальний штрих або розміщені на зеленій таблетці, а маскот Дуо (зелена сова) виступає активним персонажем-ілюстрацією, а не статичним логотипом.

Мова форм дружня: радіус 16–20px на картках, 12px на кнопках, 9999px на чіпах і смугах прогресу. Іконографія заповнена, закруглена й кольорово-кодована за навиком — кожна поверхня уроку має миттєво впізнаване кольорове поєднання.

**Ключові характеристики:**
- Совиний зелений (`#58cc02`) як домінуючий брендовий колір, використовується на 30%+ поверхні
- Масивна тінь 4px знизу на кожній кнопці (тактильна «можливість натиснути»)
- Суцільні рамки 2–3px, ніколи не тонші за піксель
- Feather Bold (закруглений відображальний) + Mona Sans (основний текст)
- Великий впевнений шрифт — відображальні розміри починаються від 48px і більше
- Маскот як персонаж: Дуо-сова з'являється в онбордингу, помилках, серіях
- Помаранчевий серії (`#ff9600`) і рожевий самоцвітів (`#ce82ff`) як вторинні брендові кольори

## 2. Кольорова палітра та ролі

### Основні
- **Совиний зелений** (`#58cc02`): Основний бренд, основний CTA, правильна відповідь.
- **Совиний зелений темний** (`#58a700`): Колір натискання/тіні зелених кнопок.
- **Совиний зелений світлий** (`#89e219`): Наведення курсора, м'які заливки.
- **Совиний зелений блідий** (`#dbf8c5`): М'яка поверхня, банер успіху.

### Вторинні акценти
- **Помаранчевий серії** (`#ff9600`): Лічильник серії, іконка вогню, преміум-енергія.
- **Помаранчевий серії темний** (`#cc7a00`): Натиснутий помаранчевий.
- **Рожевий самоцвітів** (`#ce82ff`): Валюта самоцвітів, Super Duolingo.
- **Блакитний вугра** (`#1cb0f6`): Кнопка підказки, інформаційне посилання.
- **Кардинальний червоний** (`#ff4b4b`): Неправильна відповідь, втрачене життя.
- **Жовтий бджоли** (`#ffc800`): Значок Pro, досягнення.

### Поверхня
- **Сніговий** (`#ffffff`): Основний фон.
- **Вугор** (`#f7f7f7`): Розрив секцій, вторинна поверхня.
- **Лебідь** (`#e5e5e5`): Вимкнений фон, вставний блок.
- **Вовк** (`#777777`): Темний роздільник, вторинний текст.

### Чорнило та текст
- **Чорний вугра** (`#3c3c3c`): Основний текст.
- **Вовк** (`#777777`): Вторинний текст, підписи.
- **Заєць** (`#afafaf`): Вимкнений, плейсхолдер.

### Рамка
- **Лебідь** (`#e5e5e5`): Стандартна рамка 2px.
- **Заєць** (`#afafaf`): Підсилена рамка при наведенні.

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

### Шрифтова сім'я
- **Відображення / UI / Заголовки**: `Feather Bold`, з резервними варіантами: `'DIN Round Pro', 'Helvetica Neue', sans-serif`
- **Основний текст / Довгий формат**: `Mona Sans`, з резервними варіантами: `'Helvetica Neue', system-ui, sans-serif`
- **Код (рідко, школи/адмін)**: `JetBrains Mono`, з резервними варіантами: `ui-monospace, Menlo, monospace`

### Ієрархія

| Роль | Шрифт | Розмір | Насиченість | Висота рядка | Міжлітерний інтервал | Примітки |
|------|------|------|--------|-------------|----------------|-------|
| Відображення | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | Герой онбордингу |
| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | Заголовок сторінки |
| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | Заголовок секції |
| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | Заголовок картки, рядок уроку |
| Великий основний | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | Підказка уроку, інструкція |
| Основний | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | Стандартна проза |
| Підпис | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | Лічильник XP, метадані |
| Кнопка | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | Стандартний підпис кнопки |
| Серія | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | Число серії, на полум'ї |

### Принципи
- **800 — за замовчуванням**: Feather Bold використовує 800 у заголовках і кнопках. 700 виглядає слабко в цій системі.
- **Великий шрифт**: розміри заголовків на 25–40% більші, ніж у типових продуктових брендах — впевненість як ідентичність.
- **Закруглені літери**: кожен гліф має м'які закінчення; гострі засічки порушили б договір дружелюбності.

## 4. Стилі компонентів

### Кнопки

**Основна (совиний зелений)**
- Фон: `#58cc02`
- Текст: `#ffffff`
- Відступ: 14px 24px
- Радіус: 16px
- Рамка знизу: 4px solid `#58a700` (масивна тінь)
- Наведення: фон `#89e219`
- Активна: translate-y 4px, border-bottom 0 (кнопка «натискається»)
- Використання: «Продовжити», «Перевірити», основний CTA.

**Вторинна (біла з тінню знизу)**
- Фон: `#ffffff`
- Текст: `#777777`
- Рамка: 2px solid `#e5e5e5`
- Рамка знизу: 4px solid `#e5e5e5`
- Радіус: 16px
- Відступ: 14px 24px
- Наведення: текст `#3c3c3c`, рамка `#afafaf`

**Помаранчева серії**
- Фон: `#ff9600`
- Текст: `#ffffff`
- Рамка знизу: 4px solid `#cc7a00`
- Використання: ціль серії, «Почати серію»

**Помилка (кардинальний червоний)**
- Фон: `#ff4b4b`
- Текст: `#ffffff`
- Рамка знизу: 4px solid `#cc3b3b`
- Використання: зворотний зв'язок при неправильній відповіді.

### Картки / Плитки уроків
- Фон: `#ffffff`
- Рамка: 2px solid `#e5e5e5`
- Рамка знизу: 4px solid `#e5e5e5`
- Радіус: 16px
- Відступ: 16px
- Наведення: підйом 2px, тінь `0 4px 0 #d7d7d7`

### Вузол дерева навиків (бульбашка уроку)
- Розмір: 80×72px
- Фон: відтінок кольору навику (зелений для активного, сірий для заблокованого)
- Рамка знизу: 6px solid темніший варіант
- Радіус: 50% (круглий)
- Активний: пульсує 1.0 → 1.05 кожні 1.6s

### Поля введення
- Фон: `#ffffff`
- Рамка: 2px solid `#e5e5e5`
- Радіус: 12px
- Відступ: 12px 16px
- Фокус: рамка `#1cb0f6` (блакитний вугра), обведення `0 0 0 3px rgba(28, 176, 246, 0.2)`

### Смуга прогресу
- Доріжка: `#e5e5e5`
- Заповнення: `#58cc02` (або `#ff9600` для серії)
- Радіус: 9999px
- Висота: 16px
- Анімація заповнення: 320ms ease-out при збільшенні.

## 5. Відступи та макет

- **Базова одиниця**: 4px. Шкала: 4, 8, 12, 16, 24, 32, 48, 64.
- **Контейнер**: максимум 1080px, відступ 24px.
- **Стовпець дерева уроків**: ширина 320px; по центру на десктопі.

## 6. Анімація

- **Тривалість**: 180ms для натискання кнопки; 320ms для розблокування вузла навику; 1.6s для пульсації активного вузла.
- **Пом'якшення**: `cubic-bezier(0.34, 1.56, 0.64, 1)` (з зворотнім виходом, легке перевищення) для розблокувань.
- **Маскот**: Дуо кліпає кожні 4–6s, стрибає на ключових моментах серії (480ms ease-out пружина).

## 7. Обмеження використання

- Зберігайте насичений совиний зелений, масивні тіні знизу та закруглену геометрію уроків разом; самі по собі плоскі зелені кнопки не читаються як Duolingo.
- Залишайте великий жирний шрифт для уроку, серії та моментів прогресу, де продукт потребує заохочення або зворотного зв'язку.
- Використовуйте ігрову анімацію помірно, лише навколо змін стану прогресу, уникаючи загальної «пружинистої» анімації на кожному елементі керування.