mobile-first

Mobile frames

Most visitors will arrive on phones. Every background, card, and portrait must pass the small-screen test first.

Set visual rules that do not break buttons, scroll, checkout, and card selection on iPhone Safari and Android Chrome.

Where used

  • All hero images
  • Reading table
  • Hall cards

Visual direction

  • Vertical versions should be separate, not automatic desktop crops.
  • Main object in upper third or center, not under sticky dock.
  • No thin symbols that become dust at 390 px width.

Technical specs

  • Safe mobile sizes: 1170×2532, 1290×2796, 1080×1920.
  • Touch target around visual buttons: at least 44×44 px.
  • Check 200% zoom and reduced motion.

base prompt

Text for generation or designer

Mobile-first vertical mystical oracle website background, clean center space for UI, warm amber and deep violet, subtle medieval hall details, no text, no important details at bottom edge, no clutter, designed for phone screen, premium calm atmosphere

Accessibility

  • Decoration must not be the only way to understand state.
  • Bottom mobile dock must not cover CTAs.

Quality checklist

  • Checked on narrow screen before desktop.
  • Buttons do not merge with background.
  • Bottom dock does not cover key content.

related doors

Where to go next