nav.tech-command-bar · Command bar

A nav pattern from Bento Tech, 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.tech-command-bar". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Monogram in 1–2, plain links in 3–8, a mono '⌘K Search' chip on surfaceAlt in 9–10, a small primary button in 11–12.
Slots
siteName, pages, meta, cta
Grid areas
logo 1-2 · links 3-8 · search 9-10 · cta 11-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #5E65E8 · accent2 #9256C9 · Geist / Geist · radius 20px · space unit 4px (full list in design/tokens.json)
Section
vertical padding step 2

Pattern notes

  • Monogram in 1–2, plain links in 3–8, a mono "⌘K Search" chip on surfaceAlt in 9–10 (hidden on phones), a small primary button in 11–12.
N
  • Services
  • Work
  • About
  • Contact
Start a project