Northfold

About
Contact

Brand & product studio

Booking projects from June 2026

We make complicated companies simple to choose

Start a project

The approach

The studio

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

We hand over everything — source files, a living brand system and a website your team can edit without calling us.

Booking projects from June 2026

Fieldstack — website

Why it works

What we do

Our team is eleven people: strategists, writers, designers and two engineers who ship what the others draw.

01

Positioning

Find the one sentence your best customers already believe.

02

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

03

Websites

Fast, editable sites built on the CMS your team already knows.

04

Sales enablement

Decks, one-pagers and demos your reps actually use.

05

Product naming

Names that survive trademark search and a noisy trade show.

06

Brand governance

Guidelines as a living site, not a forgotten PDF.

Gallery

Selected work

01

Corvid Robotics — identity

02

Fieldstack — website

03

Tidewater Labs — naming

04

Arklow — trade show

05

Mosswood Bio — packaging

06

Kestrel Freight — fleet livery

07

Corvid Robotics — annual report

08

Fieldstack — product launch

“Demo requests doubled in the quarter after launch. That paid for the project.”

James Okafor

CMO, Fieldstack

Lisbon · London

Have a hard thing to explain?

Most projects run ten to sixteen weeks. We agree the scope and price up front and say so early if anything changes.

Our process

Slopless Design · reference render

Everything above this panel is the design

Design code sd1.fZTBDoIwEET_hTMaIRrD0Qt_4aEgAaIBwsbEz_dty9aaGG-EbWe7szOjBzdzY7lmnu-jDBnF7Hwp6qL2n4GU1skDF6iBI1Ff_0Dcl6e8qHJAfdvETjAcadnaEBXTpLZXj6pKwtutaqZO5_gBaJTaNUxHlpDYTiGNeavGmJKuVVOrVGwLdgbRsg8K6Vas2C1jv7plCFml_dlOLL6IJxQiyrcy--9tfotWuTEOUS47gpgUcYoctm0n5NlIu4683qNXAV0F8CFsZdQFIXeYTadHM7EBQ8w9Yr1yORVCeThWmxjeApUF (Classical Bookish), drawn by the Slopless preview renderer with sample copy. Use it as a visual guide while building: design/DESIGN.md and design/tokens.json are the source of truth. Every section root carries data-pattern with its pattern id.

Viewport

Without ?viewport= the render follows the window width once scripts run. Screenshot at 1440 px with ?viewport=desktop and at 375 px with ?viewport=phone.

Pages

Tokens at a glance

Palette: monochrome, light · bg #FDF9F4 · text #241E16 · accent #7C1C1D
Type: Libre Caslon Text / Libre Caslon Text · scale 1.25, base 19px
Grid: 12 columns, gutter 32px, max 1160px · section space 96px
Shape: radius 0px · border double 3px · shadow none · motion none

Sections on the home page (/), top to bottom

Each link shows that pattern alone with these tokens, beside its rule, grid areas, slots, notes and layout tree.

nav.bookish-running-head Running head · nav, on every pageThe site name centred in small caps like a book's running head, plain links centred under it, a double rule beneath.
hero.fullbleed-framed Full-bleed in a mat frame · heroThe photo fills the viewport inside an even mat of page colour (one space step 3 on all sides); four labels sit in the mat's corners: eyebrow top-left, meta top-right, headline bottom-left, CTA bottom-right.
content.bookish-marginalia Text with marginalia · contentRunning text on the 3–9 measure (centred small-caps label, h2, a lead with a three-line drop cap, body), and in the outer margin 10–12 an italic note above a small bordered plate with its italic caption.
features.bookish-numbered-sections Numbered sections · featuresSmall-caps label, italic h2 and an italic muted note on 1–4; on 5–12, 4–6 sections two per row, each under a 1 px rule: § number in small caps, italic title at step 2, a paragraph.
gallery.bookish-plates Plates · galleryA centred small-caps label and italic h2, then 4 or 8 bordered grayscale plates four per row across the page, each with a small-caps roman plate number and an italic caption.
testimonial.bookish-epigraph-quote Epigraph quote · testimonialA fleuron, then one quote in italic at step 3 centred on a narrow measure, the attribution in small caps after an em dash, the source in italic.
cta.bookish-ex-libris Ex libris · ctaA bookplate: one double-bordered, unfilled panel centred in 3–10, padded 48 px with 32 px section padding, holding a small-caps label, a fleuron, an italic step-5 h2, a short line and the primary button, all centred.
footer.bookish-colophon Colophon · footer, on every pageA centred colophon: fleuron, an italic paragraph naming the typefaces and the press, plain links, and the legal line in small caps.

More

Spec bundle (JSON): DESIGN.md, tokens.json and layout.json for this code
Classical Bookish style page: principles, do and don't, every pattern live
Open this design in the picker

To see the user's own copy, append the #b=… part of their picker link to this URL. It is read in the browser only and never sent to the server.