OVERVIEW
Sleep Number was undergoing their largest rebrand initiative to date. I co-led a company-wide design system overhaul to improve accuracy, align with brand standards, and accelerate implementation + cross-functional workflows.
YEAR
2025
ROLE
UX Designer
TEAM
1 Creative Director · 1 Lead Developer · 1 UX Manager · 1 UX designer (Me)
TOOLS
Figma · ChatGPT
CONTEXT
Sleep Number was undergoing its largest rebrand and product transformation to date, introducing a new visual language with updated colors and typography. I was tasked with co-leading the overhaul of the design system. I evolved components and scaled the system to support accurate, timely implementation, while partnering with cross-functional teams to ensure seamless execution.
PROBLEM
Business goal
Update the design system and components to enable accurate, efficient execution of the rebrand for the product launch, while ensuring marketing and business needs are reflected across designs.
Problem
Inaccuracies and bugs across the QA environment, CMS, and design system slowed implementation. Additionally, outdated components and a lack of consistency across the system led to fragmented experiences.
RESEARCH PROCESS
Competitive & Systems Research
Analyzed competitor design systems, component patterns, and visual styles to identify best practices, then adapted these insights to support Sleep Number’s rebrand.
Design Principles & Interaction
Defined standards for visual hierarchy, component behavior, and interaction patterns to improve clarity, consistency, and usability across the system.
Design system + site audit
Conducted an audit of our components, what was on the site and what was being used in our component libraries by engineering team.
Accessibility & Standards
Documented accessibility and usability best practices to ensure components are inclusive, consistent, and easy to implement across teams.
PROCESS
Actionable brand-aligned color scheme
Introduced a cream off-white background to reduce visual harshness and improve comfort while looking in dark spaces, alongside updated color lines and a new mint accent used for secondary actions and promotional elements to align with the rebrand.
Typography
Best practice research showed that corner radius size should adapt to the size of the element to keep design consistent across devices.
(If width >=300px | radius =16px) If width <300px | radius = 8px)
Width-based corner radius
Best practice research showed that corner radius size should adapt to the size of the element to keep design consistent across devices.
(If width >=300px | radius =16px) If width <300px | radius = 8px)
Components
Standardized components ensured a consistent, reliable experience, designed to be scalable, adaptable, and easy to implement. To support ongoing rebrand iteration, I built the system within atomic design, nested components, and variables, with light/dark modes for accessibility and flexibility where necessary.
Documentation
Throughout the overhaul of the design system, documentation was always included on the same page as the component for clarity about the use cases (improving cross-team collaboration.
Clear component definitions, visual examples, and usage guidelines to ensure consistent understanding and implementation.
SOLUTION
The design system overhaul enabled an efficient, high-impact rebrand launch. Introducing an off-white background, adding a mint primary color, pill buttons, refined corner radii, and a solid secondary button for clear visibility without competing with primary actions.
OUTCOME
After defining the system, I partnered with engineering to fix audit-identified issues, remove unused elements, and implement updated designs. I also created a centralized Figma content block library and a corresponding CMS page to improve access for marketing and product teams.
Successful staged launch
(1) Bug fixes and removal of unused elements
(2) Updates to atoms and molecule components (color lines, typography, corner radius, buttons, input areas, ect.)
(3) Content block updates. Allowing iteration, testing, and review before final release.
Boosted efficiency
Partnered closely with the lead front-end developer to write tickets, build a centralized content block repository, and create detailed documentation, reducing guesswork and time spent searching for components.
Accessibility
Replaced ghost buttons with a solid secondary color to improve contrast on images and dark backgrounds, while pill buttons increased interaction recognition with key elements. Saw a 45% increase in click rates for key CTAs.