Northwind design system
From the Northwind template.
Included with Everything
Colour
Type
- Inter Tightdisplay · 400, 500, 600, 700 · SIL Open Font License 1.1
- Fragment Monomono · 400, 700 · SIL Open Font License 1.1
- Instrument Serifaccent · 400 · SIL Open Font License 1.1
- Display135 / 64px · 600Find your function. See what’s already working.
- H1121 / 64px · 600Find your function. See what’s already working.
- H272 / 44px · 600What’s actually working right now.
- H337 / 28px · 500The questions the proof doesn’t answer.
- Eyebrow15 / 15px · 50001
- Body16 / 16px · 400Northwind builds agents, RAG, document AI and forecasting systems that hold up after launch.
Components
NorthwindProductPricingAboutBuy Northwind $79
EN
Learn more
Book a readiness call
01
The questions the proof doesn’t answer.
Northwind builds agents, RAG, document AI and forecasting systems that hold up after launch.
Section headline
A website template for AI consultancies and agencies: services, case studies, industries, approach and a book-a-call page.
Shape and motion
- sm · 10px
- md · 14px
- lg · 22px
- pill · 9999px
- shadow sm
- shadow md
- out ·
cubic-bezier(.22,1,.36,1) - fast · 260ms
- base · 450ms
- slow · 1100ms
Exports
- DESIGN.md
DESIGN.md22 KBEverything - CSS variables
tokens.css5 KBEverything - Tailwind v4
tailwind.css6 KBEverything - shadcn/ui theme
shadcn.css5 KBEverything - Figma variables
figma-variables.json27 KBEverything - Webflow variables
webflow-variables.json9 KBEverything - W3C tokens (JSON)
tokens.json19 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("northwind") with the MCP server.
- Source
- Northwind template
- Palette
- Sanzo Wada 209: Ivory Buff, Yellow Orange, Salvia Blue
- Fonts
- Inter Tight (OFL 1.1), Fragment Mono (OFL 1.1), Instrument Serif (OFL 1.1)
- Themes
- Dark, plus a derived light
- Contrast
- Text 7.45:1 · muted 3.23:1
Inside DESIGN.md
- At a glance
- Setup
- Colour
- Typography
- Layout and spacing
- Shape and depth
- Motion
- Components
- Voice and copy
- Do and don’t
- Tokens