Slopless Design

nav.isometric-line-bar · Isometric line bar

A nav pattern from Isometric Line, 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.isometric-line-bar". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

One row on a bottom hairline: boxed wordmark left, plain links centre, a ghost secondary and a small primary button right.

Slots

siteName, pages, cta2, cta

Tokens

bg #F6FBFF · text #192028 · heading #091018 · accent #FF5A2C · accent2 #00ABC9 · Space Grotesk / Space Grotesk · radius 2px · space unit 4px (full list in design/tokens.json)

Section

vertical padding step 2

Pattern notes

One row over a 1.5 px bottom hairline: boxed wordmark (1.5 px outline, square corners) left, plain links centre (scrolling on phones), a ghost secondary (hidden on phones) and a small primary button right.

Northfold

Services
Work
About
Contact

Read case studiesStart a project