Duolingo

Игривый талисман класса на белой бумаге

Интерфейс Duolingo оформлен как детская книжка с картинками: белый бумажный холст, пухлый округлый шрифт и один насыщенный зеленый цвет, который сразу же воспринимается как «правильный ответ». Основной текст выполнен в спокойных средне-серых тонах, чтобы зеленый цвет и его акцентный синий могли выполнять всю эмоциональную работу — зеленый для отображения прогресса и заголовков, синий для интерактивных ссылок и дополнительных действий. Компоненты имеют форму таблеток или массивных закругленных углов с толстыми черными или цветными рамками, благодаря чему каждая кнопка выглядит скорее как наклейка, приклеенная к странице, чем как плоский элемент управления пользовательского интерфейса.

Разделы занимают всю ширину страницы и располагаются вертикально в один столбец, каждый высотой примерно 800 пикселей. Максимальная ширина контента примерно 1 пикселя по центру. Текст слева и иллюстрация справа чередуются, обеспечивая достаточное вертикальное пространство (80 пикселей между разделами). Отсутствуют карточки-сетки или многоколоночные макеты — каждый раздел представляет собой один текстовый блок в паре с одной иллюстрацией. Навигация — минималистичная верхняя панель с логотипом и селектором языка, которая появляется в виде фиксированной панели между разделами. Нижний колонтитул — зеленая полоса, занимающая всю ширину страницы. Ритм — редакционный: заголовок, абзац, призыв к действию, иллюстрация, повтор.

Иллюстративный язык книжного оформления: плоские двухмерные персонажи-талисманы (сова Дуэт и различные человеческие фигуры) с округлыми геометрическими формами, жирными черными контурами и дополнительной палитрой розового, фиолетового, желтого, оранжевого и синего цветов, которая никогда не появляется в самом интерфейсе. Иллюстрации расположены рядом с текстом в правой половине каждого раздела на чисто белом фоне, без контейнеров или фонов. Фотографии отсутствуют — визуальным контентом являются персонажи. В иконографии используются толстые контурные линии, соответствующие стилю талисманов. Плотность изображений умеренная: в каждом разделе есть одна большая иллюстрация персонажа, остальная часть страницы отведена под типографику и пустое пространство.

Игривый Минимализм

https://duolingo.com

Палитра

Бренд

Eager Green #58cc02 — Зеленый цвет используется для выделения ссылок, тегов и коротких фраз. Не следует выделять его как основной цвет призыва к действию.
Storybook Green #d7ffb8 — Мягкое выделение светлых поверхностей, едва заметные фоновые оттенки за метками навигации в нижнем колонтитуле.

Нейтральные

Spark Blue #1cb0f6 — Синий цвет используется для выделения ссылок, тегов и коротких фраз. Не следует выделять его как основной цвет призыва к действию.
Fresh Leaf #a5ed6e — Зеленый цвет используется для выделения ссылок, тегов и коротких фраз. Не следует выделять его как основной цвет призыва к действию.
Night Ink #000437 — Фиолетовым цветом выделены ссылки, теги и короткие выделенные фразы.
Paper White #ffffff — Холст страницы, поверхности картона, текст кнопок на зеленом/темном фоне.
Charcoal #4b4b4b — Заголовки-«герои» и основной текст — универсальный тёмный текст, позволяющий цветным заголовкам выделяться.
Pencil Gray #777777 — Основные абзацы текста выделены невыразительными буквами, второстепенный описательный текст отступает на второй план, так что цветные элементы выступают вперед.

Типографика

от 13 до 64px · 7 ступеней

feather — замена: Inter · начертания 700 · Заголовки разделов, например, «бесплатно. весело. эффективно» и «тест по английскому языку Duolingo», отображаются с помощью специального закругленного шрифта, придающего бренду его игрушечный, дружелюбный, похожий на талисман стиль. Замените на «Feather Bold» или «Nunito Black» соответствующей толщины. Межбуквенный интервал: -0.0200em
duolingo-sans — замена: Inter · начертания 500 · Основные абзацы и навигационные ссылки на 17px/500 — геометрический шрифт без засечек, который остается читаемым, позволяя шрифту с толщиной линии 700 выделять важные моменты. Замените на 'DIN Next', 'Inter' или 'Nunito Sans'.
duolingo-sans — замена: Inter · начертания 700 · Все значения weight-700 используются: заглавные буквы в метках навигации в 15px (ls 0.0530em), подзаголовки в 19px и 32px, выделение ссылок в 13px. Тот же шрифт, что и основной текст — визуальное различие заключается в толщине, а не в изменении шрифта. Межбуквенный интервал: 0.0530em для заглавных букв в метках навигации.

Интервалы и форма

Назначение	Значение
Плотность	плотная
Базовый шаг	12px
Радиус кнопок	12px
Радиус карточек	12px
Тени	нет — границы вместо теней
Между секциями	80-120px
Ширина страницы	1200px

ИИ соберёт ваш сайт в стиле Duolingo и наполнит его

Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
Перенесёт контент со старого сайта — достаточно указать адрес.
Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.

Создать сайт в этом стиле

Duolingo

Палитра

Типографика

Интервалы и форма

ИИ соберёт ваш сайт в стиле Duolingo и наполнит его

Похожие стили