Navigation

Dimensions

Heights and paddings for every tab bar variant.

Typography

Each platform uses its own type system for tab labels — never override.

Color styles

Token-level color mapping for each state and surface.

iOS · Glass (light)

Android · Material 3 (light)

Spacing

Padding around the bar and between elements.

Motion

Tab transitions are deliberately soft. The bar never moves; the active state animates between tabs.

Three to five tabs — never more

Each tab is a top-level mental model. With six or more, tabs stop being navigable destinations and become a list. If you need more, the seventh idea isn't a top-level destination.

Never mix iOS and Android styles in one app

If you're shipping iOS, pick Glass or Classic. If you're shipping Android, use M3. Mixing platform languages in the same product makes it feel like a hybrid wrapper.

Always show labels

Tab bars in Cloaked never run icon-only. Even when the icon is unambiguous, labels reduce the cognitive load of scanning and help first-time users build a mental map of the app.

The bar is always present at the root

The tab bar is the spine of the app. It should be visible on every root screen — Home, Exposure, Guard, Phone, Wallet — so users always have a way back.

Hide the bar inside flows, not on screens

When the user enters a focused, multi-step flow (signup, settings deep-dive, payment) hide the bar to remove distraction. Don't hide it on a regular detail screen — they need to be able to bail out.

Use the notification dot for new content, not counts

The dot says "something happened" — it doesn't say "five things happened." Save count badges for inbox-style screens (Exposure list) where the number meaningfully changes how the user reads the screen.

Accessibility

Tab bars need to work for keyboard, screen reader, and switch users — not only for thumbs.

• Each tab has role="tab" and aria-selected; the bar has role="tablist".
• Active tab announces as "selected" — VoiceOver, TalkBack, NVDA all read this from the role.
• Hit target ≥ 44 × 44 pt (iOS HIG) or 48 × 48 dp (M3) — already enforced by tab heights.
• Color contrast for default (inactive) ink: 4.5:1 against the bar surface, both light and dark.
• Labels translate. Never hardcode them inside the icon SVG.
• The notification dot has a redundant text equivalent in the accessibility label ("Exposure tab, 1 new alert").

React Native

The <TabBar> component handles platform detection — drop it into your root navigator and it picks Glass or Material 3 automatically.

// Root navigator
<TabBar
  platform="auto"          // "ios" | "android" | "auto"
  glass={true}             // iOS only — opt-in to Liquid Glass
  active="home"
  onChange={(id) => navigate(id)}
  tabs={[
    { id: 'home', label: 'Home', icon: 'house' },
    { id: 'exposure', label: 'Exposure', icon: 'shield', notify: true },
    { id: 'guard', label: 'Guard', icon: 'phone-shield' },
    { id: 'phone', label: 'Phone', icon: 'phone' },
    { id: 'wallet', label: 'Wallet', icon: 'card' },
  ]}
/>

Web (HTML)

For the dashboard top bar, use a <nav> with role="tablist" and a single active link.

<nav class="top-nav" role="tablist">
  <a role="tab" aria-selected="true"  href="/">Home</a>
  <a role="tab" aria-selected="false" href="/exposure">Exposure</a>
  <a role="tab" aria-selected="false" href="/guard">Guard</a>
</nav>

Props

• platform — "ios" | "android" | "auto". Auto-detects via Platform.OS.
• glass — boolean. iOS only. Opts into iOS 26 Liquid Glass material.
• active — string. The id of the currently selected tab.
• onChange(id) — function. Fires when a tab is pressed. Returns the tab id.
• tabs — array. Each item: { id, label, icon, notify? }.
• appearance — "light" | "dark" | "auto". Defaults to "auto".
• safeAreaInsets — { bottom: number }. Override if your nav controller doesn't provide them.
• onLongPress(id) — function. Optional secondary action (deep link, scroll-to-top).

CSS tokens

For the web nav, the same tokens used by buttons.css and forms.css apply.

/* Surface */
--nav-bg: var(--bg-canvas);
--nav-border: var(--border-default);

/* Item */
--nav-item-fg: var(--fg-subtle);
--nav-item-fg-active: var(--fg-default);
--nav-item-accent: var(--accent-primary);