/mobile-ux

zkVerify Mobile UX Patterns

Touch Targets

• Minimum touch target: 44x44px
• Recommended: 48x48px for primary actions
• Spacing between targets: minimum 8px (--zk-space-2)
• Thumb zone optimization: critical actions in bottom 60% of screen

Mobile Typography Scale

Desktop sizes scale down on mobile (max-width: 768px):

Style	Desktop	Mobile	Notes
Display XL / H1	170px	48px	Monigue, uppercase
Display LG / H2	100px	36px	Monigue, uppercase
Display MD / H3	48px	28px	Monigue, uppercase
H4	36px	24px	Monigue, uppercase
H5	28px	22px	Monigue, uppercase
Surheading	15px	13px	Space Grotesk 500, letter-spacing 3px (reduced from 4px)
Body LG	20px	18px	Space Grotesk 300
Body MD	16px	15px	Space Grotesk 300
Body SM	14px	13px	Space Grotesk 300

Mobile Navigation

Fullscreen Overlay:

• Background: --zk-void (full screen)
• Text: --zk-shell, Space Grotesk 500, 20px
• Active item: --zk-pulse text color
• Close button: top-right, 44x44px, --zk-shell X icon
• Animation: slideDown from top, --zk-transition-normal
• Links stacked vertically, --zk-space-6 (24px) gap
• CTA button at bottom: Primary (Pulse) pill, full width

Hamburger Icon:

• 44x44px touch target
• 3 lines, --zk-shell color (on Void nav) or --zk-void (on light)
• Animates to X on open

Mobile Buttons

• Full width on mobile for primary actions (width: 100%)
• Stacked vertically with --zk-space-3 (12px) gap
• Minimum height: 48px on mobile
• Same pill radius (--zk-radius-full)
• Font size: 15px minimum for readability

Mobile Cards

• Full width, no horizontal margin (only container padding)
• Stacked vertically, --zk-space-4 (16px) gap
• Padding: --zk-space-5 (20px) — reduced from desktop 24px
• Border radius: --zk-radius-lg (10px) — same as desktop
• Swipeable card carousels: snap scrolling, dot indicators

Mobile Forms

• Full-width inputs
• Stacked labels above inputs (never inline on mobile)
• Input height: 48px (increased from 44px desktop)
• Font size: 16px minimum (prevents iOS zoom)
• Spacing between fields: --zk-space-4 (16px)
• Submit button: full width, Primary (Pulse)
• Error messages below inputs, --zk-error color, 13px

Mobile Modals (Bottom Sheet)

• Slides up from bottom
• Max height: 90vh
• Drag handle: 40px wide, 4px tall, --zk-grey-light, centered top
• Background: --zk-white
• Radius: --zk-radius-xl (16px) top corners only
• Overlay: rgba(2, 2, 18, 0.6), tap to dismiss
• Padding: --zk-space-5 (20px)
• Content scrollable within sheet

Mobile Tables

• Horizontal scroll with overflow-x: auto
• Shadow indicators on scroll edges (fade gradient)
• Min column width: 120px
• Sticky first column option
• Alternative: card-based layout for simple data

Mobile Spacing

Context	Desktop	Mobile
Section vertical	64px	32px
Section horizontal	40px	16px
Card padding	24px	20px
Card gap	24px	16px
Component gap	16px	12px

Swipe & Gesture Patterns

• Swipe cards: Horizontal scroll, CSS scroll-snap, snap to card edges
• Pull to refresh: Pulse spinner, --zk-pulse color
• Swipe to dismiss: Toasts, notifications
• Long press: Context menu on cards (proof details, address actions)

Safe Area

