Skip to system
10 / Contracts

Rules that keep the arcade coherent

Accessibility, focus, target size, motion and content rules that components cannot quietly break.

Accessibility floor

Contract playground

Toggle the three non-negotiable interaction rules.

Focus visible · target 44px · motion standard

Non-negotiable rules

Focus is visible

Every keyboard-reachable control shows a high-contrast focus ring.

Targets stay reachable

Important mobile actions use a minimum 44×44px interaction target.

Names survive without icons

Icon-only controls expose a useful accessible name.

Motion can reduce

Reduced motion removes decorative loops and spatial transforms.

Semantic component contract

ComponentElementKeyboardState
Navigation itemLinkEnteraria-current
CommandButtonSpace / Enterdisabled / aria-pressed
TabsTablist + tabsArrow keysaria-selected
DialogNative/owned dialogTab + Escapefocus trap + return
ToastLive regionDismiss buttonsemantic tone + copy
productionsrc/data/visual-system-contracts.ts

Content and voice lab

Pets67 names the product once. Commands use direct verbs, feedback names the state before the consequence and task-critical copy wraps before truncation.

Pets67 companion

Otvertka-67

Practical repair companion for intermittent bugs and careful release work.

AreaExampleRule
Primary actionsInstall pet · Use today · View detailsDirect verb + object
RecoveryRetry package · Clear filters · Show all companionsName the next useful step
FeedbackPet added to loadout · Package unavailableState first; consequence second
Empty statesNo exact pet matchExplain without blaming the user
IdentityPets67 · Visual SystemOne product name; descriptors stay separate
Stress copyLong pet names and translated-length labelsWrap before truncating task-critical text
productiondocs/development/design-engineering-motion-checklist.md

Keyboard journey lab

Tab through the real controls. The live readout makes focus order and the non-swipe dismissal alternative inspectable.

Current focusNothing focused yetPress Tab / Shift+Tab. Every step keeps a visible ring and a readable accessible name.

Do / Don’t

Do

Let semantics, focus order and readable copy carry the task before animation or decoration is added.

Don't

Do not encode state by color alone, hide focus, or make a moving pet the only explanation of system status.