01 · Template / Style guide
Everything on this page
is the real thing.
Not a mockup of the design system. Every swatch, type sample and button below uses the same colour tokens, text styles and components as the other pages. Change one in Framer and this page, and every page, follows.
02 · Start here
Start here.
Six things to know.
A short guide for buyers. Read it once, then use the rest of this page as the reference for every colour, style and component in the template.
01
Colours
Every colour is a style under Assets › Colors, with a light and a dark value. Change a style once and every page follows; the site switches with the visitor’s system theme.
02
Text styles
All type uses the Northwind/ text styles, each with desktop, tablet and phone sizes. Change a font in the style, not on individual layers.
03
Header and footer
Both live in the Northwind layout template. Select the Header or Footer and pick a variant (shown further down this page). Use the matching Phone or Tablet variant on smaller breakpoints.
04
CMS
Services, Case Studies, Industries, Team and Insights are CMS collections. Edit items in the CMS and the lists, cards and detail pages update on their own.
05
Forms
Contact, Book a call, Account, Coming soon and the newsletter use Framer forms. Select each form and set Send To (email, webhook or a connected tool) before you publish.
06
Publishing
Set the site title, description and social image in Site Settings, connect your domain, remove demo pages you don’t need, then press Publish.
03 · Color
Graphite and paper,
one signal, used sparingly.
Dark sections sit on near-black graphite, light sections on warm paper; neither end is pure black or white. Accents come from Sanzo Wada’s combination 209: Salvia Blue, Yellow Orange and Ivory Buff. Emphasis on paper is ink. Neutrals live under Northwind/, accents under Wada 209/ in the colour styles panel.
Graphite (dark sections)
Ink
Northwind/Ink
#07080A
Page background, dark
Night
Northwind/Night
#050608
Alternate dark sections
Near Black
Northwind/Near Black
#0B0D11
Cards, text on paper
Tile
Northwind/Tile
#12151A
Raised tiles
Text
Northwind/Text
#F1F2EE
Headlines on dark
Text Muted
Northwind/Text Muted
rgba(241,242,238,.64)
Body on dark
Text Faint
Northwind/Text Faint
rgba(241,242,238,.42)
Labels on dark
Line
Northwind/Line
rgba(255,255,255,.10)
Dividers on dark
Line Strong
Northwind/Line Strong
rgba(255,255,255,.18)
Borders, outlines
Salvia Blue
Wada 209/Salvia Blue
#97ACC8
Active states, signal
Paper (light sections)
Paper
Northwind/Paper
#F4F4F2
Light sections
Paper Muted
Northwind/Paper Muted
#5E6168
Body on paper
Paper Line
Northwind/Paper Line
rgba(11,13,17,.12)
Dividers on paper
Emphasis
Northwind/Emphasis
#0B0D11
Links on paper
04 · Type
One grotesk, one serif accent,
one mono voice.
Inter Tight carries everything; Instrument Serif italic is the accent inside headlines (never a whole line); Fragment Mono is for labels and data. Every style has desktop, tablet and phone sizes built in.
Northwind/Display
Inter Tight 600 · 112 / 76 / 56
Northwind/Page Title Serif
Instrument Serif italic · 112 / 76 / 56
Northwind/H2
Inter Tight 600 · 76 / 56 / 44
Northwind/H2 Serif
Instrument Serif italic · 76 / 56 / 44
Northwind/H3 L
Inter Tight 500 · 40 / 32 / 28
Northwind/H3
Inter Tight 500 · 26 / 24 / 22
Northwind/Lead
Inter Tight · page header lead
Northwind/Body L
Inter Tight 400 · 19 / 18 / 17
Northwind/Body
Inter Tight 400 · 15
Northwind/Quote
Instrument Serif · 52 / 40 / 30
Northwind/Mono Label
Fragment Mono 400 · 11 · uppercase
Sans · UI & headlines
Aa
Inter Tight · 400–700
Serif · accent
Aa
Instrument Serif · Italic
Mono · data
Aa
Fragment Mono · 400
05 · Components
The parts that
repeat most.
Each of these is a Northwind/ component. Edit the component once and every instance across the template updates; set label, link and arrow per instance.
Northwind/Case Card
Northwind/Service Row
Northwind/FAQ Item · open and closed
01
How is Northwind different from hiring an in-house AI team?
You get a team that has already shipped production systems and knows where the gap between demo and production is, without the months it takes to hire and ramp.
02
Do you work with fixed budgets?
06 · Spacing & radius
One grid,
used everywhere.
48 / 32 / 16 px
160 / 120 / 96 px
12–16 px
10 px
20–24 px
9
Arrow buttons
10
Inputs, chips in cards
16
Cards on paper
20
Cards on dark, panels
99
Pills, tags
07 · Headers
Five headers,
one component.
Every header is a variant of the same Northwind/Header component. Select the header in the layout template and choose a variant; on tablet and phone use its Phone variant. Mega is the default.
Mega · Default · mega menus, announcement, compact pill on scroll
Pill · Floating rounded bar
Split · Logo centred, links either side
Minimal · Logo and menu button, full-screen menu
Announce · Thin announcement strip above a standard bar
08 · Bars
Three bars,
used sparingly.
Northwind/Bar comes as Announcement, Dismissible and Floating. None is placed on the live pages: drop one above your content, or pin the floating bar to the bottom of the viewport.
Announcement · Top strip with a link
Dismissible · Close button hides it
Floating · Card pinned to the bottom of the viewport
09 · Footers
Five footers,
same links.
Every footer is a variant of Northwind/Footer. Swap it in the layout template; each comes with Tablet and Phone variants. Wordmark is the default.
Wordmark · Default · big wordmark, newsletter, four link columns
Columns · Brand, newsletter and link columns
CTA · Call-to-action band on top of the columns
Minimal · One line
Centered · Brand, links and legal, centred
10 · Start
Read this before
you touch a page.
Swap fonts, colours and content in the styles panel and CMS. This page is the live reference next to them.