/mobile-ux

Horizen Mobile UX — Full Reference

Touch Targets

• Minimum size: 44x44px for all interactive elements.
• Minimum spacing: 8px between adjacent touch targets.
• Icon-only buttons: Ensure 44x44px hit area even if icon is smaller (use padding).
• Links in text: Increase line-height to 1.6+ to prevent accidental taps on adjacent lines.
• Close buttons: 44x44px minimum, positioned with at least 8px from edges.

Mobile Typography Scale

Style	Desktop	Tablet	Mobile
Main Title (Display XL)	127px	72px	48px
Display LG	96px	60px	40px
Display MD	72px	48px	34px
H1	60px	40px	32px
H2	48px	34px	28px
H3	40px	30px	24px
H4	34px	28px	22px
Body LG	20px	18px	18px
Body MD	16px	16px	16px
Body SM	14px	14px	14px

All headings remain Funnel Display 700. Line heights increase slightly on mobile for readability.

Mobile Navigation

Trigger: Hamburger icon (24px, 3 bars), 44x44px touch target, top-right of nav.

Fullscreen Overlay:

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--hz-black);
  z-index: var(--hz-z-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeIn var(--hz-transition-normal);
}

• Close button: X icon, 44x44px, top-right, same position as hamburger.
• Menu items: Centered vertically, Funnel Display 32px bold, white, 24px gap between items.
• CTA button: Primary yellow pill at bottom of menu list, full-width (with padding).
• Animation: Fade in 300ms, menu items stagger slideUp 50ms each.
• Body scroll lock: body { overflow: hidden } when overlay is open.
• Social/secondary links: Bottom of overlay, smaller (14px), --hz-grey-dark color.

Mobile Buttons

• Full-width: Buttons stretch to 100% width on mobile (width: 100%).
• Padding: 14px 24px (slightly taller for easier tapping).
• Stacking: When multiple buttons, stack vertically with 12px gap.
• Primary above secondary: Primary (yellow) button always above secondary (outline).
• Fixed bottom CTA: For important actions, position: fixed; bottom: 0; padding: 16px; background: white; border-top: 1px solid --hz-line-grey.

Mobile Cards

• Layout: Single column, full-width.
• Padding: var(--hz-space-4) (16px) instead of 24px desktop.
• Gap: 12px between cards (vs 24px desktop).
• Image cards: Image spans full width, border-radius: 12px 12px 0 0.
• Horizontal scroll: For card carousels, use overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch.

Mobile Forms

• Input height: 48px (maintained from desktop for touch).
• Labels: Stacked above inputs (never side-by-side on mobile).
• Gap: 16px between form fields.
• Input mode: Use appropriate inputmode attributes:
  • inputmode="email" for email fields
  • inputmode="tel" for phone
  • inputmode="numeric" for numbers
  • inputmode="decimal" for amounts
• Auto-capitalize: autocapitalize="off" for emails, addresses, usernames.
• Submit button: Full-width at bottom of form.
• Error messages: Inline below field, 14px --hz-error.

Mobile Modals — Bottom Sheet

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--hz-white);
  border-radius: 16px 16px 0 0;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--hz-space-6) var(--hz-space-4);
  z-index: var(--hz-z-modal);
  animation: slideUp var(--hz-transition-normal);
}

• Drag handle: Centered at top, width: 40px; height: 4px; border-radius: 2px; background: --hz-line-grey; margin: 0 auto 16px.
• Overlay: Same as modal overlay (rgba(3, 14, 36, 0.6)).
• Slide-up animation: transform: translateY(100%) to translateY(0), 300ms ease.
• Swipe to dismiss: Drag handle or swipe down gesture to close.
• Safe area: padding-bottom: env(safe-area-inset-bottom).

Mobile Tables

Option A — Horizontal Scroll:

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--hz-radius-md);
  border: 1px solid var(--hz-line-grey);
}

Add horizontal scroll indicator (fade edges or scroll hint).

Option B — Card Collapse: Each row becomes a card on mobile with label-value pairs stacked:

.table-card {
  padding: var(--hz-space-4);
  border: 1px solid var(--hz-line-grey);
  border-radius: var(--hz-radius-md);
  margin-bottom: var(--hz-space-3);
}
.table-card-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--hz-grey);
}

Mobile Spacing

Token	Desktop	Tablet	Mobile
Section vertical	64px	48px	32px
Section horizontal	40px	24px	16px
Card padding	24px	24px	16px
Card gap	24px	16px	12px
Component gap	16px	12px	8px
Grid gap	24px	16px	16px

Swipe & Gesture Patterns

