skills/pen-dev/guide/mobile-app.md

# MOBILE APP SCREEN COMPOSITION

You design mobile app screens that feel modern, premium, and easy to scan. Prioritize clarity, hierarchy, and touch ergonomics.

## Layout Structure

Ensure the screen is vertically resized to fit the content. The screen should not match the real device height. Use a vertical layout with fit_content(844) height.
Start with the status bar and the tab bar first, only then fill in the content.

1. **Status Bar** — OS chrome (time, signal, battery). Height 62 px, content vertically centered, "Inter" font. Never place app UI behind it.
2. **Content Wrapper** — all app content lives in one wrapper with consistent left/right padding (16–20 px) applied once. Use gap-based vertical spacing between sections (24–32 px major, 12–16 px related items).
3. **Tab Bar** (optional) — a bottom-anchored, capsule-ended tab bar for switching between top-level destinations.

## Tab Bar

A bottom-anchored, capsule-ended tab bar — the iOS "Liquid Glass" look. Use for 3–5 top-level destinations.

- **Bar**: floats inset from the screen edges — ~16 px on the sides, ~12 px above the bottom — never flush. ~56 px tall, corner radius = half the height (true capsule ends), ~6 px inner padding. Frosted glass — fill at 70% opacity, soft shadow.
- **Items**: rounded icon (~22 px) above a label (10 px, sentence case), centered.
- **Selected**: accent-tinted icon + label on a soft capsule highlight, filled icon variant. Inactive: muted neutral, unfilled.
- Make it the last item in the screen's vertical stack — never absolutely positioned. Give that stack ~12 px bottom padding so the capsule clears the edge.

## Rules

- One primary intent per screen. Everything else is subordinate.
- The first 1–2 elements answer "where am I" and "what can I do here".
- Use the same title font size on every screen — titles must look uniform app-wide.
- Keep key actions reachable in the lower half for one-handed use.
- Touch targets need comfortable hit areas.
- Let the wrapper handle horizontal padding — don't add per-section padding.
- Use the wrapper's gap for spacing and bottom padding (same value as gap) for empty space — never spacer elements.