Design System

Blocks · Marketing

Landing-page section blocks — heroes, features, stats, testimonials, pricing, FAQ, CTA, navbars, footers — each composed only from the kit components, over mock fixtures. Palette, not product: nothing here reaches a member surface.

navbar-simpleButton · Badge · built

A top nav bar — brand left, links center, sign-in + primary CTA right.

Northwind
navbar-centeredButton · built

A centered-brand nav — links split left and right of a centered wordmark.

Northwind
hero-centeredBadge · Button · built

A centered hero — eyebrow badge, large headline, subhead, two CTAs.

New · v2 is live

Build surfaces that can’t drift

One closed ladder of components, blocks, and templates — assembled server-side, honest by default, fast everywhere.

hero-splitButton · built

A two-column hero — copy and CTAs left, a product preview frame right.

Ship the whole page, not just the parts

Components compose into blocks, blocks fill templates, templates become pages — one system, end to end.

product preview
hero-waitlistInput · Button · built

A hero with an inline email capture — headline, subhead, request-access form.

Join the early access list

Be first when the next wave of blocks lands. No spam — one note when it ships.

2,300 builders already on the list.

logo-wall(typographic) · built

A social-proof strip — "trusted by" over a wrapped row of customer wordmarks.

Trusted by teams at

LoomfieldCartographerKelvinHalcyonMeridianVantage
features-grid(icon tiles) · built

A three-column feature grid — icon, title, and one-line body per feature.

Everything the page needs

A kit that carries its own discipline, so quality is the default and not the exception.

Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

Truth-first

Numbers re-execute from their source. A claim never reads stronger than its evidence.

Fast everywhere

Pure server rendering, zero client weight on the critical path, instant first paint.

Themeable

One committed token set drives light and dark — no runtime theme thrash.

Accessible

Native controls, real focus states, keyboard paths — accessibility is the default.

Deterministic

The same input yields the same bytes, so drift breaks the build and never ships quietly.

features-alternatingBadge · built

A media-and-copy feature row — a preview frame beside a titled checklist.

feature detail
Composition

Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

  • Numbers re-execute from their source. A claim never reads stronger than its evidence.
  • Pure server rendering, zero client weight on the critical path, instant first paint.
  • One committed token set drives light and dark — no runtime theme thrash.
stats-inline(typographic) · built

A four-up metric band — big number, label, and a small qualifying hint each.

99.98%
Uptime
trailing 90 days
48ms
p95 render
server-side
12k+
Teams
active this month
4.9/5
Rated
across 2,300 reviews
stats-with-context(bordered cells) · built

A stats block with a framing headline beside a grid of bordered metric cells.

Measured, not asserted

Every number on this page re-executes from its source. When it can’t, it says so.

99.98%
Uptime
48ms
p95 render
12k+
Teams
4.9/5
Rated
testimonial-singleAvatar · built

A single centered pull-quote with the speaker's avatar, name, and role.

“We replaced three tools with one surface and shipped in a week. The team stopped arguing about layout and started building.”
MO
Maya Ortiz
Head of Product, Loom­field
testimonial-gridCard · Avatar · built

A three-column testimonial grid — one quote card per customer.

Loved by the teams who ship

“We replaced three tools with one surface and shipped in a week. The team stopped arguing about layout and started building.”

MO
Maya Ortiz
Head of Product, Loom­field

“The honesty defaults caught two dashboards that were quietly rounding revenue up. That alone paid for the year.”

DP
Devin Park
VP Eng, Cartographer

“It feels like a design system that actually enforces itself. Nothing half-built ever reaches our users.”

AN
Aïsha Nouri
Design Lead, Kelvin
pricing-tiersCard · Badge · Button · built

A three-tier pricing table with a highlighted popular plan and feature lists.

Simple, honest pricing

Start free. Upgrade when the team does. No usage traps.

Starter

For a first surface.

$0/mo
  • 1 workspace
  • Community support
  • Core component kit

Team

Popular

For a growing product.

$29/mo
  • Unlimited workspaces
  • Priority support
  • All blocks & templates
  • Audit trail

Scale

For the whole org.

$99/mo
  • Everything in Team
  • SSO & SCIM
  • Dedicated success
  • Custom SLAs
faq-accordionAccordion · built

A frequently-asked-questions block as a native disclosure accordion.

Questions, answered

How is this different from a component library?

The library is the floor. Here the whole page — components, blocks, templates — is one closed ladder, so a surface cannot drift from the system without breaking the build.

Can I bring my own theme?

Yes. One committed token set drives everything; point it at your palette and every surface re-derives, light and dark, with no per-component overrides.

Does it work without JavaScript?

The critical path is pure server-rendered HTML. Interactive islands hydrate progressively, but the page is legible and navigable before a single byte of JS loads.

Is there a free tier?

The Starter plan is free forever for a single workspace, with the full core kit and community support.

cta-bandButton · built

A full-width primary-colored call-to-action band with two actions.

Ready to build a page that can’t lie?

Start with the free tier and ship your first honest surface today.

