Retool Canada - electronics website design for a modular laptop brand

Retool Canada is the Canadian edition of our concept electronics site for a modular laptop brand. It starts from the US build, then changes what matters: Canadian spelling (colour, neighbourhood, but -ize), CAD pricing before tax, postal codes, the Canadian Multilingual keyboard layout, Canada Post trade-in labels, and GST/HST shown as an estimate. The brand, products and prices are fictional.

Project facts

• Client: Retool Devices Canada Inc. (fictional, concept project)
• Sector: Consumer electronics: modular, repairable laptops
• Markets: Canada, with a Toronto base at 401 Richmond Street West and shipping across the provinces and territories
• Services: Market localisation · Copywriting · Brand adaptation · Consumer electronics e-commerce design · Accessibility (WCAG 2.2 AA) · SEO foundations
• Templates: 13 page templates shared with every Retool edition
• Stack: Next.js (static export), React and Tailwind CSS; one region pack (copy, data, alt text) and one theme per market

The brief

Close to the US, but unmistakably Canadian

Canada sits next to the US, so the edition starts from the US build and applies Canadian spelling automatically. Then the content changes: the configurator offers a Canadian Multilingual (CSA) keyboard alongside US English (ANSI), the cart shows estimated GST/HST at 13% before tax, the trade-in flow emails a prepaid Canada Post label, and the address form asks for a postal code like M5V 2T6. The palette turns from graphite and electric lime to cool greys, spruce green and one restrained red, so the site reads calm and civic rather than neon.

Designing for Canada

What actually changed between the US and this edition

• Spelling - US edition: color, neighborhood · Canada: colour, neighbourhood (with -ize kept)
• Currency - US edition: USD, tax added at checkout · Canada: CAD before tax, with estimated GST/HST shown in the cart
• Address - US edition: ZIP code · Canada: Postal code, with a hint like M5V 2T6
• Keyboard - US edition: US English (ANSI) · Canada: Canadian Multilingual (CSA) offered alongside US English (ANSI)
• Trade-in - US edition: US courier label · Canada: Prepaid Canada Post label emailed after the estimate
• Recycling - US edition: US recyclers · Canada: Batteries, metals and plastics go to recyclers approved under provincial e-waste programs
• Support - US edition: US hours · Canada: Mon–Fri, 8 am–6 pm ET
• Region - US edition: United States · USD · Canada: Canada · CAD
• Look - US edition: Graphite, circuit green, electric lime · Canada: Cool greys, spruce green and one restrained red; Inter Tight + Inter

Brand adaptation

The same Retool, with a local accent

Spruce green carries the interface, with a single restrained red used only for emphasis, so the palette reads Canadian through restraint rather than maple leaves. Inter Tight and Inter give a crisp, civic, highly legible feel. The Retool wordmark and the modular laptop promise stay unchanged.

Homepage, configurator and marketplace

A dark hero opens with the promise, one screwdriver, then moves from model families to parts, repair and trade-in. The most distinctive flow is the scroll-driven exploded view: an original line drawing of the laptop separates into display, keyboard, memory, mainboard, battery and port cards, each labelled and linked to the shop. The configurator then lets visitors build a DIY Edition or a pre-built laptop, with the Canadian Multilingual (CSA) keyboard as a first-class option and the total updating in CAD.

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.
• Estimated GST/HST shown in the cart, with the 13% sample rate noted as an estimate before tax.
• 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 region pack per market (copy, data and alt text), and every colour and typeface in one theme file. This edition needed no new templates or components: a region pack, a theme, local data and legal content made it a different brand experience. For a hardware brand 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 13 templates, header, footer and forms
• Brand adaptation: palette, type pairing and logo descriptor
• 0 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