Northgrid Canada: civil tech website and design system for infrastructure software

Northgrid builds survey instruments, construction management software and asset platforms for the teams behind Canada's roads, bridges, rail and water networks. We designed its brand, website and design system: construction tech UI/UX that speaks with the precision of an engineer and the warmth of a field crew. This Canadian edition starts from the US original and changes what matters: Canadian spelling, provinces and territories, kilometres and tonnes, CAD pricing, and a palette drawn from the Canadian landscape.

Project facts

• Client: Northgrid Inc. (fictional)
• Sector: Civil engineering, heavy civil construction, geospatial software
• Markets: Calgary (headquarters) plus projects in all 10 provinces and 3 territories
• Services: Market localisation · Copywriting · Brand adaptation · Civic tech website design · Accessibility (WCAG 2.2 AA) · SEO foundations
• Templates: 8 page templates shared with every Northgrid edition
• Stack: Hand-built HTML, CSS and vanilla JavaScript; one strings file and one theme file per market

The brief

Close to American, but unmistakably Canadian

Canada shares a continent with the US but has its own institutions, units and vocabulary. The Canadian edition keeps the US structure and design system, then localises the content: transportation ministries instead of state DOTs, kilometres instead of miles, CAD pricing before tax, and a palette that leans on spruce green and a restrained red rather than the US signal orange. The result is a site that feels at home from Whitehorse to Halifax.

Designing for Canada

What actually changed between the US and this edition

• Headquarters - US edition: Golden, Colorado · Canada: Calgary, Alberta
• Coverage - US edition: 48 states · Canada: 10 provinces and 3 territories
• Institutions - US edition: State DOTs · Canada: Provincial and territorial transportation ministries
• Units - US edition: Miles, feet, tons · Canada: Kilometres, metres, tonnes
• Currency - US edition: USD · Canada: CAD, before tax (GST/HST)
• Case studies - US edition: I-70 Corridor, Juniper Valley, Northfork Line, Cedar River Crossing · Canada: Highway 1 Corridor (AB), Okanagan Valley (BC), Fraser Valley Line (BC), Red Deer River Crossing (AB)
• Legal - US edition: US terms, state law · Canada: Alberta law, CASL consent, AODA accessibility
• Look - US edition: Signal orange, Fraunces, Public Sans · Canada: Spruce green with restrained red, Inter Tight, Inter

Brand adaptation

The same Northgrid, with a local accent

The Canadian palette is drawn from the landscape: deep forest ink, warm concrete paper, stone and a survey-marker red used sparingly for action and emphasis. Inter Tight and Inter give a crisp, civic, highly legible feel. The Northgrid name and crosshair mark stay; the civil tech descriptor remains.

Homepage and key journeys

A full-bleed hero over a Canadian highway interchange sets the scale, with the coordinates 51.0447° N · 114.0719° W (Calgary) in the corner. Below: an industries carousel, animated impact stats (10 provinces and 3 territories, tonnes of embodied carbon avoided), a product trio (survey, structural engineering, collaboration), an AI feature banner, tabbed customer stories from the Highway 1 Corridor, Okanagan Valley and Fraser Valley Line, and a partner marquee. The most distinctive flow is the product finder in the support section: live search and category chips filter robotic total stations, RTK GNSS receivers, machine control and software, with results updating instantly.

Compliance, accessibility and trust

• Privacy policy under PIPEDA, with the Office of the Privacy Commissioner of Canada as the complaint route.
• Express consent for commercial email, as CASL requires, with an unticked checkbox.
• Accessibility statement referencing AODA and WCAG 2.2 AA.
• Support terms governed by the laws of the Province of Alberta.
• Passes automated WCAG 2.2 AA checks on every page at 360, 390, 768 and 1440 px: no contrast failures, no unreachable controls, no horizontal scrolling.
• A language switcher built from hreflang sits in the header on desktop and in the footer on phones.

One system, twelve markets

Every visible string lives in one file per market, and every colour and typeface in one theme file. This edition needed no new templates or components: a strings file, a theme, regional photography and local legal content made it a different brand experience. For a civic-tech company with international plans, a new market becomes a content project rather than a rebuild.

Deliverables

• Market profile: language, formats, legal and seasonality
• Full localised copy across 8 templates, header, footer and forms
• Brand adaptation: palette, type pairing and logo descriptor
• 37 regional photographs (Pexels, credited in credits.json)
• Local legal content
• Accessibility pass (WCAG 2.2 AA, automated) and QA at four screen widths
• Portfolio media: stills, full-page captures, scroll video, OG image, brand board