cta-newsletterInput · Button · built

A newsletter sign-up CTA — copy beside an inline email subscribe form.

One note when something ships

New blocks, templates, and the occasional deep-dive. Never more than monthly.

banner-announcementBadge · built

A slim full-width announcement banner with an inline link-out.

NewTemplates are live — assemble a full page in minutes.See what’s new →
hero-mediaButton · built

A centered hero above a wide video/media placeholder frame.

See the whole system at a glance

One canvas, every surface — watch a page assemble itself from the kit.

▶ product walkthrough
bento-features(bento grid) · built

An asymmetric bento grid of feature cells at mixed spans.

A kit with opinions

Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

Truth-first

Numbers re-execute from their source. A claim never reads stronger than its evidence.

Fast everywhere

Pure server rendering, zero client weight on the critical path, instant first paint.

Themeable

One committed token set drives light and dark — no runtime theme thrash.

feature-tabsTabs · built

Feature groups switched by a tab bar over a three-up feature row.

Built for every surface

Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

Truth-first

Numbers re-execute from their source. A claim never reads stronger than its evidence.

Fast everywhere

Pure server rendering, zero client weight on the critical path, instant first paint.

feature-checklistBadge · built

A copy column beside a two-column ticked list of capabilities.

Why teams switch

Everything on, nothing to wire

The defaults are the product. You don’t assemble safety — it ships on.

  • Composable by design
  • Truth-first
  • Fast everywhere
  • Themeable
  • Accessible
  • Deterministic
steps-how-it-works(numbered) · built

A three-step how-it-works row with numbered medallions.

From source to shipped in three moves

01

Connect your source

Point the kit at your data. Every number it shows re-derives from there.

02

Assemble the page

Compose from components and blocks — the ladder keeps it coherent.

03

Ship with confidence

The build fails on drift, so what reaches users is what you meant.

comparison-tableTable · built

An us-versus-others capability table with tick/dash and text cells.

How we compare

CapabilityNorthwindOthers
Server-rendered critical path
Numbers re-execute from source
Light & dark from one token set
Drift breaks the build
Runtime theme thrashNoneCommon
Bespoke one-off screensNeverEverywhere
team-gridAvatar · built

A four-up team grid — avatar, name, and role per member.

The people behind it

A small team that ships honest software.

MO
Maya Ortiz
Co-founder & CEO
DP
Devin Park
Co-founder & CTO
AN
Aïsha Nouri
Head of Design
LF
Leo Faber
Head of Engineering
blog-gridCard · Badge · Avatar · built

A three-column blog index — cover, tag, title, excerpt, byline.

From the blog

cover
EngineeringJul 12 · 6 min

Why surfaces should re-execute their own numbers

Every metric on a page is a promise. Here is how we make the page keep it — or admit it can’t.

DPDevin Park
cover
DesignJul 4 · 4 min

One ladder: components to pages, end to end

The case for a single closed composition ladder instead of a pile of bespoke screens.

ANAïsha Nouri
cover
ProcessJun 27 · 8 min

Drift breaks the build: a field report

Six months of shipping spec-first. What broke loudly so nothing broke quietly.

MOMaya Ortiz
pricing-singleCard · Badge · Button · built

A single highlighted pricing plan callout with a centered feature list.

Most popular

Team

For a growing product.

$29/mo
  • Unlimited workspaces
  • Priority support
  • All blocks & templates
  • Audit trail
cta-splitCard · Input · Button · built

A two-column CTA — headline left, a sign-up card right.

Start free. Upgrade when you’re ready.

No credit card, no usage traps — the whole core kit on the free tier.

Create your workspace

Free forever for one workspace.

contact-splitInput · Textarea · Label · Button · built

A contact section — details left, a name/email/message form right.

Talk to us

Tell us what you’re building and we’ll help you map it onto the kit.

hello@northwind.com
Replies within a day
newsletter-centeredInput · Button · built

A centered newsletter sign-up with an inline email form.

Stay in the loop

One note a month — new blocks, templates, and the occasional deep-dive.

hero-gradientBadge · Button · built

A centered hero over a soft top-down gradient wash.

Introducing v3

The system that keeps itself honest

One kit, one ladder, zero drift — every page you ship is exactly what you meant.

hero-statsButton · built

A centered hero with a four-up metric band beneath it.

Numbers you can stand behind

Every metric re-executes from its source — measured, never asserted.

99.98%
Uptime
48ms
p95 render
12k+
Teams
4.9/5
Rated
section-heading(typographic) · built

A reusable centered section heading — eyebrow, title, supporting line.

Why it matters

A heading block you can drop above any section

Eyebrow, title, and a supporting line — the connective tissue between a page’s sections.

feature-cardsCard · built

A three-column feature grid rendered as bordered kit cards.

Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

Truth-first

Numbers re-execute from their source. A claim never reads stronger than its evidence.

Fast everywhere

Pure server rendering, zero client weight on the critical path, instant first paint.

Themeable

One committed token set drives light and dark — no runtime theme thrash.

Accessible