.container {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

Bottom nav and FAB must respect env(safe-area-inset-bottom).

Performance

• Images: loading="lazy", responsive srcset
• Animations: will-change on animated properties, GPU-accelerated transforms
• prefers-reduced-motion: reduce — disable all motion except opacity
• Skeleton loading with shimmer animation before content loads
• Touch feedback: immediate visual response (opacity or scale)

Bottom Navigation Bar

• Position: fixed bottom
• Background: --zk-white
• Border top: 1px --zk-shell-dim
• Height: 64px + safe area inset
• 4-5 items max
• Icon (24px) + label (11px, Space Grotesk 500)
• Active: --zk-pulse icon and label color
• Inactive: --zk-grey icon and label
• Z-index: --zk-z-nav (200)
• Padding bottom: env(safe-area-inset-bottom)

Mobile Toast / Snackbar

• Position: fixed bottom, above nav bar
• Background: --zk-void
• Text: --zk-shell, Space Grotesk 300, 14px
• Action button: --zk-pulse text, weight 600
• Radius: --zk-radius-lg (10px)
• Margin: 16px horizontal
• Padding: 12px 16px
• Auto-dismiss: 4 seconds
• Swipe right to dismiss
• Max width: calc(100% - 32px)

Loading States

Shimmer / Skeleton:

• Background: linear-gradient --zk-shell-dim (#EDEDF4) to --zk-shell (#F8F8FC)
• Animation: shimmer sweep, 1.5s infinite
• Matches content layout shapes
• Radius matches target component

Pulse Spinner:

• Size: 24px (inline), 40px (page-level)
• Color: --zk-pulse
• Animation: spin 1s linear infinite
• Optional: pulsing glow ring

Search

• Background: --zk-bg-secondary (--zk-shell-dim)
• Border radius: --zk-radius-full (pill)
• Font weight: 300 (Light)
• Placeholder: --zk-grey
• Height: 44px
• Search icon: left, --zk-grey, 18px
• Clear button: right, appears when text entered
• Focus: --zk-signal border

Orientation

• Portrait: Primary layout, all components optimized for vertical
• Landscape: Tables wider, hero images adjust, two-column where possible
• Lock critical modals/sheets to portrait if needed

Sticky Headers

• Background: --zk-void
• backdrop-filter: blur(12px) with semi-transparent Void: rgba(2, 2, 18, 0.85)
• Height: 56px mobile (72px desktop)
• Z-index: --zk-z-sticky (150)
• Logo shrinks/simplifies on scroll
• Shadow: --zk-shadow-sm on scroll

Mobile Accessibility

• Focus rings: 2px solid var(--zk-pulse), offset 2px — same as desktop but more visible on mobile
• Touch targets: 44px minimum, 48px recommended
• High contrast text: --zk-void on --zk-shell (ratio > 15:1)
• Screen reader: all images have alt text, ARIA labels on icon buttons
• prefers-reduced-motion: disable all animations except opacity transitions
• Dynamic type support: respect system font size preferences

Floating Action Button (FAB)

• Size: 56x56px
• Background: --zk-pulse
• Icon: --zk-void, 24px
• Shadow: --zk-shadow-lg
• Position: fixed, bottom-right, 16px from edges + safe area
• Z-index: --zk-z-nav (200)
• Hover/press: --zk-pulse-hover, scale(1.05)
• Use for primary action: "Verify Proof", "New Transaction"

AI Agent Interface

Chat Bubbles

User message:

• Background: --zk-pulse-light (#E8FFE3)
• Text: --zk-void, weight 300
• Radius: 16px 16px 4px 16px (flat bottom-left)
• Max width: 80%
• Padding: 12px 16px
• Aligned right

Agent message:

• Background: --zk-white
• Border: 1px --zk-shell-dim
• Text: --zk-void, weight 300
• Radius: 16px 16px 16px 4px (flat bottom-right — REVERSED from user, left side flat for agent)
• Max width: 80%
• Padding: 12px 16px
• Aligned left

Agent Status Indicator

• Container: --zk-white background, 1px --zk-shell-dim border
• Three animated dots, --zk-grey color, bounce animation
• "Thinking..." label, Space Grotesk 300, 13px
• Online badge: 8px --zk-pulse dot

Streaming Text

• Text appears character-by-character
• Cursor: 2px wide, --zk-void color, blink animation
• Smooth scroll to bottom as content streams

Code Block (in chat)

• Background: --zk-void
• Text: --zk-shell, Space Mono 400, 13px
• Top bar: --zk-grey-light background, language label + copy button
• Radius: --zk-radius-md (8px)
• Horizontal scroll for long lines
• Padding: 12px 16px, top bar 8px 12px

Multi-turn Conversation

• Date separators: --zk-bg-secondary pill, 12px text, --zk-grey-dark
• Scroll-to-bottom button: 40px circle, --zk-pulse background, --zk-void arrow icon
• Unread indicator: --zk-signal dot on scroll button

Prompt Input Bar

• Position: fixed bottom (above bottom nav if present)
• Background: --zk-white
• Border: 1px --zk-shell-dim
• Radius: --zk-radius-lg (10px)
• Input: Space Grotesk 300, 15px, expands vertically (max 4 lines)
• Send button: 40px circle, --zk-pulse background, --zk-void arrow icon
• Send disabled state: --zk-shell-dim background, --zk-grey icon
• Padding: 8px 12px
• Attachment button: left, ghost, --zk-grey icon

Action Cards (in chat)

• Background: --zk-white
• Border: 1px --zk-shell-dim
• Radius: --zk-radius-lg (10px)
• Padding: 12px 16px
• Title: weight 600, 14px
• Description: weight 300, 13px
• Action button: right-aligned, Signal text link or small Pulse pill
• Full width within chat bubble max-width

Feedback (on agent messages)

• Thumbs up / thumbs down icons, 20px
• Default: --zk-grey color
• Hover: --zk-void
• Active (selected): Success (thumbs up) or Error (thumbs down) color
• Positioned below agent message, right-aligned
• Optional: text feedback modal on thumbs down

Mobile Optimizations (AI Agent)

• Prompt bar stretches full width with safe area padding
• Chat bubbles max-width: 85% on mobile (80% desktop)
• Code blocks: smaller font 12px, forced horizontal scroll
• Action cards: stack vertically within bubble
• Bottom sheet for long agent responses on small screens

Web3 Mobile Patterns

Wallet Connection (Mobile)

• Bottom sheet presentation (not modal)
• Wallet list: full width rows, 56px height
• Deep link to wallet apps (MetaMask, etc.)
• WalletConnect QR: full-width in sheet
• Loading state: --zk-pulse spinner while connecting
• Connected animation: brief --zk-pulse glow on success

Transaction Flow (Mobile)

• Full-screen or bottom sheet
• Step indicators: horizontal dots, --zk-signal active, --zk-grey inactive
• Confirm button: full width Primary (Pulse) at bottom
• Success: --zk-pulse glow animation, checkmark icon
• Pending: centered Pulse spinner with pulse glow ring
• Amount display: large Monigue number, centered
• Gas estimate: Body SM, --zk-grey-dark

Address Display (Mobile)

• Font: Space Mono, 14px
• Shorter truncation: 0x1a2b...9f0e (4+4 characters)
• Full-width tap to copy
• Copied feedback: brief Pulse flash on background

Proof Verification (Mobile)

Vertical Stepper:

• Steps stacked vertically (not horizontal like desktop)
• Active step: --zk-signal circle with number
• Completed: --zk-pulse circle with checkmark
• Pending: --zk-grey circle with number
• Connector line: 2px --zk-shell-dim between steps
• Step content below each indicator

Proof Hash (Mobile):

• Shorter truncation: 6+4 characters (0x1a2b3c...9f0e)
• Full-width tap-to-copy row
• Background: --zk-shell

Verification Result:

• Full-width success/failure banner at top
• Details in expandable accordion sections
• Share button: full width Secondary (Void)

Staking (Mobile)

• Full-width staking card
• APY prominently displayed: Monigue, --zk-pulse color
• Stake amount input: full width, large font (20px)
• Max button: small Signal pill inline with input
• Slider for amount selection (thumb: Pulse)
• Confirm: full width Primary (Pulse) button at bottom

Governance (Mobile)

• Proposal cards: full width, stacked
• Vote progress bar: full width, rounded ends
• Vote buttons: full width, stacked (For/Against/Abstain)
• Voting power: displayed above vote buttons, centered
• Filter tabs: horizontal scroll, pill shaped, Signal active