• Card carousel: scroll-snap-type: x mandatory; scroll-snap-align: start on children.
• Swipe to delete/action: Reveal action buttons (red for delete, blue for edit) on horizontal swipe. Use transform: translateX().
• Pull to refresh: Custom spinner at top, --hz-yellow color, 40px threshold.
• Pinch to zoom: Disabled on UI (touch-action: pan-x pan-y on containers), enabled on images.
• Long press: For context menus, 500ms threshold, subtle haptic feedback.

Safe Area & Device Handling

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

:root {
  --hz-safe-top: env(safe-area-inset-top);
  --hz-safe-bottom: env(safe-area-inset-bottom);
  --hz-safe-left: env(safe-area-inset-left);
  --hz-safe-right: env(safe-area-inset-right);
}
.nav { padding-top: var(--hz-safe-top); }
.bottom-bar { padding-bottom: var(--hz-safe-bottom); }

• Apply safe areas to: navigation, bottom sheets, fixed bottom elements, toasts.
• Test with iPhone notch/Dynamic Island and Android gesture navigation.
• Use viewport-fit=cover to extend into safe areas where appropriate.

Mobile Performance

• Lazy loading: loading="lazy" on all below-fold images.
• Reduced motion: Respect prefers-reduced-motion: reduce — replace slide/scale animations with simple opacity fades.
• Will-change: Apply will-change: transform only during active animations, remove after.
• Font loading: font-display: swap for both Funnel Display and Proxima Nova.
• Touch events: Use passive: true on scroll/touch listeners.
• Image optimization: WebP format, srcset for 1x/2x/3x, aspect-ratio to prevent layout shifts.

Bottom Navigation Bar

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--hz-white);
  border-top: 1px solid var(--hz-line-grey);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: var(--hz-z-nav);
}

• Items: 3-5 items maximum.
• Each item: Icon (24px) above label (10px), flex column, centered.
• Active state: Icon and label in --hz-yellow, inactive in --hz-grey-dark.
• Badge: 8px red dot or count badge (min 16px), positioned top-right of icon.
• Safe area: padding-bottom: env(safe-area-inset-bottom).
• Hide on scroll down, show on scroll up (optional).
• Z-index: var(--hz-z-nav) (200).

Mobile Toast / Snackbar

.toast {
  position: fixed;
  bottom: 80px; /* above bottom nav */
  left: 16px;
  right: 16px;
  background: var(--hz-black);
  color: var(--hz-white);
  padding: 14px 16px;
  border-radius: var(--hz-radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: var(--hz-z-toast);
  animation: slideUp var(--hz-transition-normal);
}

• Font: Proxima Nova, 14px, 400 weight.
• Action button: Right side, yellow text, 600 weight, uppercase 12px.
• Auto-dismiss: 4 seconds default, 8 seconds for actions.
• Stacking: Max 2 visible, newest on top, older slides up.
• Animation: slideUp in, slideDown out, 300ms.
• Position: Above bottom nav bar (if present), with safe area padding.
• Swipe to dismiss: Horizontal swipe gesture.

Mobile Loading States

Skeleton Screens

.skeleton {
  background: var(--hz-grey);
  border-radius: var(--hz-radius-md);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--hz-grey) 25%,
    #e8e8e8 50%,
    var(--hz-grey) 75%
  );
  background-size: 200% 100%;
}

• Match skeleton shapes to actual content layout (card placeholders, text lines, avatar circles).
• Use border-radius: 4px for text lines, 50% for avatars, 12px for cards.

Pull to Refresh

• Spinner: --hz-yellow colored, 32px, spin animation.
• Threshold: 60px pull distance to trigger.
• Indicator appears at top with translateY.

Inline Button Loading

• Replace button text with 20px spinner.
• Maintain button width (min-width matches content).
• Disable button during loading.

Mobile Search Patterns

Expandable Search

• Collapsed: Search icon (24px) in nav.
• Expanded: Full-width input replaces nav content, back arrow left.
• Animation: Width expansion, 200ms ease.

Full-Screen Search Overlay

.search-overlay {
  position: fixed;
  inset: 0;
  background: var(--hz-white);
  z-index: var(--hz-z-modal);
  padding: var(--hz-safe-top) 16px 16px;
}

• Input: Auto-focused, 48px height, --hz-grey background, 8px radius.
• Cancel button: Right of input, text "Cancel", --hz-blue.
• Results: Below input, full-width list, 56px row height.
• Empty state: Centered icon + "No results found" text.
• Recent searches: Shown before typing, clock icon, clearable.
• Keyboard: enterkeyhint="search" on input.

Orientation & Landscape Handling

@media (orientation: landscape) and (max-height: 500px) {
  .section { padding: var(--hz-space-4) var(--hz-space-6); }
  .hero { min-height: auto; }
  .modal { max-height: 95vh; }
  .bottom-sheet { max-height: 90vh; }
}

• Reduce vertical padding in landscape to prevent excessive scrolling.
• Hero sections: Use min-height: auto instead of 100vh in landscape.
• Bottom sheets/modals: Increase max-height.
• Lock to portrait only for specific flows if needed: screen-orientation: portrait.