Native controls, real focus states, keyboard paths — accessibility is the default.

Deterministic

The same input yields the same bytes, so drift breaks the build and never ships quietly.

feature-spotlight(typographic) · built

A single-feature spotlight — a big number and copy beside a media frame.

10×

Fewer bespoke screens

When every surface comes off the same ladder, the pile of one-off pages simply stops growing.

See how it works →
diagram
integrations-grid(logo cells) · built

An integrations grid — logo, name, and category per connected tool.

Works with your stack

Connect the tools you already use — no rip-and-replace.

SL
Slack
Notifications
GH
GitHub
Source & CI
ST
Stripe
Payments
LI
Linear
Issues
FI
Figma
Design sync
NO
Notion
Docs
logos-grid(bordered cells) · built

A bordered logo wall — customer wordmarks in a divided grid.

Powering teams at

Loomfield
Cartographer
Kelvin
Halcyon
Meridian
Vantage
pricing-comparisonTable · built

A plan comparison matrix — capabilities down, plans across, tick cells.

Compare plans

Starter
$0/mo
Team
$29/mo
Scale
$99/mo
Workspaces1UnlimitedUnlimited
SupportCommunityPriorityDedicated
Blocks & templatesCoreAllAll
Audit trail
SSO & SCIM
pricing-toggleCard · Button · built

A pricing block with a monthly/annual billing toggle over three tiers.

Save with annual billing

MonthlyAnnual · −20%

Starter

$0/yr

Team

$29/yr

Scale

$99/yr
faq-two-column(typographic) · built

A two-column plain FAQ — question and answer pairs, no accordion.

Common questions

How is this different from a component library?

The library is the floor. Here the whole page — components, blocks, templates — is one closed ladder, so a surface cannot drift from the system without breaking the build.

Can I bring my own theme?

Yes. One committed token set drives everything; point it at your palette and every surface re-derives, light and dark, with no per-component overrides.

Does it work without JavaScript?

The critical path is pure server-rendered HTML. Interactive islands hydrate progressively, but the page is legible and navigable before a single byte of JS loads.

Is there a free tier?

The Starter plan is free forever for a single workspace, with the full core kit and community support.

testimonial-marqueeAvatar · built

A six-up row of compact quote cards with avatar bylines.

“We replaced three tools with one surface and shipped in a week. The team stopped arguing a…”

MOMaya Ortiz · Head of Product, Loom­field

“The honesty defaults caught two dashboards that were quietly rounding revenue up. That alo…”

DPDevin Park · VP Eng, Cartographer

“It feels like a design system that actually enforces itself. Nothing half-built ever reach…”

ANAïsha Nouri · Design Lead, Kelvin

“We replaced three tools with one surface and shipped in a week. The team stopped arguing a…”

MOMaya Ortiz · Head of Product, Loom­field

“The honesty defaults caught two dashboards that were quietly rounding revenue up. That alo…”

DPDevin Park · VP Eng, Cartographer

“It feels like a design system that actually enforces itself. Nothing half-built ever reach…”

ANAïsha Nouri · Design Lead, Kelvin
testimonial-with-statsAvatar · built

A pull-quote beside a pair of bordered supporting metrics.

“The honesty defaults caught two dashboards that were quietly rounding revenue up. That alone paid for the year.”
DP
Devin Park
VP Eng, Cartographer
99.98%
Uptime
48ms
p95 render
metrics-band(typographic) · built

A muted three-up metrics band — big number, label, and context.

99.98%
Uptime

trailing 90 days

48ms
p95 render

server-side

12k+
Teams

active this month

process-timeline(timeline) · built

A vertical process timeline — connected numbered steps down a rail.

How a page comes together

  1. Connect your source

    Point the kit at your data. Every number it shows re-derives from there.

  2. Assemble the page

    Compose from components and blocks — the ladder keeps it coherent.

  3. Ship with confidence

    The build fails on drift, so what reaches users is what you meant.

announcement-cardCard · Badge · Button · built

A changelog announcement card — release image beside titled copy.

release image
Changelog

Templates, now generally available

Assemble a whole page from a starting template, then customise every block — all on the same honest ladder.

Read the notes
cta-gradient-cardButton · built

A rounded gradient CTA card with a headline and a single action.

Build your first honest surface today

Free forever for one workspace. No card, no lock-in, no drift.

navbar-cta-darkButton · built

A dark inverted navbar bar with a secondary get-started CTA.

navbar-megaButton · Separator · built

A navbar with an expanded three-column mega-menu panel of grouped links.

navbar-transparentButton · built

A transparent navbar floating over a gradient hero band.

Northwind
Sign in

A navbar that floats over the hero

Transparent chrome that blends into the gradient beneath it, then settles on scroll.

hero-image-rightButton · built

A split hero with copy left and a product preview frame on the right.

Ship honest surfaces, faster

One closed ladder of components and blocks — assembled server-side, fast everywhere, drift-proof by construction.

product preview
hero-image-leftButton · Badge · built

A split hero with the product preview on the left and copy on the right.

