mobile firstno hover biastouch-readyui surface
TASKS / UI ARMORY

INTERFACE
SURFACE

Эта страница показывает основные UI-паттерны в том же мрачном неоновом стиле, но с приоритетом на мобильный сценарий: крупные touch-targets, явные состояния, никакой зависимости от hover и полноценные игровые HUD-виджеты.

Touch Targets
44minimum tap size
Interaction
pressfocuserrorsuccess
buttons

core button states

Все кнопки собраны в одном месте: primary, secondary, tertiary, icon, floating и toggle. Hover показан как отдельная эмулированная карточка, а не как desktop-only эффект.

primary
state matrix
secondary / tertiary
touch-first
toggle
on
floating / icon
mobile action
icon
floating
inputs

touch-safe inputs

Здесь собраны основные формы: текст, пароль, число, поиск, select, checkbox, radio, switch, slider, stepper и color picker. На мобильном они должны быть явно читаемыми и комфортными для пальца.

text / password / numeric / search
focus / error / filled / disabled
select / checkbox / radio / switch / slider / stepper / color
form controls
radio buttons
ranger
toggle switch
enabled
slider / stepper
72
3
color picker
Customization-friendly accent swatch for skins, labels, or player colors.
current state
checkboxchecked
radioranger
selectlegendary
display

typography, icons, avatars, badges, progress

Этот блок показывает визуальную систему: заголовки, подписи, иконки, аватары, бейджи, чипы, прогресс и рейтинг. Всё собрано так, чтобы можно было быстро подхватить в любом экране приложения.

text styles
H1 SYSTEM
H2 INTERFACE
H3 HUD LABEL
H4 section title
H5 compact title
H6 micro label
Body text stays readable on mobile, with caption and label styles available for dense game screens and settings menus.
labelcaptionerrorbadge
icons, avatars, chips
outline
filled
TB
LY
HC
notificationzonereadyblocked
Progress bar68%
XP bar46%
HP bar82%
Mana bar54
74%
circular
rating / stars
game ui

hud components

Для игр важны не только кнопки. Здесь собран типичный battle HUD: полосы здоровья и маны, валюта, таймер, счётчики, миникарта, способности, инвентарь и лут-попапы.

soft currencyhard currencytimercombo
health78%
mana41%
experience63%
soft currency
147
hard currency
18
02:14
timer
12,640
score
x14
combo
ability buttons
mini-map
inventory slots
1
2
3
4
5
loot popup
+18 gold
rare shard
quest complete
HUD notes

HUD-элементы рассчитаны на быстрый glance: крупные цифры, короткие подписи, большие кнопки и цветовые различия только там, где это действительно помогает.

Для мобильной версии важнее уверенный тап и явная обратная связь, чем сложные hover-слои или мелкие декоративные детали.

overlays

modals, dialogs, bottom sheets, tooltips, popovers and toasts

Ниже показаны основные overlay-паттерны. Блокирующие слои затемняют фон, а не блокирующие (tooltip / toast / popover) живут поверх без захвата внимания.

blockingappearing
toast
loot acquired
Non-blocking notification with auto-dismiss feel.
toast fading
disappearing
tooltip
critical strike
Shows contextual data without blocking interaction.
popover
Attack range previewTargeting modeQuick actions
modal window
apply changes
Blocking modal with confirm / cancel buttons, ready for save actions, destructive prompts or major configuration steps.
dialog
confirm discard
Dialogs should stay readable and decisive on small screens.
bottom sheet
lists

vertical lists, grids, carousels, accordions, infinite feeds and pull-to-refresh

Контентные паттерны тоже важны: коллекции, каталоги, карусели, аккордеоны и длинные ленты должны оставаться понятными на узком экране.

vertical list
First blood
win one combat round
100 XP
Economist
reach 50 gold in a run
40 XP
Synergy
activate 3 alliances
80 XP
grid catalog
weapon
armor
relic
consumable
carousel
card 1

legendary drop

Shared carousel from the `@cyber/ui` package. Drag horizontally or use the arrows.

slide01
card 2

battle pass

Shared carousel from the `@cyber/ui` package. Drag horizontally or use the arrows.

slide02
card 3

daily quest

Shared carousel from the `@cyber/ui` package. Drag horizontally or use the arrows.

slide03
card 4

team comp

Shared carousel from the `@cyber/ui` package. Drag horizontally or use the arrows.

slide04
card 5

rank reward

Shared carousel from the `@cyber/ui` package. Drag horizontally or use the arrows.

slide05
accordion / infinite / pull-to-refresh
Inventory rules

Expandable content is great for guidelines, filters, or small settings blocks.

Match history

Secondary sections stay collapsed until the user asks for them.

infinite scroll
loading more
entry 01scroll
entry 02scroll
entry 03scroll
pull-to-refresh
drag down to refresh
Mobile-native interaction hint.
Built for touch-first game UIs, with a neon-black visual language and explicit state coverage for every core control.
TASKS
ARENAHOMEHISTORY