nav.dot-status-bar · Status bar

A nav pattern from Dot Matrix, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="nav.dot-status-bar". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A phone status bar: wordmark left, numbered mono links in the middle, a mono date and a ring indicator beside a ghost pill right, inside one surface pill.
Slots
siteName, pages, date, cta
Tokens
bg #000000 · text #E6E6E6 · heading #FFFFFF · accent #D71921 · accent2 #FFFFFF · Doto / Space Grotesk · radius 24px · space unit 4px (full list in design/tokens.json)
Section
vertical padding step 3

Pattern notes

  • One surface pill the full width of the grid, like a phone status bar: wordmark left, numbered mono links (01 Product, 02 Pricing…) in the middle, and right a mono date and a red ring indicator (both hidden on phones) beside a small outlined pill.
Northfold
  • 01Services
  • 02Work
  • 03About
  • 04Contact

Apr 3, 2026

Start a project