Colour Systems & Typography

Colour Systems

Strategic colour for eCommerce

Colour accounts for up to 90% of first-impression purchase decisions. We engineer palettes that work at every scale — from mobile screens to billboard print — with scientific precision.

Every palette we design is tested for accessibility (WCAG AA/AAA), cross-device rendering, and emotional coherence. We don't pick colours because they're fashionable — we select them because they serve your brand's strategic objectives.

Colour psychology for commerce

Trust & Authority

Deep blues and navies signal reliability and expertise — ideal for high-consideration purchases.

#2C3E50 · #4A6FA5

Wellness & Nature

Sage greens and muted earth tones convey authenticity, calm, and sustainability.

#7D8C7C · #4A5E49

Luxury & Premium

Warm golds and burnished tones signal craftsmanship, heritage, and perceived value.

#C9A96E · #8B6F47

Approachable & Warm

Blush neutrals and warm beiges create welcoming, accessible brand personalities.

#E8D5C4 · #C4A882

System Architecture

Anatomy of a brand palette

A complete palette is more than a list of colours — it's a structured system with defined roles and rules.

Primary

Brand Black

The anchor. Used for headings, key UI elements, and establishing visual weight.

Accent

Sage Dark

The brand signature — used for CTAs, highlights, and interactive elements.

Secondary

Sage Mid

Supporting accent for decorative elements, dividers, and secondary actions.

Background

Sage Pale

Tinted backgrounds that reinforce brand identity without overwhelming content.

Base

Warm White

The canvas — never harsh pure white, always a hue-infused neutral that reflects warmth.

Typography

Type systems that sell

Typography is the voice of your brand made visible. The fonts you choose communicate personality, establish hierarchy, and — critically — guide the eye through your store to conversion.

We select typefaces based on brand personality mapping, screen rendering performance, character coverage, and licensing clarity. Every choice is justified — not intuitive.

Display / Hero

Fraunces 300
60–80px
-0.03em tracking

Craft your narrative.

Homepage hero, campaign headlines, landing page titles

Section Heading

Fraunces 300
32–48px
-0.02em tracking

Products that inspire.

Section titles, category headings, content blocks

Subheading

Fraunces 400 Italic
22–28px
-0.01em tracking

Designed with intention.

Pullquotes, highlighted statements, feature callouts

Body Copy

DM Sans 300
15–16px
0 tracking

Every detail in this collection has been considered from the perspective of the person who will use it daily — materials chosen for feel, forms refined for function.

Product descriptions, blog content, instructional text

Label / UI

DM Sans 400
11–12px
0.1em tracking

New Arrival · Spring Collection · Limited Edition

Navigation, tags, badges, form labels, captions

Font Pairings

Curated pairings for commerce

Four proven pairings tailored to distinct eCommerce brand personalities.

Pairing 01 · Premium & Editorial

Maison Collection

Handcrafted from responsibly sourced materials. Each piece is numbered and made to last a lifetime.

Fraunces (Display) + DM Sans (Body) — Timeless, editorial, high-end retail

Pairing 02 · Modern & Minimal

Studio Objects

Functional design for considered living. Objects that disappear into daily life and improve it.

DM Sans Light (Display) + DM Sans Regular (Body) — Clean, Scandinavian, minimal

Pairing 03 · Warm & Artisan

Forest & Field

Small-batch goods made by hand in rural workshops. Grown, gathered, and prepared with care.

Fraunces Italic (Display) + DM Sans (Body) — Artisan, natural, heritage brands

Pairing 04 · Technical & Innovative

Apex Systems

Performance-engineered. Every component tested to outperform industry standards by a measurable margin.

DM Sans Medium (Display) + DM Sans Light (Body) — Tech, performance, precision

Design Your System

Colour and type that work in perfect harmony

Let us build a complete visual system for your eCommerce brand — grounded in strategy and built to perform.

Start a Project View Packaging Design