/mobile-ux

Horizen Labs Mobile UX Patterns

Mobile Navigation

Fullscreen overlay with navy background.

.hl-mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--hl-navy);
  z-index: var(--hl-z-overlay);
  display: flex;
  flex-direction: column;
  padding: 80px 20px 40px;
  overflow-y: auto;
}
.hl-mobile-nav-item {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--hl-white);
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
}
.hl-mobile-nav-item.active {
  color: var(--hl-teal);
}
.hl-mobile-nav-cta {
  background: var(--hl-teal);
  color: var(--hl-navy);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  padding: 20px 30px;
  border-radius: 0;
  border: none;
  margin-top: 24px;
  text-align: center;
}

Mobile Typography Scale

Style	Desktop	Mobile	Notes
H0 (Hero)	80px	42px	Drops significantly
H1	65px	36px
H2	50px	30px
H3	45px	26px
H4	30px	22px
Body	16px	16px	Stays same
Body Small	14px	14px	Stays same

@media (max-width: 767px) {
  .hl-h0 { font-size: 42px; line-height: 1.05; }
  .hl-h1 { font-size: 36px; line-height: 1.15; }
  .hl-h2 { font-size: 30px; line-height: 1.2; }
  .hl-h3 { font-size: 26px; line-height: 1.25; }
  .hl-h4 { font-size: 22px; line-height: 1.35; }
}

Mobile Buttons

• Full-width on mobile (width: 100%)
• Sharp corners maintained on ALL breakpoints — never add radius on mobile
• Padding adjusts: 18px 24px on mobile (from 20px 30px)
• Stack vertically with 12px gap when multiple buttons

@media (max-width: 767px) {
  .hl-btn {
    width: 100%;
    justify-content: center;
    padding: 18px 24px;
  }
}

Mobile Cards

• Single-column layout
• Sharp 0-radius maintained — never round on mobile
• Padding reduces: 16px (from 20px)
• Full-width images span card edge

@media (max-width: 767px) {
  .hl-card {
    padding: 16px;
    border-radius: 0; /* Maintained */
  }
}

Mobile Forms

@media (max-width: 767px) {
  .hl-input {
    height: 48px;
    padding: 14px 16px;
    font-size: 16px; /* Prevents iOS zoom */
    border-radius: 0;
  }
  .hl-label {
    margin-bottom: 6px;
  }
  .hl-form-group {
    margin-bottom: 16px;
  }
  .hl-form-submit {
    width: 100%;
  }
}

• Labels stack above inputs
• Use inputmode attribute for appropriate keyboards
• Full-width submit button

Mobile Modals — Bottom Sheet

CRITICAL: NO border-radius on the sheet itself — sharp corners to match brand.

.hl-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--hl-white);
  border-radius: 0; /* Sharp to match brand */
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px;
  z-index: var(--hl-z-modal);
  box-shadow: var(--hl-shadow-lg);
}
.hl-bottom-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--hl-grey);
  border-radius: 9999px; /* Exception — drag handle is pill-shaped */
  margin: 0 auto 16px;
}
.hl-bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 23, 66, 0.7);
  z-index: calc(var(--hl-z-modal) - 1);
}

Mobile Tables

@media (max-width: 767px) {
  .hl-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Card-style stacked layout alternative */
  .hl-table--stacked td {
    display: block;
    padding: 8px 16px;
    border-bottom: none;
  }
  .hl-table--stacked td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--hl-grey-text);
    display: block;
    margin-bottom: 4px;
  }
}

Mobile Spacing

@media (max-width: 767px) {
  .hl-section { padding: 40px 20px; }
  .hl-container { padding: 0 20px; }
  .hl-stack > * + * { margin-top: 16px; }
}

Swipe & Gesture Patterns

• Horizontal card carousels with snap scrolling
• Pull-to-refresh with teal accent spinner
• Swipe-to-dismiss on toasts (left/right)
• Bottom sheet drag-to-close

