Slopless Design

nav.bento-floating-bar · Floating bar

A nav pattern from Bento Tech, drawn alone below with this design's tokens and sample copy. Used in this design on: every page, as the nav. Give the section root data-pattern="nav.bento-floating-bar". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

One bordered tile across the page: wordmark left, pill links centre, a ghost sign-in and a primary button right.

Slots

siteName, pages, cta2, cta

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

One bordered surface tile with the style radius: wordmark left, pill links centred (current page pill in `surfaceAlt`), a ghost "Sign in" (hidden on phones) and a small primary button right.

Northfold

Services
Work
About
Contact

Read case studiesStart a project