# App Bar — Build Pack

**Canonical:** Chrome / App Bar · **ID** `app-bar`
**Source:** Sketch `WDS Design System v4.0` › page `App Bar` (artboards `App Bar - LM`, `App Bar - DM`)
**Modes:** Light + Dark · **Status:** Ready

The full-width top navigation bar: workspace logo left, primary navigation and Sign In right. Brand-tinted chrome; Rose is used only on the interactive control.

## Structure

Full-width bar, 80px tall, page top. Two zones:

- **Left:** workspace logo, flush to the left edge, vertically centred.
- **Right:** primary nav labels (Home · Events · Photos · Videos) then Sign In, right-aligned, vertically centred.

## Tokens (bind, never hardcode)

| Element | Light | Dark |
|---|---|---|
| Bar surface | `primary_200` | `primary_950` |
| Nav labels | `text_light_text_1_lm` | `text_dark_text_1_dm` |
| Sign In (interactive) | `base_colours_accent` | `base_colours_accent` |
| Logo | LM logo mark | DM logo mark |

The bar is brand-tinted (Primary scale), not a neutral Surface Scale grey. Accent (Rose) appears only on Sign In — the single interactive control.

## Type roles

| Slot | Role | Metrics |
|---|---|---|
| Nav items | `Title / base` | Poppins 16 / 24 |
| Sign In | `Title / base` | Poppins 16 / 24 (Accent colour override) |

Roles and metrics are owned by the Typography Role Registry.

## Spacing

| Element | Position | Size |
|---|---|---|
| Bar | Full-width, page top | 1920 × 80 |
| Logo | Flush left (x 0), centred | 270 × 80 |
| Nav row | Right-aligned, centred (y 28) | h 24 |
| Nav item gap | Between items | ~35 |
| Sign In gap | Before Sign In | 30 |
| Right margin | Sign In to edge | 44 |

Full-bleed by design — the bar is **not** inset to the 1376 content grid the page body uses. Logo flush left, nav 44px from the right edge.

## States

- **Active nav item** — handled by state, not a separate colour token (do not recolour the label to Accent).
- Sign In is the only Accent element in the resting bar.