Navigation

Settld has two navigation contexts: a glass-pill top nav for web/marketing surfaces, and a bottom tab bar for the mobile app. Both share the same frosted glass treatment and press state. The wordmark and link colors adapt dynamically to the surface they sit on.

Top nav — glass pill

On light surface
On dark surface

The glass pill gets stronger on scroll: start at rgba(251,248,240,0.72) blur 12px, transition to rgba(251,248,240,0.92) blur 20px when scrollY > 40. This makes the nav feel anchored, not floating.

The wordmark is the "settld" logotype in Bricolage Grotesque 700, lowercase. On a light surface it's --wm-teal (#2A9D8F). On a dark surface it switches to --s-paper. This swap happens at the same time the nav background changes — no additional transition needed.

Active nav link: ink fill, paper text. Never an underline. Never a pill that's a different color family — the active state is the darkest thing in the bar, which makes it feel like a physical tab in a folder.

PropertyRestingScrolled
Backgroundrgba(251,248,240,0.72)rgba(251,248,240,0.92)
Backdrop blurblur(12px)blur(20px)
Box shadow--shadow-md--shadow-lg
Transitionbackground 300ms ease-out, box-shadow 300ms ease-out

Tab bar — bottom nav (app)

⊞ Groups ◎ Activity ⇌ Balances ◷ You

The tab bar sits at the bottom of the screen, safe area inset above the home indicator on iOS. It uses the same frosted glass treatment as the top nav — the blur is stronger here (blur(16px)) because the tab bar floats above content.

Active tab: ink fill, paper text, border-radius 14px. Inactive tabs: transparent background, muted text. The transition is 140ms — fast enough to feel responsive, slow enough to not be jarring.

Unread indicator: a 7px coral dot, top-right of the icon, with a 1.5px paper border to prevent blending into dark content behind it. The dot sits on the icon itself, not on the tab-item container.

Tab icons are ASCII or Unicode glyphs, not SVG icons. If a glyph reads poorly, use a single-letter abbreviation inside a circle (G for Groups). Never import an icon library just for tab bar items.

PropertyActive tabInactive tab
Background--ink (#171513)transparent
Color--s-paper--ink-mute
Border radius14px14px (for hover)
Press statescale(0.95)scale(0.95)
Min touch target44×44px

Breadcrumbs

Breadcrumbs are minimal — Onest 14px, muted color, → separator. The current page is --ink weight 500 with aria-current="page". Parent links are --ink-mute with hover to --ink. The separator is --ink-line, non-interactive, aria-hidden.

Don't use breadcrumbs more than 3 levels deep. If you're at 4 levels, rethink the information architecture — Settld groups are shallow by design.

Section jumps (in-page nav)

Section jumps live in a right sidebar or above a content area for long-scrolling group detail pages. A 1px teal indicator bar grows at the left edge of the active link as the user scrolls into that section. The transition uses --d-med to match scroll velocity.

On mobile, section jumps collapse into a segmented control at the top of the content area. Never stack a section jump nav below a tab bar.

Usage

Do Use the top nav on marketing/web surfaces. Use the tab bar in the app. Never use both on the same screen.
Don't Don't add more than 4 items to the tab bar. The 4-item constraint is intentional — Settld's IA is flat.
Do Always show the wordmark in the top nav. It's the only brand anchor on marketing pages. On the app's in-session screens, you can omit it — the tab bar is persistent identity.
Don't Don't change the wordmark color to anything other than --wm-teal (light surfaces) or --s-paper (dark surfaces). The wordmark teal is a separate token from the UI teal — don't substitute.

Code

Top nav

<nav class="top-nav" aria-label="Main navigation">
  <a href="/" class="nav-wordmark" aria-label="Settld home">settld</a>
  <div class="nav-links">
    <a href="/groups" class="nav-link active" aria-current="page">Groups</a>
    <a href="/activity" class="nav-link">Activity</a>
  </div>
  <a href="/waitlist" class="nav-cta">Join waitlist →</a>
</nav>

/* Scroll enhancement */
window.addEventListener('scroll', () => {
  const scrolled = window.scrollY > 40;
  nav.style.background = scrolled
    ? 'rgba(251,248,240,0.92)'
    : 'rgba(251,248,240,0.72)';
});

Tab bar

<nav class="tab-bar" role="tablist" aria-label="App navigation">
  <a href="/groups" class="tab-item active" role="tab" aria-selected="true">
    <span class="tab-icon" aria-hidden="true">⊞</span>
    <span class="tab-label">Groups</span>
  </a>
  <!-- Add aria-label if badge count changes: "Activity, 3 unread" -->
  <a href="/activity" class="tab-item" role="tab" aria-label="Activity, 2 unread">
    <span class="tab-icon tab-badge" aria-hidden="true">◎</span>
    <span class="tab-label">Activity</span>
  </a>
</nav>