Roblox game UI / HUD patterns

Hand-built HUDs (not auto-scaled templates) that hold up across devices and read clearly.

Responsive layout across devices

UIScale (e.g. a fitScale helper) scales an element's SIZE about its anchor — NOT its position. So scaling alone doesn't reposition; recompute positions per device where it matters. Don't nest two UIScales on one element (parent + child) — it double-scales.
Device gate by MIN dimension, not by TouchEnabled alone — math.min(vp.X, vp.Y) is orientation-proof: phone short side ≈ ≤430, tablet ≥ ~744. Branch desktop / phone (isMobile and min < 600) / tablet (isMobile and min >= 600) so a rotated tablet isn't treated as a phone.
Anchor stacked HUD elements to LIVE panel heights, not hardcoded pixel offsets. Classic bug: a boost/pill row hardcodes "panel is 104px" but the panel above it GROWS with content (clamp(base + n*rowH, …)), so they overlap once the panel expands. Read the neighbor's actual AbsoluteSize.Y (or its formula) and position off that.
Leave room for Roblox's own mobile controls: the DynamicThumbstick capture area reaches up to ~0.75·vp.Y on the bottom-left, and the Jump button sits bottom-right; lift bottom-anchored HUD off the edge enough to clear them WITH and WITHOUT the safe-area inset. Verify on a small phone (iPhone SE) and a large one (Pro Max) — the two worst cases.

Convention that tests well: one ScreenGui per screen/panel, Enabled = false, content pre-built. Toggle .Enabled = true to open. (For MCP testing, enabling reveals CENTERED panels; SLIDE-IN panels sit off-screen in their closed position, so toggling shows nothing — animate them in instead.)
Only one panel open at a time: a closeAll() that closes/hides every panel before opening the next.
Click-outside-to-close: .Active = true does NOT reliably sink clicks that fall through a child ScrollingFrame. Bounds-check the backdrop's InputBegan — close only when the click is OUTSIDE the panel's AbsolutePosition/AbsoluteSize.