Sticky / Collapsible Headers

.header {
  position: sticky;
  top: 0;
  z-index: var(--hz-z-sticky);
  transition: all var(--hz-transition-fast);
}
.header-collapsed {
  height: 48px;
  box-shadow: var(--hz-shadow-sm);
}
.header-expanded {
  height: 72px;
}

• Expanded state: Full nav (72px) — logo, links, CTA.
• Collapsed state: Compact nav (48px) — logo + hamburger/CTA only.
• Scroll direction detection: Collapse on scroll down, expand on scroll up.
• Threshold: 60px scroll distance before toggling state.
• Background: Solid --hz-black (no transparency) to prevent content bleed.
• Transition: Height + shadow, 150ms ease.

Mobile Accessibility

• Focus traps: Modals and bottom sheets trap focus within until dismissed.
• Screen reader announcements: aria-live="polite" for toasts, loading states, dynamic content.
• Reduced motion: All animations respect prefers-reduced-motion: reduce:

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
  

• Focus visible: outline: 2px solid var(--hz-yellow); outline-offset: 2px on :focus-visible.
• Landmarks: <nav>, <main>, <header>, <footer>, <aside> for screen reader navigation.
• Touch target size: 44x44px minimum, no exceptions.
• Skip navigation link: First focusable element, visually hidden until focused.
• ARIA expanded: On hamburger menu, accordion triggers, dropdowns.
• ARIA labels: On icon-only buttons, close buttons, navigation toggles.

FAB (Floating Action Button)

.fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--hz-yellow);
  color: var(--hz-black);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--hz-shadow-lg);
  border: none;
  cursor: pointer;
  z-index: var(--hz-z-nav);
  transition: all var(--hz-transition-fast);
}
.fab:hover {
  background: var(--hz-yellow-hover);
  box-shadow: var(--hz-shadow-xl);
  transform: scale(1.05);
}
.fab:active {
  transform: scale(0.95);
  background: var(--hz-yellow-active);
}

• Icon: 24px, centered, --hz-black color.
• Mini FAB: 40px circle, for secondary actions.
• Speed dial: On tap, expand upward to reveal 2-4 mini FABs with labels, 60px spacing.
• With bottom nav: Offset bottom: 80px (56px nav + 24px gap).
• Animation: Scale in on page load, 300ms spring.
• Hide on scroll down (optional, same as bottom nav).

AI Agent Interface Components

Chat Bubble Layout

.bubble-user {
  background: var(--hz-yellow-muted);
  color: var(--hz-black);
  border-radius: 16px 16px 4px 16px;
  margin-left: auto; /* right-aligned */
  max-width: 80%;
  padding: 12px 16px;
}
.bubble-agent {
  background: var(--hz-grey);
  color: var(--hz-black);
  border-radius: 16px 16px 16px 4px;
  margin-right: auto; /* left-aligned */
  max-width: 80%;
  padding: 12px 16px;
}

• User bubbles: Right-aligned, --hz-yellow-muted background, rounded with bottom-right flat corner.
• Agent bubbles: Left-aligned, --hz-grey background, rounded with bottom-left flat corner.
• Avatar: 32px circle, left of agent bubble, top-aligned.
• Timestamp: 12px, --hz-grey-dark, below bubble, aligned to bubble side.
• Spacing: 12px between same-sender messages, 24px between different senders.
• Font: Proxima Nova 16px body text within bubbles.

Agent Status Indicators

• Thinking: Three dots animation (bounce), --hz-grey-dark color, inside agent bubble shape.

  .thinking-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--hz-grey-dark);
    animation: bounce 1.4s infinite;
  }
  

• Online: 8px green (--hz-success) dot, bottom-right of agent avatar.
• Offline: 8px grey (--hz-line-grey) dot, same position.
• Typing indicator: "Agent is typing..." text, 14px italic, --hz-grey-dark, with animated dots.

Streaming Response

• Blinking cursor: | character at end of text, animation: blink 1s step-end infinite.
• Text appears: Characters/words stream in, no layout shift (use min-height or reserve space).
• Code blocks: Render in real-time with syntax highlighting applied incrementally.
• Scroll: Auto-scroll to bottom as content streams, unless user has scrolled up.

Code Block in Chat

.code-block {
  background: var(--hz-black);
  color: var(--hz-white);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 16px;
  border-radius: var(--hz-radius-md);
  overflow-x: auto;
  margin: 8px 0;
}
.code-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: var(--hz-black-light);
  border-radius: 8px 8px 0 0;
  font-size: 12px;
  color: var(--hz-grey-dark);
}

• Top bar: Language label (left), copy button (right).
• Copy button: Clipboard icon, 32px touch target, "Copied!" tooltip on success.
• Horizontal scroll: For long lines, -webkit-overflow-scrolling: touch.
• Max height: 300px with vertical scroll for long blocks.