product preview
Now in beta

The page assembles itself

Point the kit at your data and watch a whole surface come off the same ladder — coherent, honest, ready to ship.

hero-screenshotButton · built

A centered hero with a large screenshot frame breaking the bottom edge.

See the whole system at a glance

One canvas, every surface — a page that keeps its own promises.

▤ dashboard screenshot
hero-form-rightButton · Card · Input · Label · built

A split hero with a sign-up card form on the right.

Create your workspace in seconds

No credit card, no setup call — the whole core kit, free for your first workspace.

  • Free forever for one workspace
  • Cancel or upgrade anytime

Start free

By continuing you agree to our terms.

hero-pill-badgesButton · Badge · built

A centered hero topped by a row of outline capability pills.

Server-renderedZero client weightLight & darkDrift-proof

Everything on, nothing to wire

The defaults are the product. Safety and honesty ship on — you assemble the page, not the guardrails.

hero-ratingButton · Avatar · built

A centered hero with stacked avatars and a five-star social-proof rating.

Loved by the teams who ship

Twelve thousand teams build their surfaces on one honest ladder.

MODPANLF
★★★★★
4.9/5 across 2,300 reviews
hero-darkButton · Badge · built

A full dark inverted centered hero with two contrasting CTAs.

Introducing v3

The system that keeps itself honest

One kit, one ladder, zero drift — every page you ship is exactly what you meant.

hero-minimalButton · built

A spare typographic hero — one oversized headline and a single CTA.

Build surfaces that can’t drift.

hero-codeButton · Badge · built

A developer hero with a dark terminal-style code panel beside the copy.

Developer-first

One import, the whole page

Compose components into blocks into templates — all typed, all server-rendered, all from one ladder.

// assemble a page
import { Page } from '@northwind/kit'

export default () => (
  <Page template="marketing" />
)
hero-video-panel(typographic) · built

A centered hero over a video panel with a round play button and duration.

Watch a page build itself

Two minutes from empty canvas to shipped surface.

2:14 · product walkthrough
hero-two-ctaButton · built

A centered hero with a two-column pair of equal-weight CTAs for split audiences.

For builders and buyers alike

Start hands-on with the free kit, or talk to us about rolling it out across the org.

hero-eyebrowButton · built

A centered hero led by a colored uppercase eyebrow above the headline.

Design system · 2026

One ladder from component to page

The eyebrow sets the context, the headline makes the promise, and the ladder keeps it.

hero-newsletter-splitButton · Input · built

A split hero pairing a headline with an inline email subscribe form.

Get the wave when it lands

New blocks, templates, and the occasional deep-dive — one note a month, no spam.

2,300 builders already on the list.

banner-promoBadge · built

A primary promo strip with a badge, message, and an inline claim link.

SummerAnnual plans are 20% off through July.Claim the discount →
banner-topbar(typographic) · built

A muted utility top bar with a shipping note and account/help links.

Free shipping on orders over $75
banner-saleBadge · built

A dark high-urgency flash-sale bar with a destructive discount badge.

−40%Flash sale ends tonight — every template, one price.Shop now
page-header-simpleButton · built

A left-aligned page header with title, subtitle, and header actions.

Team members

Manage who can access this workspace and what they can do.

page-header-centeredBadge · built

A centered page header with eyebrow badge, title, and lead paragraph.

Documentation

Everything you need to build

Guides, references, and recipes for assembling honest surfaces from the kit.

breadcrumb-headerButton · Breadcrumb · built

A page header led by a breadcrumb trail above the title and a source action.

Button

A pressable control in five variants and three sizes.

View source
cta-topbarButton · built

An in-app trial-upgrade prompt bar with icon, message, and dual actions.

Your trial ends in 12k · 7 days

Upgrade now to keep your workspaces and audit trail.

feature-two-colBadge · built

A two-column feature intro — heading left, icon-led feature list right.

Features

Everything the page needs, out of the box

Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

Truth-first

Numbers re-execute from their source. A claim never reads stronger than its evidence.

Fast everywhere

Pure server rendering, zero client weight on the critical path, instant first paint.

feature-three-col-icons(typographic) · built

Three centered icon-led feature columns.

Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

Truth-first

Numbers re-execute from their source. A claim never reads stronger than its evidence.

Fast everywhere

Pure server rendering, zero client weight on the critical path, instant first paint.

feature-list-split(typographic) · built

A capability list beside a preview frame.

One kit, every capability

  • Composable by design

    Every surface is assembled from the same small kit — one ladder, no bespoke drift.

  • Truth-first

    Numbers re-execute from their source. A claim never reads stronger than its evidence.

  • Fast everywhere

    Pure server rendering, zero client weight on the critical path, instant first paint.

  • Themeable

    One committed token set drives light and dark — no runtime theme thrash.

preview
feature-media-rightBadge · built

A single feature with copy left and a media preview on the right.

Truth-first

Claims that never outrun their evidence

Numbers re-execute from their source. A claim never reads stronger than its evidence.

Learn more →
preview
feature-media-leftBadge · built

