Slopless Design

nav.athletic-stripe-bar · Stripe bar

A nav pattern from Athletic Sport, 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.athletic-stripe-bar". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

Boxed wordmark in 1–3, italic uppercase links in 4–9, a primary button in 10–12, closed by a 4 px stripe and a 1 px stripe.

Slots

siteName, pages, cta

Grid areas

logo 1-3 · links 4-9 · cta 10-12 (12-column grid, 1-based inclusive spans)

Tokens

bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #FF3B00 · accent2 #00A1BA · Barlow Condensed / Barlow · radius 0px · space unit 8px (full list in design/tokens.json)

Section

vertical padding step 2

Pattern notes

Boxed wordmark (4 px border) in 1–3, italic caps links in 4–9 (scroll horizontally on phones), a small primary button in 10–12. Two stripes close the bar: 4 px then 1 px, 4 px apart.

Northfold

Services
Work
About
Contact

Start a project