Style guide
Northform design system
The colours, type, components, spacing and motion that make up every Northform page. Edit a style or component here and it updates across the site.
Colours
Colour tokens
Every colour on the site comes from these tokens. Change a token and every element that uses it updates.
Brand
Red
Brand/Red
#DE322D
Neutral
Ink
Neutral/Ink
#0A0A0A
Grey
Neutral/Grey
#5D5D5D
Muted
Neutral/Muted
#9D9D9D
Line
Neutral/Line
#E6E6E6
Surface
Neutral/Surface
#F3F3F3
White
Neutral/White
#FFFFFF
Dark
Card
Dark/Card
#1C1C1C
Line
Dark/Line
White at 15%
Fill
Dark/Fill
White at 10%
Typography
Type scale
Geist for everything, Geist Mono for labels and metadata. Sizes step down automatically on tablet and phone.
Page Title
Display / H1
Geist Medium · 96 / 72 / 46 px · 1.1 · −4.2%
Shaping brands for the next generation
Title Large
Heading 2
Geist Regular · 64 / 52 / 38 px · 1.0 · −1.5 px
We build considered digital brands
Title Medium
Heading 3
Geist Medium · 32 / 28 / 24 px · 1.25 · −1 px
Brand, mobile and web design for startups
Price
Price
Geist Semibold · 32 / 30 / 28 px · 1.25
$1,490 /mo
Title Small
Heading 4
Geist Medium · 24 / 22 / 20 px · 1.3 · −1.2 px
Brands launched
Title XS
Quote
Geist Regular · 20 px · 1.3
They cut through the noise and gave our brand a real point of view.
Body Large
Lead paragraph
Geist Regular · 18 px · 1.6
Everything you need to know about our process, pricing and how we work together.
Body
Paragraph
Geist Regular · 16 px · 1.6
We help ambitious teams launch, grow and stay ahead with design that earns attention.
Body Small
Small
Geist Regular · 14 px · 1.5
Ideal for early stage founders.
Button
Button
Geist Medium · 16 px · 1.6 · −0.5 px
Book a consultation
Navigation
Nav link
Geist Regular · 16 px · 1.6 · −0.5 px
Studio Work Services Pricing
Accent Text
Mono label
Geist Mono Regular · 16 px · uppercase
Brand strategy
Subtitle
Tag label
Geist Mono Medium · 14 px · uppercase
Who we are
Components
Component library
Reusable building blocks. Each one has variants and hover states, and every instance on the site updates when you edit the source.
Button · Primary, Secondary, Dark
Tag · Grey, White
Who we are
Pricing plans
Arrow Link · Underline, Plain
Stat
140+
Brands launched
From first time founders to listed companies.
Info Card · Light, Dark
Day 01
Kickoff
We align on goals and agree on a prioritised plan.
Day 01
Kickoff
We align on goals and agree on a prioritised plan.
Feature Card
Brand systems
Logos, type, colour and guidelines.
FAQ Item · Closed, Open
What services does your studio offer?
What services does your studio offer?
Brand strategy, identity, web design and development, and product design for mobile and web.
Project Card
Team Card
Ava Reyes
Creative Director
Testimonial Card
Voltaic
They cut through the noise and gave our brand a real point of view.
Maya Lindqvist
CEO, Voltaic
Logo
Voltaic
Lumora
Archway
Service Row · hover to reveal
Spacing
Spacing and radius
A small set of values keeps every layout consistent.
8px
12px
16px
24px
32px
48px
64px
80px
120px
160px
44px
Pills and buttons
24px
Sections and hero cards
16px
Cards and images
12px
Inputs and avatars
8px
Thumbnails
Motion
Motion and interaction
Subtle, physical motion that supports the content instead of competing with it.
01
Scroll reveal
Sections fade up 40 px as they enter the viewport, with a 0.9 s spring and short staggers between cards.
02
Hover
Buttons darken and their arrow turns 45°. Cards zoom their image, links slide their arrow and nav links turn red.
03
Marquees
Client logos and the studio gallery scroll continuously and pause on hover.
04
Toggles
The pricing switch, FAQ items and the mobile menu animate between states with a 0.4 s spring.