A single feature with a media preview left and copy on the right.

preview
Fast everywhere

Fast on the critical path

Pure server rendering, zero client weight on the critical path, instant first paint.

See the benchmarks →
feature-grid-bordered(typographic) · built

A full six-feature grid with divider borders between cells.

Built for teams that ship

Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

Truth-first

Numbers re-execute from their source. A claim never reads stronger than its evidence.

Fast everywhere

Pure server rendering, zero client weight on the critical path, instant first paint.

Themeable

One committed token set drives light and dark — no runtime theme thrash.

Accessible

Native controls, real focus states, keyboard paths — accessibility is the default.

Deterministic

The same input yields the same bytes, so drift breaks the build and never ships quietly.

feature-highlightButton · built

A centered single-feature highlight band with a CTA.

Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

feature-numbered(typographic) · built

Features paired with large ghost ordinal numbers in a two-column grid.

What sets it apart

01

Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

02

Truth-first

Numbers re-execute from their source. A claim never reads stronger than its evidence.

03

Fast everywhere

Pure server rendering, zero client weight on the critical path, instant first paint.

04

Themeable

One committed token set drives light and dark — no runtime theme thrash.

feature-image-grid(typographic) · built

Three features each over a preview image frame.

See it in every surface

The same ladder renders marketing, app, and commerce alike.

preview

Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

preview

Truth-first

Numbers re-execute from their source. A claim never reads stronger than its evidence.

preview

Fast everywhere

Pure server rendering, zero client weight on the critical path, instant first paint.

feature-comparison-cardsCard · built

Two side-by-side cards contrasting the honest way against bespoke screens.

The honest way vs. the old way

With Northwind

One system, end to end.

  • Assembled from one ladder
  • Numbers re-execute
  • Drift breaks the build
  • Ships on by default

Bespoke screens

A pile of one-offs.

  • Assembled from one ladder
  • Numbers re-execute
  • Drift breaks the build
  • Ships on by default
feature-accordion-listAccordion · Badge · built

A heading beside an accordion of expandable feature explanations.

Deep dive

Every capability, explained

Open any feature to see exactly what it does and why it matters.

◇ Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

◈ Truth-first

Numbers re-execute from their source. A claim never reads stronger than its evidence.

◆ Fast everywhere

Pure server rendering, zero client weight on the critical path, instant first paint.

○ Themeable

One committed token set drives light and dark — no runtime theme thrash.

feature-stats-mix(typographic) · built

A feature checklist paired with a grid of bordered stat tiles.

Capability, measured

Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

Truth-first

Numbers re-execute from their source. A claim never reads stronger than its evidence.

Fast everywhere

Pure server rendering, zero client weight on the critical path, instant first paint.

99.98%
Uptime
48ms
p95 render
12k+
Teams
4.9/5
Rated
feature-vertical-tabsTabs · built

A vertical tab rail of capabilities with an active detail panel.

Pick a capability

Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

feature-icon-row(typographic) · built

A compact wrapped row of icon-and-label feature chips.

Composable by design
Truth-first
Fast everywhere
Themeable
Accessible
Deterministic
feature-large-showcaseBadge · built

A hero-scale showcase frame with three supporting feature notes.

Composable by design

One canvas, the whole system

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

product showcase

◈ Truth-first

Numbers re-execute from their source. A claim never reads stronger than its evidence.

◆ Fast everywhere

Pure server rendering, zero client weight on the critical path, instant first paint.

○ Themeable

One committed token set drives light and dark — no runtime theme thrash.

bento-three(typographic) · built

An asymmetric bento of four feature tiles with one tall lead cell.

Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

Truth-first

Numbers re-execute from their source. A claim never reads stronger than its evidence.

Fast everywhere

Pure server rendering, zero client weight on the critical path, instant first paint.

Themeable

One committed token set drives light and dark — no runtime theme thrash.

bento-asymmetric(typographic) · built

A four-column bento mixing wide, narrow, and accent feature tiles.

A kit with opinions

Composable by design

Every surface is assembled from the same small kit — one ladder, no bespoke drift.

Truth-first

Fast everywhere

Themeable

One committed token set drives light and dark — no runtime theme thrash.

steps-horizontal(typographic) · built

Three horizontal connected steps with numbered nodes.

Three moves to ship

01

Connect your source

Point the kit at your data. Every number it shows re-derives from there.

02

Assemble the page

Compose from components and blocks — the ladder keeps it coherent.

03

Ship with confidence

The build fails on drift, so what reaches users is what you meant.

steps-numbered-cardsCard · built

Three step cards each led by a large ghost ordinal.

01

Connect your source

Point the kit at your data. Every number it shows re-derives from there.

02

Assemble the page

Compose from components and blocks — the ladder keeps it coherent.

03

Ship with confidence

The build fails on drift, so what reaches users is what you meant.

steps-vertical-icons(typographic) · built

A vertical stack of icon-led steps with step-number eyebrows.

How it works

Step 01

Connect your source

Point the kit at your data. Every number it shows re-derives from there.

Step 02

