Harbour & Oak
A bilingual Canadian lifestyle retail brand based in Victoria, BC earthy forest/sand/terra palette, product showcase, curated collections, and full EN/FR in-page language switching.
Design & Colour Palette
Desktop Forest & Sand
Colour Palette
#2D4A3E
#C9A96E
#B85C38
#FAF8F5
Typography: Playfair Display (headings) Inter (body)
About This Showcase
Harbour & Oak is a fictional Canadian lifestyle retail brand based in Victoria, British Columbia. The showcase demonstrates how a West Coast-focused retail business can present its product catalog, collections, and brand story online with authenticity, warmth, and bilingual accessibility.
The earthy forest/sand/terra palette communicates natural materials, West Coast sensibility, and sustainable craftsmanship. Playfair Display serif headings paired with Inter body text create an approachable yet refined aesthetic appropriate for a brand selling outerwear, home goods, accessories, and wellness products.
Key Design & Development Features
Bilingual EN/FR Toggle
Full in-page language switching using data attributes no page reload, no separate URLs. Every element switches instantly including navigation, headings, body copy, and CTAs.
West Coast Retail Design
Earthy forest/sand/terra palette paired with natural textures and organic shapes creates an authentic West Coast aesthetic appropriate for outdoor lifestyle and home goods.
Product Showcase Layout
Grid-based product cards with hover effects, badges, and clear pricing demonstrate how e-commerce products can be presented effectively on the web.
Curated Collections
Grouped product categories (Outerwear, Home Goods, Accessories, Wellness) demonstrate how retailers can organize inventory by lifestyle or purpose.
Mobile-Responsive Layout
Fully responsive across desktop, tablet, and mobile with a hamburger nav, fluid typography, and stacked layouts on small screens.
Accessibility-Conscious
Skip links, ARIA labels, focus-visible styles, semantic HTML, and keyboard-navigable language switcher built with accessibility in mind throughout.
5-Page Website Structure
Browse Similar Retail & E-Commerce Designs
Looking for a starting point for your retail or e-commerce website? Browse the full catalog filtered to Retail.
Looking for specific templates? These are the closest match to this showcase.
E-Commerce Storefront
Purpose-built for online retail businesses. Product grids, collections, cart functionality, and checkout flow.
View in CatalogBoutique Fashion
Elegant, fashion-forward design for clothing and accessories retailers. Grid layouts, size guides, and seasonal collections.
View DetailsProduct Launch
Focused, conversion-oriented design for new product launches. Hero sections, feature highlights, and pre-order CTAs.
View DetailsAccessibility, Privacy & Canadian Relevance
Accessibility Features
This showcase is built with WCAG 2.1 AA guidance throughout: skip link, semantic HTML headings, ARIA labels on all interactive elements, keyboard-navigable navigation, focus-visible styles, sufficient colour contrast on the earthy palette, and labelled form inputs on the contact page.
Accessibility Guide ?Privacy Considerations
No cookies, no analytics, no third-party tracking. The contact form collects only what's needed name, email, and message. As a Canadian retailer handling customer orders, privacy-first design is essential for building trust.
Privacy-First Websites ?Bilingual Features
Full EN/FR in-page toggle every element switches instantly
including navigation, headings, product descriptions, and CTAs.
The lang attribute updates dynamically for screen
readers. Canada's bilingual market makes this a practical
necessity for a national retail brand.
Canadian Business Relevance
Content uses Canadian terminology (CAD pricing, provinces, BC Parks Foundation partnership). The Victoria location, bilingual clientele, and Canadian producer partnerships reflect the realities of retail in Canada. This is what a Canadian retail website actually needs.
Canadian Digital Standards ?Frequently Asked Questions
Can you build a bilingual retail website like this for my brand?
Yes. The bilingual EN/FR toggle demonstrated in this showcase is a capability we bring to client projects. We can implement full in-page language switching for any website we build.
Can I use the E-Commerce Storefront template as a starting point?
Absolutely. Our E-Commerce Storefront template is the closest starting point to this showcase. We customize it with your brand's palette, products, collections, and content.
How long does it take to build a retail website?
Most retail websites launch within 34 weeks of receiving your product catalog, photos, and branding materials. Timeline depends on package and complexity.
Do you include Canadian-specific content like CAD pricing?
Yes. We understand Canadian retail contexts, provincial regulations, and bilingual customer expectations. Your content will be accurate and relevant to Canadian shoppers.