Pixel Tanks · Design System · Extended Inventory

Полный инвентарь
компонентов и экранов

Живой справочник дизайн-системы в реальном Next / Tailwind окружении: токены, типографика, компоненты и эффекты из hero-арта. Живые примеры реагируют на переключатели ниже. Упаковка — Telegram Mini App, поэтому всё адаптивно от 390px и без десктоп-онли хрома. Мишень визуальной регрессии.

Тема акцента
Интенсивность (data-intensity)

01 — Палитра

Палитра

Поверхности

bg#080c08
surface#101711
panel#18221a
panel-raised#212f24
border#2c3f30
border-strong#3f5a41
muted#33452f

Текст

text#e9f5e6Контраст ~15:1 AAA
text-muted#a2bb9dКонтраст ~7.5:1 AA
text-dim#728a70Контраст ~3.6:1

Бренд / статус

primary#ffc21fдействие · золото
accent#48ff00фокус · выбор · свой (тема через data-faction)
enemy#c900ffвраг · маджента
danger#ff4242поражение · удаление · ошибки
warning#ffa900предупреждение
success#48ff00= accent, алиас (D1)

02 — Типографика

Типографика

--text-displayclamp(48px, 7vw, 96px)

ПИКСЕЛЬ ТАНКИ

--text-h140px

Заголовок экрана

--text-h228px

Заголовок секции

--text-hud-xl40px

1280

--text-hud20px

УГОЛ 45°

--text-button16px

ОГОНЬ

--text-body16px

Основной текст интерфейса — читается часами.

--text-caption13px

Мелкая подпись и вторичные данные.

--text-label11px

МЕТКА ПОЛЯ

03 — Компоненты

Компоненты

Button

primary
accent
ghost
danger
outline

Panel

Приподнятая панель

Фон под панелями держит спокойный тёмный тон — неон живёт только в акцентах.

Select

закрыт
Сложность
выбран
Сложность
focus
Сложность
placeholder
Сложность
disabled
Сложность
открыт (одна опция disabled)
Сложность
  • Лёгкая
  • Обычная
  • Тяжёлая

Dialog

Победа

Прямое попадание. Враг повержен — можно взять реванш или вернуться в меню.

04 — Тема

Тема

Ось тем — фракция. Переключатель в шапке страницы меняет data-faction на корневой обёртке витрины — компоненты читают семантические --accent / --glow и переключаются без условных классов в разметке.

Попробуй прямо сейчас: переключи «Тема акцента» / «Интенсивность» в шапке — вся витрина ниже реагирует.

05 — Решения

Нестыковки решены явно

D1алиас
success = accent
#48FF00 намеренно тот же неон. success — семантический алиас accent (успех = «свой» зелёный), НЕ отдельный оттенок. Токен --color-success оставлен как ссылка для читаемости кода.
D2введён
--glow-danger именован
Раньше glow поражения инлайнился. Теперь это именованный токен в наборе glow-accent/primary/enemy/danger. Используется для defeat, ошибок и удаления.
D3правило
text-dim не на мелком
text-dim (3.6:1) не проходит AA на мелком. Правило: текст <18px — минимум text-muted (7.5:1). text-dim только ≥18px bold / чистый декор.
D4унифиц.
ink-пары показаны
primary-ink / accent-ink / enemy-ink / danger-ink — это текст поверх заливки. Показаны как контраст-подписи в бренд-палитре (§01); отдельными свотчами не выносим (они не фон).
D5удалён
только --radius-none
Система «острые углы». --radius-sm почти не используется — ни один компонент shared/ui не задаёт его напрямую. Остаётся единственный рабочий --radius-none: 0.
D6правило
accent: тема vs фикс
Фиксированный accent-base (всегда зелёный): номера секций, заголовки, «свой игрок». Тематический --accent (следует data-faction): все интерактивные компоненты, фокус, выбор, рамки активного.

06 — Эффект-токены

Glow · edge · focus · radius

