Ready
Component · Chrome
↓
Download build packReady to build. Markdown spec to prompt and build from.
Sketch docWDS Design System v4.0
Sketch pageApp Bar
App Bar
The full-width top navigation bar: workspace logo left, primary navigation and Sign In right.
01
Details
Container · Full-width (1920 × 80 · logo left, primary nav right)
TierComponent
FamilyChrome
BucketApp Bar (primitive · full-width · 80px)
VariantBase
Canonical nameChrome / App Bar
IDapp-bar
02
Component Anatomy
| # | Layer | Colour | Data | Notes |
|---|---|---|---|---|
| 1 | Background Container | Primary 200 / 950 | — | The full-width bar surface, 80px tall. Brand-tinted: Primary 200 in Light, Primary 950 in Dark. |
| 2 | App Bar Logo | Logo | Workspace logo | The workspace lockup, flush left; its own LM/DM symbol so the mark inverts with mode. |
| 3 | Nav items | Text 1 | Nav labels | Home · Events · Photos · Videos, right-aligned and evenly spaced. Non-interactive colour (Text 1); the active item is handled by state, not a separate colour. |
| 4 | Sign In | Accent | Auth action | The one interactive label in the bar, so it wears Accent (Rose), mode-agnostic. |
Notes
- Brand-tinted, not neutral. The bar uses Primary tints (200 / 950) rather than a Surface Scale grey, so it reads as brand structure in both modes.
- Rose is interaction-only. Only Sign In carries Accent; every other element is neutral chrome.
03
Spacing
| Element | Position | Size |
|---|---|---|
| Bar | Full-width, page top | 1920 × 80 |
| Logo | Flush left (x 0), vertically centred | 270 × 80 |
| Nav row | Right-aligned, vertically centred (y 28) | h 24 |
| Nav item gap | Between adjacent items | ~35 |
| Sign In gap | Before Sign In | 30 |
| Right margin | Sign In to bar edge | 44 |
Notes
- Full-bleed by design. The bar is not inset to the 1376 content grid the page body uses; the logo sits flush left and the nav ends 44px from the right edge. This is intentional chrome behaviour, not drift.
- Nav labels are vertically centred in the 80px bar; Sign In sits marginally tighter (30 vs ~35) to read as the separated action.
04
Typography
Notes
- Nav items and Sign In use one role: Title / base (Poppins 16 / 24). Sign In takes the same role with an Accent colour override, not a different type style.
- Metrics are owned by the Typography Role Registry; the page mirrors them.
05
Examples
Notes
- Examples coming soon.
Chrome · App Bar
The full-width top navigation bar, brand-tinted, with the interactive Sign In in Accent. Details mirror the live Sketch source (WDS Design System v4.0).
The full-width top navigation bar, brand-tinted, with the interactive Sign In in Accent. Details mirror the live Sketch source (WDS Design System v4.0).