Brand Identity
Design System
B2B
As FireAlarm.com expanded across ecommerce, education, content, partnerships, and digital products, its visual identity needed a stronger system connecting those experiences.
Role
Lead UX/UI + Brand Designer
Industry
Fire & Life Safety, B2B E-commerce
Deliverables
Brand Playbook · Design System · Content Strategy
Scope
Digital Applications · Reusable Design Patterns
FireAlarm.com wasn’t operating through a single customer touchpoint. The brand appeared across ecommerce, educational content, marketing campaigns, partnerships, media, and other digital experiences. As those experiences grew, so did the number of visual decisions required to create them. Without a shared system, individual assets could work on their own while still feeling disconnected from the larger brand.
The Problem
Growth created inconsistency. As FireAlarm.com expanded across ecommerce, content, education, partnerships, and digital products, the brand had to work across more customer touchpoints. Without a shared visual system, each new experience introduced new design decisions—making it harder to maintain a consistent, recognizable brand.
Strategy
Build a system, not another redesign. Instead of treating each touchpoint as a separate design problem, I created a shared visual foundation for the entire brand. Clear rules for color, typography, hierarchy, imagery, and layout gave the team a repeatable system they could apply across web, marketing, content, and future initiatives. The goal: make FireAlarm.com easier to recognize, easier to design for, and easier to scale.
001
Built one identity system that splits cleanly into two tiers.
Core and Plus share a foundation, but nothing about them reads interchangeable. Distinct color dominance, distinct logo lockup, distinct tone — applied consistently enough that a customer can tell which tier they're looking at without reading a word of copy.
002
Positioned Core around education and product, for a technician audience.
Voice and visuals built for someone who wants clear answers and the right part fast, not a sales pitch. Straightforward, catalog-and-code-focused, matching how a working technician actually thinks. Light-surface-dominant, direct, product-forward.
003
Positioned Plus around premium expert access, using the same tokens inverted
Same brand system, same red, same type, applied to a black, dark-surface-dominant layout instead. Premium doesn't come from new colors, it comes from restraint applied differently. The tone shifts from "here's the product" to "here's expertise on demand."
004
Built the content and voice system that holds both tiers together.
Two distinct content types feed one funnel; pure education, and partner-driven Solutions articles. One strict rule governs everything across both. Lead with the real field problem, and let product follow. Never the other way around. That rule holds in paid social too, where Core ads lead with the product and the technician's problem, and Plus ads lead with access to the expert.
005
Proved the system in real, shipped work.
The identity guide is built directly into FireAlarm.com's actual Figma file, with documented color tokens and explicit use and do-not-use rules, a full button and component library, and a dedicated icon set. The tiered strategy shows up live on the site itself, not just on a guideline page.