.hl-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 16px;
  padding: 0 20px;
}
.hl-carousel > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}
.hl-pull-refresh-spinner {
  border: 3px solid var(--hl-grey-input);
  border-top-color: var(--hl-teal);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: spin 1s linear infinite;
}

Safe Area & Device Handling

.hl-safe-area {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.hl-bottom-bar {
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
/* Disable bounce scroll on iOS */
html {
  overscroll-behavior: none;
}

Performance

• Lazy load images with loading="lazy" and decoding="async"
• Use will-change: transform sparingly for animated elements
• Prefer CSS transitions over JS animations
• Use content-visibility: auto for off-screen sections
• Font display: font-display: swap for Azeret Mono and Roboto
• SVG sprite for icons (single HTTP request for all 44 icons)
• Target 60fps for all animations

Bottom Navigation Bar

.hl-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--hl-white);
  border-top: 1px solid var(--hl-grey-input);
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 64px;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: var(--hl-z-nav);
}
.hl-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  min-width: 64px;
  padding: 8px 0;
}
.hl-bottom-nav-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--hl-grey-text);
}
.hl-bottom-nav-item.active .hl-bottom-nav-label {
  color: var(--hl-teal-text);
}
.hl-bottom-nav-item.active .hl-bottom-nav-icon {
  color: var(--hl-teal-text);
}

Mobile Toast

.hl-mobile-toast {
  background: var(--hl-navy);
  color: var(--hl-white);
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 14px 20px;
  border-radius: 0; /* Sharp corners */
  margin: 0 16px;
  box-shadow: var(--hl-shadow-lg);
  z-index: var(--hl-z-toast);
}

Loading States

/* Shimmer skeleton — grey-light base */
.hl-skeleton {
  background: var(--hl-grey-light);
  border-radius: 0;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.hl-skeleton {
  background: linear-gradient(90deg,
    var(--hl-grey-light) 25%,
    #ebedf2 50%,
    var(--hl-grey-light) 75%
  );
  background-size: 200% 100%;
}

/* Teal spinner */
.hl-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--hl-grey-input);
  border-top-color: var(--hl-teal);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

Search

.hl-mobile-search {
  background: var(--hl-grey-light);
  border-radius: 0; /* Sharp corners */
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hl-mobile-search input {
  background: none;
  border: none;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: var(--hl-navy);
  flex: 1;
  outline: none;
}
.hl-mobile-search-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--hl-grey-text);
  margin-bottom: 8px;
}

Orientation & Landscape

@media (orientation: landscape) and (max-height: 500px) {
  .hl-mobile-nav {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 60px 20px 20px;
  }
  .hl-bottom-sheet {
    max-height: 70vh;
  }
}

Sticky Headers

Key difference: White background with blur effect.

.hl-sticky-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hl-grey-input);
  z-index: var(--hl-z-sticky);
  padding: 12px 20px;
}

Mobile Accessibility

• Touch targets: minimum 44x44px
• Focus rings: 2px solid var(--hl-teal) with 2px offset
• Swipe gesture alternatives: always provide tap fallback
• Screen reader: aria-live for dynamic content
• Reduced motion: prefers-reduced-motion: reduce
• Font scaling: use rem/em, test at 200% zoom
• High contrast: test with prefers-contrast: more

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

Floating Action Button (FAB)

One of the few round elements in the system.

.hl-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%; /* Exception — FAB is circular */
  background: var(--hl-teal);
  color: var(--hl-navy);
  border: none;
  box-shadow: var(--hl-shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  right: 20px;
  z-index: var(--hl-z-nav);
  cursor: pointer;
}
.hl-fab-tooltip {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--hl-navy);
  color: var(--hl-white);
  padding: 6px 12px;
  border-radius: 0;
  white-space: nowrap;
}

AI Agent Interface

Chat Bubbles

