Дизайн-системаЗемля Лоуполилес

Antara Web

Визуальный язык сайта наследует игру «Земля Лоуполилес»: пиксельный интерфейс поверх low-poly мира. Пиксельный шрифт — для ярлыков и заголовков, Nunito — для текста. Фиолетовый картон, оранжевая рамка «рабочей зоны», зелёные холмы и пастельное небо.

1. Картон, а не стекло

Жёсткие смещённые тени и рамки 3px вместо размытия и прозрачности. Кнопка «проваливается» при нажатии.

2. Скошенные панели

Ключевые блоки — слегка скошенные полигоны (.poly, .bubble), как пузырь задания и рабочая зона в игре.

3. Low-poly предметы

Иллюстрации — papercraft low-poly объекты и сцены на прозрачном/пастельном фоне. Никаких стоковых фото.

Подключение

<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="design-system/antara.css">   ← tokens + base + layout + components
<script src="design-system/antara.js"></script>         ← интерактив через data-атрибуты

Цвета tokens.css

Raw-палитра --c-* и семантические алиасы --color-*. В компонентах используйте алиасы.

Фиолетовый — интерфейс

--c-purple-900#2c1d49 · футер, глубина

--c-purple-800#423260 · тень картона

--c-purple-600#604689 · primary

--c-purple-500#7a5dab · hover

--c-purple-200#d9cdf0 · рамки полей

--c-purple-100#ede6f7 · чипы

--c-purple-50#f6f0ff · подсветка

Оранжевый — акцент

--c-orange-700#b25f14 · тень рамки

--c-orange-500#efa443 · accent

--c-orange-300#ffc26e · hover

--c-orange-100#ffe7c2

--c-orange-50#fff7e0 · тёплая подложка

Зелёный, служебные, небо

--c-green-900#3a6e1a

--c-green-500#7ec850 · success/трава

--c-green-100#e9f7d8

--c-red-500#e25555 · danger

--c-yellow-500#f4c430 · звёзды

--c-sky-top → bottom#fcd9c4 → #e9eef5

--c-ink#2b2340 · текст

--c-muted#7c7391 · подписи

--c-bg#f4eff9 · фон страницы

Типографика base.css

Заголовки по умолчанию — Nunito 800. Класс .pixel переключает на Press Start 2P (заглавные, line-height 1.6). Пиксельный шрифт — только для коротких строк: eyebrow, названия секций, бейджи, цифры.

h1.pixel

Курс на интеллект!

h2.pixel

Наши преимущества

.eyebrowОбучение онлайн

.pixel--2xl404

h1

Франшиза образовательной программы

h2

Преподаватели программы

h3

Скорость мысли

.lead

Серия развивающих онлайн-программ Antara для детей 5–17 лет.

body

Методика развития «гибких навыков»: внимательности, логики, чтения, памяти, восприятия, речи. Nunito 400/600/700/800.

.text-sm .text-muted

Согласно установленной статистике и точной метрике прогресса

<h2 class="pixel">Наши преимущества</h2>
<span class="eyebrow">Обучение онлайн</span>
<p class="lead">…</p>

Отступы, радиусы, тени

Шаг 4px: --sp-1…--sp-24. Радиусы: --r-xs 6, --r-sm 10, --r-md 14, --r-lg 20, --r-xl 28. Тени — жёсткие смещения, без размытия.

xs

sm

md

lg

xl

hard

hard-lg

accent

soft

poly

tab

Кнопки .btn

Primary Accent Ghost Soft Success

Small Default Large Pixel label С иконкой

Light (на тёмном) Accent

Все программы Назад Раскрыть полностью Смотреть видео

<a class="btn btn--accent btn--lg" href="#">Бесплатный урок</a>
<a class="link-arrow" href="#">Все программы</a>

Чипы, бейджи, вкладки

Для детейАктивныйОнлайнКниги-тренажёрыВ разработкеOutlinesmДля детей ×

8–17 лет4–6 летУспехЛогика +50%Земля Курсов

Пиксельный вариант .badge--pixel — только для ярлыков без цифр: в Press Start 2P «6» неотличима от «G». Числовые бейджи всегда набираются Nunito.

Задание 1Уровень 1Бесплатно

ЗемляЛоуполилес

Обучение онлайнДети 5–17 лет

ЗемляИсторий

<span class="chip chip--orange">Онлайн</span>
<span class="badge badge--tab">Уровень 1</span>
<div class="tabs" data-tabs>
  <button class="tab is-active" data-tab="speed">Скорость мысли</button> …
</div>
<div class="tab-panel" data-tab-panel="speed">…</div>

Панели .panel .frame .poly .bubble

.panel

Картонная панель: рамка 3px, жёсткая тень.

.panel--soft

Мягкая тень, без рамки — для лент и списков.

.panel--flat

Тонкая рамка, без тени — служебные блоки.

.panel--warm

Тёплая подложка — цитаты, CTA.

.panel--dark

Тёмная — акценты, подвал.

.panel--hover

Приподнимается при наведении.

.frame

Оранжевая рамка рабочей зоны игры.

123

.frame--purple

Фиолетовый вариант для форм.

.poly

Скошенная панель: filter → рамка → бумага. Вариант .poly--alt скошен зеркально, .poly--orange, .poly--dark.

Задание 1

.bubble

Пузырь речи с хвостиком слева (справа — .bubble--right). Бейдж-язычок позиционируется автоматически.

<div class="poly"><div class="poly__frame"><div class="poly__paper"> … </div></div></div>
<div class="bubble"><span class="badge badge--tab">Уровень 1</span>
  <div class="bubble__frame"><div class="bubble__paper"> … </div></div></div>
