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.

1. 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".

1. 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.

1. 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.

1. 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).