Assemble the page

Compose from components and blocks — the ladder keeps it coherent.

Step 03

Ship with confidence

The build fails on drift, so what reaches users is what you meant.

timeline-vertical(typographic) · built

A vertical roadmap timeline with dated milestone nodes.

Where we’re headed

  1. 2024
    The kit is born

    One ladder of components, blocks, and templates — assembled server-side.

  2. 2025
    Templates ship

    A full page starts from a template, then every block is customisable.

  3. Today
    Honesty by default

    Numbers re-execute and drift breaks the build — the safety ships on.

  4. Next
    The whole surface

    Every product surface comes off the same honest ladder.

integrations-logos(typographic) · built

A grid of integration logo tiles with names.

Plays well with your stack

Connect the tools you already use — no rip-and-replace.

SL
Slack
GH
GitHub
ST
Stripe
LI
Linear
FI
Figma
NO
Notion
integrations-listButton · built

A divided list of integrations each with a Connect action.

All your integrations

SL
Slack
Notifications
Connect
GH
GitHub
Source & CI
Connect
ST
Stripe
Payments
Connect
LI
Linear
Issues
Connect
FI
Figma
Design sync
Connect
NO
Notion
Docs
Connect
how-it-works-cardsCard · Badge · built

Three centered how-it-works cards with icons.

How it works

From source to shipped

Connect your source

Point the kit at your data. Every number it shows re-derives from there.

Assemble the page

Compose from components and blocks — the ladder keeps it coherent.

Ship with confidence

The build fails on drift, so what reaches users is what you meant.

use-cases-grid(typographic) · built

A six-tile grid of product use cases with icons.

Built for every use case

One system carries them all — no bespoke drift between them.

Marketing sites

Landing pages that assemble from blocks and never drift from brand.

Dashboards

Every metric re-executes from its source — measured, never asserted.

Commerce

Storefronts and checkout on the same honest ladder as everything else.

Internal tools

Ship team surfaces fast without a pile of bespoke one-off screens.

Documentation

Docs that stay in lockstep with the components they describe.

Portals

Member and partner portals with safety on by default.

benefits-splitButton · Badge · built

A benefits pitch beside a bordered feature checklist.

Why teams switch

The benefits compound

When every surface comes off the same ladder, quality is the default — and the pile of one-off screens stops growing.

Book a demo
  • Composable by design

    Every surface is assembled from the same small kit — one ladder, no bespoke drift.

  • Truth-first

    Numbers re-execute from their source. A claim never reads stronger than its evidence.

  • Fast everywhere

    Pure server rendering, zero client weight on the critical path, instant first paint.

  • Themeable

    One committed token set drives light and dark — no runtime theme thrash.

  • Accessible

    Native controls, real focus states, keyboard paths — accessibility is the default.

  • Deterministic

    The same input yields the same bytes, so drift breaks the build and never ships quietly.

testimonial-cards-threeCard · Avatar · Badge · built

Three testimonial cards with star ratings, quote, and attributed author.

Testimonials

What teams tell us

★★★★★

“We replaced three tools with one surface and shipped in a week. The team stopped arguing about layout and started building.”

MO
Maya Ortiz
Head of Product, Loom­field
★★★★★

“The honesty defaults caught two dashboards that were quietly rounding revenue up. That alone paid for the year.”

DP
Devin Park
VP Eng, Cartographer
★★★★★

“It feels like a design system that actually enforces itself. Nothing half-built ever reaches our users.”

AN
Aïsha Nouri
Design Lead, Kelvin
testimonial-quote-largeAvatar · built

A single oversized pull-quote centered on a muted band with author.

It feels like a design system that actually enforces itself. Nothing half-built ever reaches our users.
AN
Aïsha Nouri
Design Lead, Kelvin
testimonial-two-colAvatar · built

Two bordered testimonial panels side by side.

“We replaced three tools with one surface and shipped in a week. The team stopped arguing about layout and started building.”
MO
Maya Ortiz
Head of Product, Loom­field
“The honesty defaults caught two dashboards that were quietly rounding revenue up. That alone paid for the year.”
DP
Devin Park
VP Eng, Cartographer
testimonial-avatars-rowAvatar · built

Overlapping avatar row, star rating, and a centered social-proof quote.

MODPANLF
★★★★★
“We replaced three tools with one surface and shipped in a week. The team stopped arguing about layout and started building.”

Joined by 12,000+ teams building honest surfaces.

testimonial-video-cardCard · Avatar · Button · built

A video-thumbnail case card beside a rated quote with a watch link.

▶ customer story
★★★★★
“The honesty defaults caught two dashboards that were quietly rounding revenue up. That alone paid for the year.”
DP
Devin Park
VP Eng, Cartographer
Watch the story →
testimonial-rating-stars(typographic) · built

Aggregate star score above three compact star-rated review tiles.

★★★★★

4.9 out of 5 · 2,300 reviews

★★★★★

“We replaced three tools with one surface and shipped in a week. The team stopped arguing about l…”

Maya Ortiz · Head of Product, Loom­field
★★★★★