<div class="frame"><div class="frame__paper"> … </div><div class="frame__tab">…</div></div>

Карточки

8–17 лет

КурсОнлайн

Скорость мысли

Комплексное развитие навыков ребёнка.

Больше Попробовать

Для детей

Сколько нужно учиться soft skills

Ясность нашей позиции очевидна…

Илья Солов2 сентября

Мария

мама Иры (10 лет)

…сейчас Ира сама решает задачи. Моя дочь ходит в Antara с октября.

Раскрыть полностью

ПарижЯнварь 2021

Смотреть видео

Николай Гумилев

Преподаватель курса «Скорость мысли»

Образование: Бакалавр психологии, РРРУ

РУКФ

Скорость мысли

<article class="panel panel--hover course-card">
  <div class="card-media card-media--orange"><img src="…/maya-pyramid.png" alt=""><span class="badge card-media__badge">7–10 лет</span></div>
  <div class="card-body"> <h3>…</h3> <p class="card-body__text">…</p> <div class="card-actions">…</div> </div>
</article>   тонировки: --orange --green --sky --yellow --photo

Блоки контента

.feature

Иконка + заголовок + текст. Тонировки иконки: --purple, --green.

5 000выпускников во всём мире

79центров уже открыто

Стоимость обучения14 600 руб.€ 177.90за 8 занятий

Продолжительность6–9 месяцев (зависит от темпа)

“

Педагоги являются непосредственным лицом учебного заведения, уровень компетентности сотрудников определяет позиции школы на рынке.

Юлия Серых

Основатель центра Antara Academy

Бизнес-модель и пошаговое обучение партнёра;
Поиск и аттестация педагогов;
Проверенный учебный материал.

Формы

<div class="field"><label class="label" for="x">Электронная почта</label><input class="input" id="x" type="email"></div>
<select class="select">…</select>  <textarea class="textarea"></textarea>  <label class="check"><input type="checkbox"> …</label>
<form data-steps> <div data-step="1">… <button data-step-next></div> <div data-step="2" hidden>…</div> </form>

Навигация и списки

Antara Academy

12345

Шаг 2 из 3

Можно ли пройти пробное занятие?

Да. Первое занятие бесплатно.

Сколько занятий в неделю?

Два занятия по 60 минут.

University of OxfordLeiden University

Forbesvc.ru

Оверлеи

<button data-modal-open="teacher-modal">О преподавателе</button>
<dialog class="modal" id="teacher-modal"><div class="panel modal__panel"><button class="modal__close" data-modal-close>×</button> … </div></dialog>
<div class="cookie panel panel--soft" data-cookie> … <button data-cookie-accept>Всё понятно</button></div>

Иллюстрации

Сцены (Recraft, стиль bg.png игры) — assets/img/scenes/*.webp. Предметы курсов (Recraft, papercraft low-poly, прозрачный фон) — assets/img/objects/*.png. Библиотека предметов и персонажей из продукта Антара — assets/img/lowpoly/*.png. Промпты и скрипт генерации: scripts/recraft-gen.mjs.

Сцены

Предметы курсов

Персонажи и предметы

SVG интерфейса

ui/logo-antara-mark

ui/logo-academy-mark

ui/pin

game/teacher (робот)

game/task (пузырь)

game/workspace

game/sound

game/icons/*

JS-поведение antara.js

Атрибут	Что делает
`data-toggle="lang"`	Открывает/закрывает меню языка (`.lang.is-open`), закрытие по клику вне и Esc.
`data-burger`	Мобильное меню: `.site-header.is-open`.
`data-tabs` / `data-tab` / `data-tab-panel`	Вкладки с клавиатурной навигацией; открывает вкладку по `#hash`.
`data-filter-group="#scope"` / `data-filter="tag"` / `data-tags="a b"`	Фильтр карточек по тегам, счётчик `data-filter-count`, строка активного фильтра `data-filter-active`, сброс `data-filter-clear`, пресет `?tag=`.
`data-modal-open="id"` / `data-modal-close`	Нативный `<dialog>`, закрытие по подложке и Esc.
`data-cookie` / `data-cookie-accept`	Cookie-баннер, запоминание в localStorage.
`data-carousel`	Скролл-снап карусель, точки строятся автоматически, `data-carousel-prev/next`.
`data-more="g"` / `data-more-item="g"`	«Показать ещё» — раскрывает элементы с `.is-hidden`.
`data-steps` / `data-step` / `data-step-next\|prev`	Пошаговая форма, обновляет точки и подпись `data-step-label`.
`data-accordion="single"`	Группа `<details>`: открыт только один.
`form[data-demo]`	Не отправляет форму, показывает `[data-demo-success]`. Уберите в продакшене.

Antara Web

1. Картон, а не стекло

2. Скошенные панели

3. Low-poly предметы

Подключение

Цвета tokens.css

Фиолетовый — интерфейс

Оранжевый — акцент

Зелёный, служебные, небо

Типографика base.css

Курс на интеллект!

Наши преимущества

Франшиза образовательной программы

Преподаватели программы

Скорость мысли

Отступы, радиусы, тени

Кнопки .btn

Чипы, бейджи, вкладки

Панели .panel .frame .poly .bubble

.panel

.panel--soft

.panel--flat

.panel--warm

.panel--dark

.panel--hover

.frame

.frame--purple

.poly

.bubble

Карточки

Скорость мысли

Сколько нужно учиться soft skills

Николай Гумилев

Блоки контента

.feature

Формы

Запись на пробный урок

Навигация и списки

Оверлеи

Иллюстрации

Сцены

Предметы курсов

Персонажи и предметы

SVG интерфейса

JS-поведение antara.js