Дизайн-система, вдохновлённая Duolingo

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

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

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

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

Язык форм дружелюбный: радиусы 16–20px у карточек, 12px у кнопок, 9999px у чипов и прогресс-баров. Иконография заливная, скруглённая и цветово закодирована по навыку — у каждой поверхности урока есть мгновенно узнаваемое сочетание цветов.

Ключевые характеристики:

• Зелёный цвет совы (#58cc02) как доминирующий цвет бренда, занимающий более 30% поверхности
• Массивная тень 4px снизу каждой кнопки (аффорданс «тактильного нажатия»)
• Сплошные границы 2–3px, никаких тонких линий
• Feather Bold (скруглённый дисплей) + Mona Sans (текст)
• Крупный уверенный текст — дисплейные размеры начинаются с 48px и растут
• Талисман-персонаж: сова Duo появляется при онбординге, ошибках, сериях
• Оранжевый серии (#ff9600) и розовый самоцвета (#ce82ff) как вторичные цвета бренда

2. Цветовая палитра и роли

Основные

• Зелёный совы (#58cc02): основной цвет бренда, основной CTA, правильный ответ.
• Тёмный зелёный совы (#58a700): цвет нажатия/тени для зелёных кнопок.
• Светлый зелёный совы (#89e219): наведение курсора, мягкие заливки.
• Бледный зелёный совы (#dbf8c5): мягкая поверхность, баннер успеха.

Вторичные акценты

• Оранжевый серии (#ff9600): счётчик серий, иконка огня, премиальная энергия.
• Тёмный оранжевый серии (#cc7a00): нажатый оранжевый.
• Розовый самоцвета (#ce82ff): валюта самоцветов, Super Duolingo.
• Синий угря (#1cb0f6): кнопка подсказки, информационная ссылка.
• Кардинальный красный (#ff4b4b): неправильный ответ, потеря жизни.
• Пчелиный жёлтый (#ffc800): профессиональный значок, достижение.

Поверхность

• Снег (#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

Иерархия

Принципы

• 800 — значение по умолчанию: Feather Bold использует насыщенность 800 для заголовков и кнопок. 700 выглядит слабо в этой системе.
• Крупный текст: размеры заголовков на 25–40% крупнее, чем у типичных продуктовых брендов — уверенность как идентичность.
• Скруглённые буквы: каждый глиф имеет мягкие окончания; острые засечки нарушили бы договор дружелюбности.

4. Стилизация компонентов

Кнопки

Основная (зелёный совы)

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

Вторичная (белая с нижней тенью)

• Фон: #ffffff
• Текст: #777777
• Граница: 2px solid #e5e5e5
• Border-bottom: 4px solid #e5e5e5
• Радиус: 16px
• Отступ: 14px 24px
• Наведение: текст #3c3c3c, граница #afafaf

Оранжевая серии

• Фон: #ff9600
• Текст: #ffffff
• Border-bottom: 4px solid #cc7a00
• Использование: цель серии, «Начать серию»

Ошибка (кардинальный красный)

• Фон: #ff4b4b
• Текст: #ffffff
• Border-bottom: 4px solid #cc3b3b
• Использование: обратная связь при неправильном ответе.

Карточки / Плитки уроков

• Фон: #ffffff
• Граница: 2px solid #e5e5e5
• Border-bottom: 4px solid #e5e5e5
• Радиус: 16px
• Отступ: 16px
• Наведение: подъём на 2px, тень 0 4px 0 #d7d7d7

Узел дерева навыков (Пузырь урока)

• Размер: 80×72px
• Фон: оттенок цвета навыка (зелёный для активного, серый для заблокированного)
• Border-bottom: 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 для пульсации активного узла.
• Easing: cubic-bezier(0.34, 1.56, 0.64, 1) (back-out, небольшой перелёт) для разблокировок.
• Талисман: Duo моргает каждые 4–6s, прыгает при достижении вехи серии (480ms ease-out пружина).

7. Руководство по использованию

• Сохраняйте высокую насыщенность зелёного цвета совы, массивные нижние тени и скруглённую геометрию уроков вместе; плоские зелёные кнопки сами по себе не создают ощущения Duolingo.
• Оставьте крупный жирный шрифт для уроков, серий и моментов прогресса, когда продукту нужна поддержка или обратная связь.
• Используйте игривое движение умеренно при изменениях состояния прогресса, избегая типичных прыгающих анимаций на каждом элементе управления.