01 — Brand Identity

Muzzomo Brand and Product System

Visual Identity, Design Tokens, and a Dark Mode Reimagined for a Canadian Home Services Marketplace

0 → 1

Brand and Product System

Light + Dark

Designed in Parallel

WCAG AA

Accessibility Verified

Project Details

Client

Muzzomo

Year

2026

Role

Brand and Product Design Lead

Tools

Figma · Adobe Illustrator · Adobe Photoshop · Adobe InDesign

Muzzomo is currently in concept review stage. Outcomes describe the depth and completeness of the system as delivered, not post-launch metrics. The full brand book is available on request.

6 tokens · 6-tier type system · WCAG AA verified

Overview

A home services marketplace lives or dies on trust. The brand had to feel as dependable as the trades it represents, without slipping into either generic-corporate sterility or folksy informality.

Muzzomo sits in a difficult position in the Canadian home services market. Mass directories are cheap but untrusted. Premium agencies are credible but inaccessible. Muzzomo is the trustworthy middle, and the brand had to express that without leaning on either extreme. I built the complete identity and product system as one continuous piece of design: foundations, mark, color, type, dark mode, and applications. The dark mode is the part I am proudest of. It is not an inversion. It is a reimagining where the brand idea actually deepens.

The Challenge

No existing visual system. The starting point was a name, a founder, and an audience. Everything else had to be built from first principles.
Three audiences with different needs: homeowners want clarity and reassurance, tradespeople want credibility, property managers want efficiency. One brand had to serve all three.
A marketplace product spans multiple surfaces: marketing site, mobile app, dashboards, embroidered patches, vehicle wraps. A logo alone could not carry that load. The system had to.
Dark mode could not be an afterthought. The product audience expects it as a first-class experience, but most brand systems treat it as a CSS inversion that flattens the original idea.
The system had to be engineering-ready: tokens, type scale, contrast ratios, font loading strategy, fallback stacks. A handoff that depended on me being in the room would not survive past month one.

My Role

I led the complete brand and product system end to end. Concept development including three distinct directions and one mascot exploration, logo system with four lockups, six-token color system, four-tier dark mode surface architecture, six-tier typographic ladder, WCAG AA verification across all token combinations, font loading and fallback strategy, voice and tone guidelines, and full application suite from app screens to vehicle wraps. Delivered as a nineteen-page brand book and a set of production-ready assets.

Process

How I approached it

Step 01

Positioning & Concept

I started with a market map, not a moodboard. Muzzomo sits in the trustworthy middle — local and accountable but not boutique — and that position became the brief for every visual decision that followed. From there I developed three concept directions, including a mascot route. The mascot was honest work, not a token alternative, and it got rejected for the right reason: a marketplace built on trust between strangers needs a calm, structural identity, not a character that distracts from the trades themselves. The selected concept reads as a home with the M as an open door. Two trades, one address.

Step 02

A Complete System, Not a Logo

I built four lockups for different uses, defined clear-space rules anchored to the M-stem height, specified minimum sizes for print and digital, and produced a set of usage rules with six explicit do-not patterns. The system was designed so that someone six months into a Muzzomo job could reach for the right file without asking me.

Step 03

Dark Mode as a Reimagining

Most dark modes invert. I treated dark mode as a parallel design language. The primary deep green moves from background to surface. A four-tier surface system replaces the single cream paper of light mode. Cream itself gets warmer to compensate for the loss of paper warmth. The logo flips inside out: the cream silhouette becomes the body of the house, the M-door is cut through to reveal the canvas behind it. The brand idea deepens in dark mode rather than just adapting to it.

Step 04

Production Handoff

Final delivery was a set of CSS design tokens with explicit property names, fallback font stacks, and WCAG AA verified contrast across all six combinations, alongside a nineteen-page brand book that documents every decision and shows the system at work across vehicle wraps, embroidered patches, mobile screens, packaging, and signage.

Step 05

Color System

I built a six-token color system with documented distribution percentages: deep green 50%, cream 25%, mid green 12%, amber 8%, slate 5%. Each token maps to a semantic role rather than a literal color name, so dark mode can re-map without breaking the brand. Two tokens were retired entirely in dark mode for failing WCAG AA contrast against the new surfaces.

Step 06

Typography System

Fraunces carries the emotional warmth of the brand, Inter handles the functional work at every screen size with tabular numerals for prices and ETAs, and Outfit is retained only for the wordmark. The six-tier type ladder is governed by three protective rules: italic reserved for a few brand moments per page, tabular for data and proportional for prose, and a font loading strategy that lands the system under 230 kilobytes total.

The Solution

A complete brand and product system built as one continuous piece of design, with a dark mode that reimagines the brand instead of inverting it.

+Strategic positioning as the trustworthy middle between mass directories and premium agencies, with a market map driving every subsequent visual decision
+Concept system built around the home-with-open-door idea, selected from three explored directions including a rejected mascot route
+Four logo lockups with clear-space rules, minimum sizes, and six explicit do-not patterns
+Six-token color system with documented distribution percentages calibrated for both light and dark modes
+Four-tier dark mode surface architecture replacing the cream-paper warmth of light mode without flattening the brand
+Six-tier typographic ladder pairing Fraunces and Inter, with three protective rules governing italic use, numerals, and font loading
+WCAG AA verified across all token combinations, with two tokens retired in dark mode for failing contrast requirements
+Nineteen-page brand book delivered as a production-ready system, from foundations through applications

Key Decision

The decision to design dark mode as a parallel language rather than a CSS inversion. The brand idea was warmth and hospitality, and a literal inversion would have killed it. Instead I rebuilt the surface system from the ground up, retired tokens that failed the new contrast environment, and flipped the logo so the door becomes negative space. Dark mode deepens the brand instead of dimming it.

The Tradeoff

A parallel dark mode system takes significantly more work than inverting a light mode palette. Two color tokens had to be retired entirely, every contrast ratio had to be re-verified, and the logo needed a second construction. The upfront cost is real. The payoff is a product surface that does not feel like the brand turned off when the user switched themes.

In Retrospect

The mascot direction I rejected taught me more than the one I kept. Building it fully before discarding it is what proved the door-as-M concept was actually the right answer. A token alternative that exists only to make the preferred direction look better is a waste of the work it took to build it. Both directions had to be real for the choice to mean anything.

Next Project