Tab Metaphors

Tab Metaphors (Mercury)

A real app's tab bar says "here are different kinds of information", not "here are the same screen in different colors". The rookie mistake is building four screens that each have a hero pill, a scroll list, and a color accent — and wondering why it reads as a prototype instead of a product.

Cohesion comes from shared chrome (status bar, type scale, base background). Identity comes from the structural spine: each tab picks a layout metaphor that maps to its content.

Metaphor catalog

Pick one per tab. These are the patterns that ship in real apps:

• Hero number — one enormous stat with a delta and a context line. Use for: today-view, dashboard landing, "what matters right now".
• Calendar heatmap — grid of day cells colored by intensity. Use for: log history, contribution graphs, streak tracking.
• Timeline grid — vertical list of time-stamped events, each a card or row. Use for: feeds, activity history, session logs.
• Stacked charts — one or two primary charts (bar, line, donut) with small-multiple breakdowns below. Use for: insights, analytics, trends.
• Collection grid — 2- or 3-column grid of tiles (badges, achievements, items). Use for: profile achievements, saved items, libraries.
• Detail/hero composition — large hero image or media block with meta rows below. Use for: now-playing, article view, workout-of-the-day.

Typical 4-tab fitness/health mapping

Typical 4-tab productivity mapping

What every tab must share

Keep these identical across all tabs — this is what makes the app feel like one product:

• Status bar (time, signal, battery) — top 44pt
• Page title position and type size
• Body type scale (size, weight, color)
• Base background color (+ any ambient depth effect, applied once globally)
• Tab bar (icons + labels, active-state treatment, home indicator) — bottom 83pt on iPhone
• Spacing rhythm (16 / 24 / 32)

What each tab varies

• Layout spine (which metaphor above)
• Primary typography hierarchy — hero number tab uses a 72pt number; charts tab uses chart labels; heatmap tab uses day-of-week headers
• Color accents — but only after the spine is distinct. Color is the last 10%, not the first 90%.
• Icon treatment per content category — a food log icon is warm-hued, a workout icon is cool-hued, an achievement icon is gold. Don't use one accent color for every icon.

Workflow when building 4 screens

1. Check the bridge (ping).
2. Build the shared chrome first as a component set: status bar, tab bar, base background. One component set on a "Components" page.
3. Decide the metaphor per tab before creating any frame. Write the mapping explicitly ("Home=hero, Log=heatmap, ..."). Don't skip this — picking metaphors inside the build loop is where you revert to "same screen, different color".
4. Create each tab's frame using mcp__mercury__create kind:"frame", 390×844 iPhone size, place the shared chrome instances, then build the metaphor-specific content.
5. Verify visually between tabs. Export each frame with mcp__mercury__export_node and look at them side-by-side. If any two feel like siblings instead of cousins, the metaphor is leaking.
6. Add ambient depth last (see the ambient-depth skill) — one or two glows per tab, placed to complement the spine, not to hide it.

Anti-patterns

• Copy-paste the Home screen and recolor. Reads as fake.
• Every tab has a hero pill at top. Only one tab should — the one whose metaphor is "hero number".
• Every icon is the brand accent color. Category-specific coloring is what makes the app feel lived-in.
• Every tab is a vertical scroll list. At least one tab should break vertical rhythm (grid, chart, heatmap).