Slopless Design

nav.sketchbook-scribble-bar · Sketchbook scribble bar

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

Rule

Handwritten wordmark, underlined links and a small yellow button on one row over a wavy rule.

Slots

siteName, pages, cta

Tokens

bg #FBF8F0 · text #2A2722 · heading #1B1915 · accent #FFD43B · accent2 #C92A2A · Kalam / Figtree · radius 12px · space unit 8px (full list in design/tokens.json)

Section

vertical padding step 2

Pattern notes

One row on the paper: the wordmark in the handwriting face left, underline links (hand-drawn underline on the current page) in the middle, a small yellow primary button right, and a wavy hand-drawn rule under the bar. Links scroll sideways on phones.

Northfold

Services
Work
About
Contact

Start a project