Multi-turn Container

.chat-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  gap: 4px;
}

• Auto-scroll: Scroll to bottom on new messages, unless user scrolled up more than 100px.
• Scroll-to-bottom button: Fixed, 40px circle, appears when scrolled up, down-arrow icon, --hz-yellow bg.
• Date separators: Centered text, 12px, --hz-grey-dark, with horizontal lines: --- March 18, 2026 ---.
• Load more: "Load earlier messages" link at top, or auto-load on scroll to top.

Prompt Input Bar

.prompt-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--hz-white);
  border-top: 1px solid var(--hz-line-grey);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  z-index: var(--hz-z-nav);
}
.prompt-textarea {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  padding: 10px 16px;
  border: 1px solid var(--hz-line-grey);
  border-radius: 12px;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 16px;
  resize: none;
  overflow-y: auto;
}
.prompt-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hz-yellow);
  color: var(--hz-black);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

• Auto-expanding textarea: Grows from 40px to max 120px as user types.
• Send button: 40px yellow circle, arrow-up icon, disabled (opacity 0.5) when empty.
• Attachment button: Left of textarea (optional), 40px, paperclip icon.
• Safe area: Bottom padding includes env(safe-area-inset-bottom).

Agent Action Cards

.action-card {
  background: var(--hz-white);
  border: 1px solid var(--hz-line-grey);
  border-radius: var(--hz-radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}

• Layout: Icon (left, 32px, colored circle bg) + Title & description (center) + Status (right).
• Title: 14px, 600 weight, --hz-black.
• Description: 12px, 400 weight, --hz-grey-dark.
• Status indicators: Spinner (in progress), checkmark (done), X (failed), clock (pending).
• Clickable: Hover background: --hz-grey, cursor pointer for detail expansion.

Feedback Controls

• Layout: Horizontal row below agent message, 8px gap.
• Icons: 28px touch target (with padding), --hz-grey-dark default.
• Thumbs up/down: Filled yellow on active (thumbs up) or red (thumbs down).
• Copy: Clipboard icon, "Copied!" tooltip.
• Regenerate: Refresh icon, --hz-blue on hover.
• Font: 12px label optional, below/beside icons.

AI Chat Mobile Optimizations

• Keyboard-aware: Input bar pushes up above keyboard, chat scrolls to bottom.
• inputmode="text" on prompt textarea (not search, to avoid auto-suggestions).
• Long-press on messages for context menu: Copy, Reply, Delete.
• Image messages: Max-width 240px, tap to view full-screen.
• Voice input button: Microphone icon option next to send button.
• Haptic feedback on send (if supported).

Web3 Mobile Patterns

Mobile Wallet Connection

• Presentation: Bottom sheet (not modal center).
• Top wallets: Show top 4 most popular wallets, "Show all" expander.
• Deep links: href links to open installed wallet apps directly (e.g., metamask://, cbwallet://).
• QR code: Option for WalletConnect QR (200x200px, white bg, 16px padding).
• Loading: Spinner + "Waiting for wallet..." after app switch.
• Timeout: 30 seconds, then show "Connection timed out" with retry.
• Layout:

  .wallet-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--hz-line-grey);
  }
  .wallet-icon { width: 40px; height: 40px; border-radius: 10px; }
  .wallet-name { font-size: 16px; font-weight: 600; }
  

Mobile Transaction Flow

• Container: Bottom sheet for all transaction states.
• Pending: Yellow spinner, hash with tap-to-copy, "View on Explorer" link.
• Success: Green checkmark animation (scale in), amount in large text, confetti optional.
• Error: Red X, error message, "Try Again" full-width button.
• Tap-to-copy: Hash/address copies to clipboard, toast confirmation "Copied!".
• Haptic: Success vibration on confirm, error vibration on failure.

Mobile Address Display

• Truncation: Shorter than desktop — 0x12...5678 (first 4, last 4 characters).
• Font: Monospace, 14px.
• Tap-to-copy: Full address copies on tap, toast "Address copied!".
• Full display: Bottom sheet with full address + QR code on long-press.

Mobile Staking & Governance

Staking Cards:

• Full-width card layout, single column.
• APY in large text (24px, --hz-yellow, 700 weight).
• Stake/Unstake buttons: Full-width, stacked, primary + secondary.
• Amount input: Full-width, large font (20px), with MAX button.
• Validator list: Scrollable, 64px rows, avatar + name + APY.

Governance / Voting:

• Proposal cards: Title, status badge, vote count bar.
• Vote modal: Bottom sheet, For/Against/Abstain as large tappable options (56px height each).
• Results bar: Horizontal stacked bar, green (for) / red (against) / grey (abstain).
• Voting power display: Card at top with user's voting power.