.hl-chat-bubble-user {
  background: var(--hl-teal-light);
  color: var(--hl-navy);
  border-radius: 0; /* SHARP corners */
  padding: 14px 18px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  max-width: 80%;
  align-self: flex-end;
}
.hl-chat-bubble-agent {
  background: var(--hl-grey-light);
  color: var(--hl-navy);
  border-radius: 0; /* SHARP corners */
  padding: 14px 18px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  max-width: 80%;
  align-self: flex-start;
}
.hl-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 0; /* SQUARE avatar */
  background: var(--hl-gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

Agent Status

.hl-agent-status {
  background: var(--hl-grey-light);
  border-radius: 0;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: var(--hl-grey-text);
}
.hl-agent-status-dots {
  display: flex;
  gap: 4px;
}
.hl-agent-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hl-grey);
  animation: pulse 1.4s infinite;
}

Streaming Text

.hl-streaming-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--hl-navy);
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

Code Block

.hl-code-block {
  background: var(--hl-navy);
  border-radius: 0; /* SHARP corners */
  overflow: hidden;
}
.hl-code-block-header {
  background: rgba(255, 255, 255, 0.08);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hl-code-block-lang {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--hl-teal);
}
.hl-code-block pre {
  font-family: 'Azeret Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hl-white);
  padding: 16px;
  margin: 0;
  overflow-x: auto;
}

Prompt Input

.hl-prompt-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--hl-grey-input);
  border-radius: 0; /* Sharp corners */
  background: var(--hl-white);
}
.hl-prompt-input textarea {
  flex: 1;
  border: none;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  resize: none;
  outline: none;
  min-height: 24px;
  max-height: 120px;
}
.hl-prompt-send {
  width: 40px;
  height: 40px;
  background: var(--hl-teal);
  color: var(--hl-navy);
  border: none;
  border-radius: 0; /* SQUARE send button */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

Action Cards

.hl-action-card {
  background: var(--hl-white);
  border: 1px solid var(--hl-grey-input);
  border-radius: 0; /* Sharp corners */
  padding: 14px 18px;
  cursor: pointer;
  transition: var(--hl-transition-fast);
}
.hl-action-card:hover {
  background: var(--hl-teal-light);
  border-color: var(--hl-teal);
}

Feedback Buttons

.hl-feedback-btn {
  width: 28px;
  height: 28px;
  border-radius: 0; /* SQUARE feedback buttons */
  border: 1px solid var(--hl-grey-input);
  background: var(--hl-white);
  color: var(--hl-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hl-feedback-btn:hover {
  color: var(--hl-navy);
  border-color: var(--hl-navy);
}

Web3 Mobile Patterns

Wallet Connection — Bottom Sheet

.hl-wallet-sheet {
  /* Uses standard bottom sheet pattern */
  padding: 24px 20px;
}
.hl-wallet-sheet-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--hl-grey-input);
  border-radius: 0;
  margin-bottom: 8px;
}

• Deep link to mobile wallet apps
• Fallback to WalletConnect QR
• Show "Opening wallet..." status with teal spinner

Transaction Flow

.hl-tx-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}
.hl-tx-step-icon {
  width: 32px;
  height: 32px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

• Vibration feedback on transaction confirm: navigator.vibrate(100)
• Vibration on error: navigator.vibrate([100, 50, 100])
• Full-screen success/error states

Address Display — Mobile

.hl-address-mobile {
  font-family: 'Azeret Mono', monospace;
  font-size: 14px;
  color: var(--hl-navy);
  background: var(--hl-grey-light);
  padding: 10px 14px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Staking & Governance — Mobile

.hl-staking-card {
  background: var(--hl-white);
  border: 1px solid var(--hl-grey-input);
  border-radius: 0;
  padding: 16px;
}
.hl-staking-apr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hl-staking-apr-value {
  font-family: 'Azeret Mono', monospace;
  font-weight: 700;
  font-size: 22px;
  color: var(--hl-teal-text);
}
.hl-staking-apr-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--hl-grey-text);
}
.hl-governance-card {
  background: var(--hl-white);
  border: 1px solid var(--hl-grey-input);
  border-radius: 0;
  padding: 16px;
}