Case Study
Umbrel
B2B2C
Logo suite
Typography system
Color palette selection
Brand asset library
Verbal identity & messaging
Brand guidelines
Brand-ready UI library
Umbrel is an insurance platform built to help agents manage protection across clients, policies, and renewals. We designed the brand identity and product design system, defining the visual language, core UI patterns, and foundational workflows that power dashboards, client profiles, and opportunity tracking.
RESULTS
The outcome was a unified brand and system that improved visibility across accounts and supported faster decision making. Agents gained structured tools to identify gaps, manage renewals, and act on opportunities, while clients benefited from connected coverage and better communication.
Discovery
&
Strategy
Umbrel’s brand reflects structure, coverage, and continuity. Research into the competitive insurance market shaped a mission to make protection visible, connected, and actionable. This direction informed the voice, visual system, and product structure, aligning the identity with the daily needs of agents while supporting client communication.
Color
Umbrel’s color system was designed to feel professional and modern while standing apart in the insurance market. A neutral base signals stability, and Neon Yellow creates recognition across product and marketing touchpoints. In the UI, neutrals structure dashboards and data views, while Neon Yellow highlights renewals, risks, and required action so key moments are visible at a glance. Seaglass and Mist support status and coverage states without competing with primary signals.
Typography
Umbrel’s typography system was selected to support speed and readability across dashboards, tables, and client records while reinforcing a professional tone across brand and product. We chose a modern sans serif for headlines to create presence in marketing and navigation, paired with a highly legible system font for body copy and dense data views.
Logo
The Umbrel logo is built from a series of vertical bars arranged in an arc, forming a structured system that reflects coverage across clients and policies. The modular shapes reference guardrails and protection frameworks, reinforcing Umbrel’s role in supporting agents as they manage risk and renewal cycles.
The arc creates a subtle nod to an umbrella silhouette without relying on a literal symbol. This restraint keeps the mark modern and scalable while embedding the idea of shelter and coverage directly into the structure of the logo.
Visual Language
Umbrel’s visual language centers on expressing the idea that coverage follows people through change. Structured graphic elements drawn from the logo extend into layouts across social, web, and product, creating continuity and recognition. High contrast color blocking and bold typography anchor key messages around renewals, risk shifts, and connected policies, while photography highlights real planning moments. The result is a cohesive system that feels consistent in marketing and purposeful within the product experience.
Product Design System
Umbrel’s design system carries the brand directly into the product experience, supporting both agents managing portfolios and clients reviewing their coverage. Color, typography, and spacing are applied consistently across dashboards, client views, and renewal workflows, creating alignment between marketing and in product interactions.
The system is fully light and dark mode compatible, ensuring accessibility and comfort across environments while maintaining brand recognition. Shared components and standardized states allow the platform to scale with new features, keeping experiences consistent for agents and clients as the product evolves.
%201.png)
%201.png)
%201.png)
%201_.png)
%201.png)
%202.png)