# Tab Metaphors

> Design multi-tab app screens (fitness / analytics / productivity / social) so each tab uses a distinct structural layout instead of just rotating accent colors. Use when the designer asks to "design a tab bar app", "make 4 screens for a fitness app", "Home / Insights / Profile screens", or any multi-screen app where the screens share chrome but serve different content kinds. Prevents the "four templated screens that feel fake" trap.

- Skill: `egoisutolabs/tab-metaphors` (Agent Skill)
- Install (CLI): `npx skillmds@latest add egoisutolabs/tab-metaphors`
- Raw SKILL.md: https://api.skillmd.com/api/skills/egoisutolabs/tab-metaphors/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Data & Analytics
- Author: egoisutolabs (https://skillmd.com/u/egoisutolabs)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/egoisutolabs/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

| Tab     | Metaphor          | Why                                                   |
|---------|-------------------|-------------------------------------------------------|
| Home    | Hero number       | "Did I hit my goal today?" is a single number        |
| Log     | Calendar heatmap  | Shows the rhythm — streaks, gaps, consistency        |
| Insights| Stacked charts    | Trends only make sense over time, not in a number    |
| Profile | Collection grid   | Badges and achievements are visually heterogeneous   |

## Typical 4-tab productivity mapping

| Tab     | Metaphor          |
|---------|-------------------|
| Today   | Timeline grid     |
| Inbox   | Collection grid (list variant) |
| Focus   | Hero number (timer + session count) |
| Review  | Stacked charts (completion rate, etc.) |

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