“The honesty defaults caught two dashboards that were quietly rounding revenue up. That alone pai…”

Devin Park · VP Eng, Cartographer
★★★★★

“It feels like a design system that actually enforces itself. Nothing half-built ever reaches our…”

Aïsha Nouri · Design Lead, Kelvin
logos-row(typographic) · built

A single centered row of customer wordmarks.

LoomfieldCartographerKelvinHalcyonMeridianVantage
logos-scroller(typographic) · built

A horizontal marquee-style strip of repeated logos under an eyebrow.

Trusted across the industry

LoomfieldCartographerKelvinHalcyonMeridianVantageLoomfieldCartographerKelvinHalcyonMeridianVantage
logos-bordered-grid(typographic) · built

A divided bordered grid of six customer logos.

Loomfield
Cartographer
Kelvin
Halcyon
Meridian
Vantage
logos-with-heading(typographic) · built

A heading and blurb beside a compact three-column logo grid.

Backed by teams who ship

From seed-stage to enterprise, thousands of teams build on Northwind.

LoomfieldCartographerKelvinHalcyonMeridianVantage
stats-cardsCard · built

Four KPI stats rendered as individual cards.

99.98%
Uptime
trailing 90 days
48ms
p95 render
server-side
12k+
Teams
active this month
4.9/5
Rated
across 2,300 reviews
stats-gradient(typographic) · built

Four headline stats reversed out on a primary gradient band.

By the numbers

99.98%
Uptime
48ms
p95 render
12k+
Teams
4.9/5
Rated
stats-four-col(typographic) · built

Four divided stat columns with value, label, and hint.

99.98%
Uptime
trailing 90 days
48ms
p95 render
server-side
12k+
Teams
active this month
4.9/5
Rated
across 2,300 reviews
stats-split-copyBadge · built

Impact copy on the left with a four-up bordered stat grid on the right.

Impact

Growth you can measure

Every figure here re-executes from its source. When a number can’t be proven, it says so — never rounded up.

Read the impact report →
99.98%
Uptime
48ms
p95 render
12k+
Teams
4.9/5
Rated
team-cardsCard · Avatar · built

Team members as centered avatar cards in a four-column grid.

Meet the team

A small crew that ships honest software.

MO
Maya Ortiz
Co-founder & CEO
DP
Devin Park
Co-founder & CTO
AN
Aïsha Nouri
Head of Design
LF
Leo Faber
Head of Engineering
team-list-rowsAvatar · built

Leadership as stacked rows with avatar, role, and profile link.

Leadership

MO
Maya Ortiz
Co-founder & CEO
Profile →
DP
Devin Park
Co-founder & CTO
Profile →
AN
Aïsha Nouri
Head of Design
Profile →
LF
Leo Faber
Head of Engineering
Profile →
team-with-socialAvatar · built

Team grid with per-member social links under each avatar.

The people behind Northwind

MO
Maya Ortiz
Co-founder & CEO
DP
Devin Park
Co-founder & CTO
AN
Aïsha Nouri
Head of Design
LF
Leo Faber
Head of Engineering
blog-list-rowsBadge · built

Latest posts as full-width rows with tag, title, excerpt, and author.

blog-cards-twoCard · Avatar · Badge · built

Two cover-image blog cards with tag, title, and author footer.

cover
EngineeringJul 12 · 6 min

Why surfaces should re-execute their own numbers

Every metric on a page is a promise. Here is how we make the page keep it — or admit it can’t.

DPDevin Park
cover
DesignJul 4 · 4 min

One ladder: components to pages, end to end

The case for a single closed composition ladder instead of a pile of bespoke screens.

ANAïsha Nouri
blog-minimal-list(typographic) · built

A minimal titled list of posts with trailing dates.

press-mentions(typographic) · built

A featured-in logo strip above a pulled press quote.

As featured in

LoomfieldCartographerKelvinHalcyon
“We replaced three tools with one surface and shipped in a week. The team stopped arguing about layout and started building.”

— Loomfield Review

awards-row(typographic) · built

Four bordered award badges with title and year.

Best Design System
2026
Top 50 SaaS
2025
Editors' Choice
2025
Fastest Growing
2024
case-study-cardCard · Badge · Button · built

A case-study card pairing a cover with quote, headline stats, and CTA.

case study cover
Case study

How Cartographer cut render time 4×

“The honesty defaults caught two dashboards that were quietly rounding revenue up. That alone paid for the year.”

99.98%
Uptime
48ms
p95 render
Read the case study
story-quoteAvatar · Separator · built

An author header, divider, and long-form story pull-quote with a read link.

AN
Aïsha Nouri
Design Lead, Kelvin
“It feels like a design system that actually enforces itself. Nothing half-built ever reaches our users.”

Read the full story of how Kelvin moved onto Northwind.

Continue reading →
pricing-two-tierCard · Button · Badge · built

Two side-by-side plan cards, free vs. featured, with a recommended ring.

Two plans, no surprises

Start free, upgrade the day the team outgrows it.

