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.

All assets Prompt bank

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

Hall mapWhere the hall door images live.TarotThe main working hall for the first asset set.Scroll shopCommercial illustrations and artifacts.TrustSeals, explanations, and visual honesty.