SmartHome+ Chameleon Design System
A color system that goes beyond palette chips.
All the vibes
Brand expression is at the core of the app’s experience, from friendly onboarding messages to moments of delight.
Brand palettes define brand colors and usage as a full white-labeled product experience.
Trimming down the visual clutter + noise
Smart homes are already overwhelming enough with all of the notifications, devices, and automations.
Semantic meaning defines colors based on meaning with scoped Figma variables.
Adaptive theming
Supporting an aging population is one of the strongest benefits for a smart home.
Color adapts to various modes including high contrast to support accessibility.
Transforming confusion to clarity
Complexity distilled into processes that our team trusts
Transitioning our work into design tokens required a higher level of abstract system thinking that made understanding how to apply conceptually to product difficult at first.
Hierarchy defines what is available baseline in the app to support functionality to all brands and how we handle brand expression and branding overrides.
Empowering our product teams to feel confident with design tokens
Reducing anxiety while interacting with our system was a crucial to mitigating adoption fiction and increasing understanding across our product teams.
Carefully organizing libraries, aggressively scoping to match our semantic structure, and selectively publishing allowed for the complexity of our system to be easier to navigate and understand.
Confidence is a metric we measure in our system. The specific metric helps provide an insight into adoption and the design system’s ability to serve the needs or our designers and developers.
The “ah-ha” moment with theme and mode switching
The moment our product teams saw theme switching in motion, a light switch activated in their minds.
Our color system is more than surface level hex codes collected as styles in Figma, we created a complex system with meaning.