--glow-accentфокус · выбор · свой
--glow-primaryдействие · золото
--glow-enemyвраг · маджента
--glow-dangerпоражение · удаление
ПИКСЕЛЬ-ФАСКА
--edge-pixel0 3px 0 #05140a — «объём» без blur
:focus-visible
--ring-focusдвойной ринг, следует --accent
--radius-none (0px)Система «острые углы» (D5)

07 — Иконки

Пиксельный набор · сетка 16×16

SVG на сетке 16×16, штрих 2px, currentColor — красятся любым токеном. Ниже стандартный размер 24px.

Правило: в продукте нет эмодзи и юникод-символов в роли иконок — только SVG из этого набора (currentColor, тема-aware через --accent). Это линтуемо (no-emoji-as-icon).

play
pause
mute
sound
share
replay
arrow-l
arrow-r
arrow-u
arrow-d
target
settings
fire
star
skull
check
close
clock
warning
edit
info
wind
lock
wpn-фугас
wpn-мощный
wpn-кластер
wpn-роющий
eye
eye-off

08 — Новые компоненты

Инвентарь · все состояния

Text Input
Неверный формат email
Segmented Control
Период
Сложность
Перенос в узком контейнере
Avatar / бейдж фракции
тема через
data-faction
FactionBadge
?
?
Pip-ряд
Снаряды
Ходы
Ветер 10×10
Компактно 8×8
HP-bar · порог цвета success→warning→danger
100 — полный100/100
72 — норма72/100
38 — риск38/100
12 — критично12/100
Александр Неудержимый Командор Резервной Эскадрильи64/100
HP-bar · inline · density=comfortable (канон)
Rex Commander
72/100
Terminator
38/100
HP-bar · inline · density=compact (тесный ряд HUD)
Rex Commander
72/100
Terminator
38/100
HP-bar · вспышка попадания (#549)
Rex Commander — задет72/100
Terminator — задет38/100
Weapon Selector
Фугас×12
Weapon Selector · пусто (×0)
Фугас×0
Weapon Selector · compact (мобильная палуба, #451)
Фугас×12
Weapon Selector · compact · пусто (×0)
Фугас×0
Chat-bubble бота (enemy)
Терминатор

Твой угол смешон, человек. Считай ветер — или считай обломки.

Toggle · вкл / выкл
role="switch", тема через --accent, glow в состоянии «вкл»; ниже — срезы disabled (вкл/выкл).
Toast / хинт (aria-live)
Ссылка на реплей скопирована
Синхронизация профиля…
Патроны кончились — остался только манёвр. Ход перейдёт сопернику.
ShareButton
idle (живая)
состояние: copied

Ссылка скопирована в буфер обмена

состояние: unavailable

Не удалось поделиться — скопируйте ссылку из адресной строки

09 — Состояния

Кнопки · данные · формы

Button — доп. состояния
hover/active — в базовых вариантах (§03). Здесь: фокус-ринг (--ring-focus), загрузка-спиннер, disabled.
Форма — ошибка сабмита (баннер)
Loading — скелетон

Боёв пока нет

Сыграй первый матч — история появится здесь.

Ошибка данных
defaultЗагрузка
size 32
Загрузка
кастомная меткаСинхронизация профиля

10 — Игровые контролы

Тач-рогатка · плеер реплея

Player-controls (тач)
Угол 47°Сила 064
Плеер реплея
РЕПЛЕЙ · ход 5/12

11 — Экраны

Поток · все брейкпоинты

Каждый экран — резиновый layout в кадрах 390 · Mobile / 768 · Планшет / 1280 · Desktop / 1920 · Wide. Планшет — первоклассная цель: одноколоночный мобайл раскрывается в 2 колонки. Wide = десктоп с max-width, контент по центру.

Логин / Регистрация

email+пароль, без Google, выбор фракции · 1 кол → 2 кол (арт+форма) на планшете+
Mobile · 390
Артиллерийская дуэль

Pixel Tanks

Фракция
ЗелёныеСвои · неон
ПурпурныеВраг · маджента
Забыли пароль?Только email · без соцсетей
Планшет · 768
Артиллерийская дуэль

Pixel Tanks

Угол, сила, ветер — три числа решают бой. Пять снарядов на танк, четыре хода на манёвр, разрушаемый рельеф.

Фракция
ЗелёныеСвои · неон
ПурпурныеВраг · маджента
Забыли пароль?Только email · без соцсетей
Desktop · 1280
Артиллерийская дуэль

Pixel Tanks

Угол, сила, ветер — три числа решают бой. Пять снарядов на танк, четыре хода на манёвр, разрушаемый рельеф.

Бой дня · единый seed для всех
Фракция
ЗелёныеСвои · неон
ПурпурныеВраг · маджента
Забыли пароль?Только email · без соцсетей
Wide · 1920
Артиллерийская дуэль

Pixel Tanks

Угол, сила, ветер — три числа решают бой. Пять снарядов на танк, четыре хода на манёвр, разрушаемый рельеф.

Бой дня · единый seed для всех
Фракция
ЗелёныеСвои · неон
ПурпурныеВраг · маджента
Забыли пароль?Только email · без соцсетей

Профиль

аватар-фракция, статистика, история боёв + реплеи · стек → сайдбар+сетка
Mobile · 390
Rex CommanderВ строю с 12.03.2026 · фракция «Зелёные»
Винрейт64%82 победы из 128
Точность41%210 попаданий / 512
Лучший счёт87остаток HP в победе
Стрик5боёв дня подряд
История боёв128 боёв · реплей у каждого
Бой дняПобеда
27.07 · HP 62 · Терминатор
Быстрый бойПобеда
26.07 · HP 18 · Стрелок
Планшет · 768
Rex CommanderВ строю с 12.03.2026 · фракция «Зелёные»
Винрейт64%82 победы из 128
Точность41%210 попаданий / 512
Лучший счёт87остаток HP в победе
Стрик5боёв дня подряд
История боёв128 боёв · реплей у каждого
27.07Бой дняПобедаHP 62Терминатор
26.07Быстрый бойПобедаHP 18Стрелок
26.07Бой дняПоражениеHP 0Терминатор
25.07Быстрый бойПобедаHP 87Новобранец
Desktop · 1280
Rex CommanderВ строю с 12.03.2026 · фракция «Зелёные»
Винрейт64%82 победы из 128
Точность41%210 попаданий / 512
Лучший счёт87остаток HP в победе
Стрик5боёв дня подряд
История боёв128 боёв · реплей у каждого
27.07Бой дняПобедаHP 62Терминатор
26.07Быстрый бойПобедаHP 18Стрелок
26.07Бой дняПоражениеHP 0Терминатор
25.07Быстрый бойПобедаHP 87Новобранец
24.07Бой дняПоражениеHP 0Стрелок
Wide · 1920
Rex CommanderВ строю с 12.03.2026 · фракция «Зелёные»
Винрейт64%82 победы из 128
Точность41%210 попаданий / 512
Лучший счёт87остаток HP в победе
Стрик5боёв дня подряд
История боёв128 боёв · реплей у каждого
27.07Бой дняПобедаHP 62Терминатор
26.07Быстрый бойПобедаHP 18Стрелок
26.07Бой дняПоражениеHP 0Терминатор
25.07Быстрый бойПобедаHP 87Новобранец
24.07Бой дняПоражениеHP 0Стрелок

Бой дня

вызов + результат/сравнение + лидерборд дня, табы День/Всё время
Mobile · 390
Бой дня27 июля
Биом дня · закат, буря
СложностьТерминатор
Ветер0.006
РельефОбщий
Стрик боёв дня5
Сегодня сыграно · результат засчитан
Лидерборд
1
Iron MaidenHP 94
2
Steel FoxHP 88
3
Rex CommanderHP 62
Планшет · 768
Твой результат62
3 место из 128До топа дня — 32 HP · стрик +1
Бой дня27 июля
Биом дня · закат, буря
СложностьТерминатор
Ветер0.006
РельефОбщий
Стрик боёв дня5
Сегодня сыграно · результат засчитан
Лидерборд
1
Iron MaidenHP 94
2
Steel FoxHP 88
3
Rex CommanderHP 62
4
Pixel AnnaHP 51
5
Bot KillerHP 37
Desktop · 1280
Твой результат62
3 место из 128До топа дня — 32 HP · стрик +1
Бой дня27 июля
Биом дня · закат, буря
СложностьТерминатор
Ветер0.006
РельефОбщий
Стрик боёв дня5
Сегодня сыграно · результат засчитан
Лидерборд
1
Iron MaidenHP 94
2
Steel FoxHP 88
3
Rex CommanderHP 62
4
Pixel AnnaHP 51
5
Bot KillerHP 37
Wide · 1920
Твой результат62
3 место из 128До топа дня — 32 HP · стрик +1
Бой дня27 июля
Биом дня · закат, буря
СложностьТерминатор
Ветер0.006
РельефОбщий
Стрик боёв дня5
Сегодня сыграно · результат засчитан
Лидерборд
1
Iron MaidenHP 94
2
Steel FoxHP 88
3
Rex CommanderHP 62
4
Pixel AnnaHP 51
5
Bot KillerHP 37

Реплей / Поделиться

плеер + карточка шеринга
Mobile · 390
Реплей · ход 5/12
Угол47°Сила064Ветер0.006read-only
Rex Commander62/100
Terminator0/100
ИтогПобеда
Дата27.07.2026
СложностьТерминатор
Карточка шеринга
Победа · HP 62
Планшет · 768
Реплей · ход 5/12
Угол47°Сила064Ветер0.006read-only
Rex Commander62/100
Terminator0/100
ИтогПобеда
Дата27.07.2026
СложностьТерминатор
Карточка шеринга
Победа · HP 62

Ссылка открывается без регистрации: бой = seed + размер + ходы.

Desktop · 1280
Реплей · ход 5/12
Угол47°Сила064Ветер0.006read-only
Rex Commander62/100
Terminator0/100
ИтогПобеда
Дата27.07.2026
СложностьТерминатор
Карточка шеринга
Победа · HP 62

Ссылка открывается без регистрации: бой = seed + размер + ходы.

Wide · 1920
Реплей · ход 5/12
Угол47°Сила064Ветер0.006read-only
Rex Commander62/100
Terminator0/100
ИтогПобеда
Дата27.07.2026
СложностьТерминатор
Карточка шеринга
Победа · HP 62

Ссылка открывается без регистрации: бой = seed + размер + ходы.

Онбординг «Как играть»

3 шага, пиктограммы, пагинация
Mobile · 390
Шаг 2 из 3Сила

Длина оттяжки — мощность выстрела. Пунктирный вектор и цифры у пальца показывают, что уйдёт в полёт.

Цель боя — снять врагу HP до нуля. Снаряды кончились (5 на танк) — побеждает больший остаток HP.

Планшет · 768
Шаг 2 из 3Сила

Длина оттяжки — мощность выстрела. Пунктирный вектор и цифры у пальца показывают, что уйдёт в полёт.

Прицел
Сила
Ветер

Цель боя — снять врагу HP до нуля. Снаряды кончились (5 на танк) — побеждает больший остаток HP.

Desktop · 1280
Шаг 2 из 3Сила

Длина оттяжки — мощность выстрела. Пунктирный вектор и цифры у пальца показывают, что уйдёт в полёт.

Прицел
Сила
Ветер

Цель боя — снять врагу HP до нуля. Снаряды кончились (5 на танк) — побеждает больший остаток HP.

Wide · 1920
Шаг 2 из 3Сила

Длина оттяжки — мощность выстрела. Пунктирный вектор и цифры у пальца показывают, что уйдёт в полёт.

Прицел
Сила
Ветер

Цель боя — снять врагу HP до нуля. Снаряды кончились (5 на танк) — побеждает больший остаток HP.

Игровой экран (mobile-first)

Canvas + HUD + тач-рогатка; десктоп — HUD-бар сверху
Mobile · 390
Rex Commander
72/100
Terminator
38/100
ТВОЙ ХОД
Угол
47°
Сила
64
Ветер
Снаряды
Ходы
Снаряд×3

Тяни по арене — отпусти, чтобы выстрелить

Планшет · 768
Rex Commander72/100
Terminator38/100
ТВОЙ ХОД
Твои числа заморожены до конца хода соперника
Угол47°
Сила64
Ветер
Снаряды
Ходы
Снаряд×3
Desktop · 1280
Rex Commander72/100
Terminator38/100
ТВОЙ ХОД
Твои числа заморожены до конца хода соперника
Угол47°
Сила64
Ветер
Снаряды
Ходы
Снаряд×3
← → угол↑ ↓ силаCtrl + ← → манёврSpace выстрел
Wide · 1920
Rex Commander72/100
Terminator38/100
ТВОЙ ХОД
Твои числа заморожены до конца хода соперника
Угол47°
Сила64
Ветер
Снаряды
Ходы
Снаряд×3
← → угол↑ ↓ силаCtrl + ← → манёврSpace выстрел
Состояния (мобильный эталон 390)
Свой ход
Rex Commander
72/100
Terminator
38/100
ТВОЙ ХОД
Угол
47°
Сила
64
Ветер
Снаряды
Ходы
Снаряд×3

Тяни по арене — отпусти, чтобы выстрелить

Ход бота
Terminator

Ветер сегодня твой враг, новобранец.

Rex Commander
72/100
Terminator
38/100
ХОД СОПЕРНИКА
Угол
47°
Сила
64
Ветер
Снаряды
Ходы

Твои числа заморожены до конца хода соперника

Снаряд×3

Тяни по арене — отпусти, чтобы выстрелить

Прицеливание
Rex Commander
72/100
Terminator
38/100
ТВОЙ ХОД
Угол
47°
Сила
64
Ветер
Снаряды
Ходы
Снаряд×3

Тяни по арене — отпусти, чтобы выстрелить

Пустой боезапас
Rex Commander
72/100
Terminator
38/100
ТВОЙ ХОД
Угол
47°
Сила
64
Ветер
Снаряды
Ходы
Патроны кончились — остался только манёвр. Ход перейдёт сопернику.
Снаряд×0

Тяни по арене — отпусти, чтобы выстрелить

Спокойный HUD
Rex Commander
72/100
Terminator
38/100
ТВОЙ ХОД
Угол
47°
Сила
64
Ветер
Снаряды
Ходы
Снаряд×3

Тяни по арене — отпусти, чтобы выстрелить

Бейдж заморозки — планшет/десктоп, ход бота
Планшет · 768 (ход бота)
Terminator

Ветер сегодня твой враг, новобранец.

Rex Commander72/100
Terminator38/100
ХОД СОПЕРНИКА
Твои числа заморожены до конца хода соперника
Угол47°
Сила64
Ветер
Снаряды
Ходы
Снаряд×3
Desktop · 1280 (ход бота)
Terminator

Ветер сегодня твой враг, новобранец.

Rex Commander72/100
Terminator38/100
ХОД СОПЕРНИКА
Твои числа заморожены до конца хода соперника
Угол47°
Сила64
Ветер
Снаряды
Ходы
Снаряд×3
← → угол↑ ↓ силаCtrl + ← → манёврSpace выстрел

Utility · загрузка / 404 / ошибка

переиспользуемые заглушки
Mobile · 390
Загрузка
Загрузка бояЗагрузка боя…
404 · не найдено
404Снаряд улетел за картуТакой страницы нет.
Ошибка
Планшет · 768
Загрузка
Загрузка бояЗагрузка боя…
404 · не найдено
404

Снаряд улетел за карту

Такой страницы нет: проверь ссылку или вернись в меню.

Ошибка
Desktop · 1280
Загрузка
Загрузка бояЗагрузка боя…
404 · не найдено
404

Снаряд улетел за карту

Такой страницы нет: проверь ссылку или вернись в меню.

Ошибка
Wide · 1920
Загрузка
Загрузка бояЗагрузка боя…
404 · не найдено
404

Снаряд улетел за карту

Такой страницы нет: проверь ссылку или вернись в меню.

Ошибка

12 — Новый экран

Пауза / Настройки боя

Пауза

Звук

Отображение

Язык

Сложность

Витрина компонентов

13 — Game Over

Конец боя — все исходы

Победа

Победа!

Урон
90
Точность
83 %
Выстрелов
6
Манёвров
3 / 4
В меню

Поражение

Поражение

Урон
70
Точность
43 %
Выстрелов
7
Манёвров
2 / 4
В меню

Ничья

Ничья

Урон
80
Точность
60 %
Выстрелов
5
Манёвров
4 / 4
В меню

14 — Дисплейный шрифт

Кириллица заголовков — решение D7

D7 · переголосован → DotGothic16. Pixelify Sans хорош латиницей, но кириллица собрана неровно — на русских заголовках буквы «из разных шрифтов». После bake-off выбран DotGothic16 (OFL): единый вес и ритм латиницы и кириллицы, аркадный характер. JetBrains Mono (UI/HUD) не тронут — его кириллица ровная.

Было · Pixelify Sansнеровная кириллица · шрифт не вендорится
ПобедаКомандирИнвентарьЦелься
Стало · DotGothic16целостная кириллица
ПобедаКомандирИнвентарьЦелься

15 — Небо боя

День · закат · ночь — пресет от сида

День · day
Закат · sunset
Ночь · night

16 — Скины танков

Геометрии × палитры — выбор косметики

Геометрии · 2

Классика · classic
Тяжёлый · heavy

Палитры · 3

Изумруд
Багрянец
Янтарь

Все скины · 6

Косметика: выбор не меняет HP, скорость или разброс — только вид (см. tank-skin-parity.test.ts). Скин соперника выбирается детерминированно от сида боя.

Классика
Изумруд
Классика
Багрянец
Классика
Янтарь
Тяжёлый
Изумруд
Тяжёлый
Багрянец
Тяжёлый
Янтарь

Катки: движение · покой

Вращение катков (issue #496) — от пройденного пути, не от времени: на паузе колёса не «доезжают» сами. prefers-reduced-motion останавливает и то, и другое.

Классика
В движении
На месте
Тяжёлый
В движении
На месте

17 — Оружие боя

Снаряды и взрывы четырёх типов — числа WEAPON_SPECS

Механика и визуал заданы таблицей WEAPON_SPECS — одна формула «растущий круг → кратер», отличия только в числах и палитре. Числа фугаса заморожены снапшот-тестом.

Фугас
Базовый взрыв — замороженный дефолт движка.
Мощный заряд
Крупнее и горячее, ударная волна по фронту.
Кластер
Три последовательных очага — рваная канава.
Роющий
Узкая глубокая воронка, выброс земли.

18 — Погода боя

Ясно · дождь · снег · буря — пресет от сида

Ясно · clear
Дождь · rain
Снег · snow
Буря · sandstorm

19 — Ветер в арене

Пылинки приземного слоя и ночная кайма — носитель ветра

Штиль · wind 0.000
Слабый ветер · wind 0.004
Сильный ветер · wind 0.010
Ночь — кайма песка · wind 0.010

20 — Флажок ветра

Вымпел на мачте своего танка — направление и сила ветра

Сила и направление

Штиль · wind 0.0000
Ветер влево · максимум · wind -0.0100
Слабый ветер вправо · wind 0.0033
Ветер вправо · максимум · wind 0.0100

Читаемость на пресетах неба

День
Закат
Ночь