Starter

For a first surface.

$0/mo
  • 1 workspace
  • Community support
  • Core component kit

Team

Recommended

For a growing product.

$29/mo
  • Unlimited workspaces
  • Priority support
  • All blocks & templates
  • Audit trail
pricing-cards-fourCard · Button · Badge · built

A four-across plan grid spanning free through scale with one highlighted tier.

Priced for every stage

Free

For a first surface.

$0/mo

Team

For a growing product.

$29/mo

Business

For scaling orgs.

$79/mo

Scale

For the whole org.

$99/mo
pricing-table-detailedButton · Table · built

A detailed feature-comparison table with per-column plan prices and CTAs.

Compare every plan

Starter
$0/mo
Start free
Team
$29/mo
Start trial
Scale
$99/mo
Contact sales
Workspaces1UnlimitedUnlimited
SupportCommunityPriorityDedicated
Blocks & templatesCoreAllAll
Audit trail
SSO & SCIM
Custom SLAs
pricing-simple-listButton · built

A single flat price with an included-features checklist and one CTA.

One price, everything included

No tiers to decode — the full kit for a flat monthly fee.

$29per seat / month
  • Unlimited workspaces
  • Priority support
  • All blocks & templates
  • Audit trail
  • SSO & SCIM
  • Priority support

14-day trial · no card required.

pricing-enterpriseCard · Button · Badge · Input · Label · built

An enterprise pitch with a controls checklist beside a request-a-quote card.

Enterprise

Built for the whole organisation

Volume pricing, dedicated success, and the security controls your procurement team asks for.

  • SSO & SCIM provisioning
  • Custom SLAs & uptime
  • Dedicated success manager
  • Audit log export
  • Invoiced billing
  • Data residency options

Talk to sales

We’ll tailor a plan to your seat count and controls.

faq-cardsCard · built

FAQ entries laid out as a two-column grid of question-and-answer cards.

Frequently asked

How is this different from a component library?

The library is the floor. Here the whole page — components, blocks, templates — is one closed ladder, so a surface cannot drift from the system without breaking the build.

Can I bring my own theme?

Yes. One committed token set drives everything; point it at your palette and every surface re-derives, light and dark, with no per-component overrides.

Does it work without JavaScript?

The critical path is pure server-rendered HTML. Interactive islands hydrate progressively, but the page is legible and navigable before a single byte of JS loads.

Is there a free tier?

The Starter plan is free forever for a single workspace, with the full core kit and community support.

faq-categoriesSeparator · built

FAQ links grouped into three topic columns with divider rules.

faq-simple-list(typographic) · built

A plain divided list of questions with inline answers.

Questions & answers

How is this different from a component library?

The library is the floor. Here the whole page — components, blocks, templates — is one closed ladder, so a surface cannot drift from the system without breaking the build.

Can I bring my own theme?

Yes. One committed token set drives everything; point it at your palette and every surface re-derives, light and dark, with no per-component overrides.

Does it work without JavaScript?

The critical path is pure server-rendered HTML. Interactive islands hydrate progressively, but the page is legible and navigable before a single byte of JS loads.

Is there a free tier?

The Starter plan is free forever for a single workspace, with the full core kit and community support.

cta-centeredButton · built

A centered headline with primary and outline call-to-action buttons.

Ship your first honest surface

Free forever for one workspace. No card, no lock-in, no drift.

cta-image-splitButton · built

A split CTA pairing copy and buttons with a product-preview panel.

See it on your own data

Point the kit at a live source and watch a page assemble itself — honest numbers, first paint.

product preview
cta-dark-bandButton · built

A full-bleed dark band with contrasting solid and ring CTA links.

Ready when you are

Join the teams shipping surfaces that keep themselves honest.

cta-two-buttonButton · built

A horizontal CTA row with copy on the left and two buttons on the right.

Start building today

Free for one workspace — upgrade only when the team grows.

cta-with-statsButton · built

A centered CTA backed by a four-across proof-point stat row.

Trusted where it counts

The numbers teams see before they switch — and after.

99.98%
Uptime
48ms
p95 render
12k+
Teams
4.9/5
Rated
cta-card-formCard · Input · Label · Button · built

A boxed create-workspace signup card with name and email fields.

Create your workspace

The full core kit, free forever for one workspace.

Already have an account? Sign in

contact-cardsCard · built

Three contact-channel cards for email, phone, and live chat.

Get in touch

Pick the channel that suits you — we answer on all of them.

Email us

hello@northwind.com

Replies within a day.

Call sales

+1 (555) 019-2837

Mon–Fri, 9–5 ET.

Live chat

Start a conversation

Average wait under 2 min.

contact-map-sideInput · Textarea · Label · Button · built

A contact form beside a map/address panel in a two-column split.

Come say hello

We’re a small team, but we read every message.

128 Meridian Ave, Suite 400Portland, OR
contact-simpleInput · Textarea · Label · Button · built

A centered minimal contact form with email and message fields.

Contact us

Tell us what you’re building and we’ll be in touch.