OVERVIEW
Sleep Number would undergo 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.
BUSINESS GOAL & CHALLENGES
Update our design system and components to enable accurate and efficient execution of the rebrand initiatives. Ensure marketing and business needs are reflected across designs.
Inaccuracies + bugs across our system slowed implementation of designs
Outdated components cluttering our design system
Lack of design consistency created confusion and inconsistencies
MARKETING & BRAND DIRECTION
The marketing and brand teams ran research and requested some design system changes on our website to meet their rebrand needs.
Create a modern design emphasizing interactivity, calm, and simplicity.
Add assets used to communicate comfort and features of mattresses.
Use of a mint color as a secondary to our navy used for promos and actions.
PROBLEM
How might we overhaul Sleep Number's design system to eliminate inconsistencies, clear outdated components, and empower accurate, efficient execution of their largest rebrand to date?
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.
Current Color Definition in Design System
Conducting s system wide audit highlighted our main area of disconnect. Instead of using semantic tokens to define use cases we were referencing the primitive tokens, which caused a lack of alignment on the design and engineering teams.
Market Research
Wanting to gather a better understanding of best practices and trends in the market, I analyzed design system trends of our competitors and other organizations e-commerce based websites.
Rounder buttons and interactive elements
I noticed that many of our competitors were using pill buttons as a way to make them stand out more vs more squared elements on the site.
Color Hierarchy Defines Action Priority
Leading brands anchored primary CTAs to brand color, using red for promos and secondary colors to signal different urgency levels or action priority.
Glassmorphism Used For Neutral Actions
When exploring non-competitor brands I came across Apple and Oura’s use of glass buttons used as a subtle, neutral treatment for tertiary actions.
Accessibility Research
Research was conducted on key areas of our design system to ensure that colors and font selections would be accessible for users when coming to our site to ensure readability and ease of use.
Off-White Background Color
An off-white cream background was chosen after researching how softer background tones reduce eye strain and improve readability, while lending the experience a warm, elevated feel.
Font Selection Satoshi
Satoshi was selected for its warm, modern aesthetic and clean structure, offering a sleek, contemporary feel while remaining highly legible and approachable across type sizes and contexts.
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.
Semantic Token Structure
After collaborating with marketing, and developers, we came together to define single colors for specific use cases. The structure includes colors for: background, text, icon, border, button, states, and focus ring colors.
Typography
Typography was defined across use cases and devices, establishing a clear hierarchy and improving consistency and readability.
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.
Using semantic eements
Components are now referencing semantic tokens that are defined for use across design and engineering teams instead of referencing the color ways.
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 considerable increase in click rates for key CTAs.