Objective

Inspired by the Google Home app for iPhone, this project aimed to design a seamless dual-theme experience—supporting both light and dark modes—with an emphasis on accessibility, contrast, and adaptability. Leveraging WCAG 2.1 standards and tools like the Stark Contrast & Accessibility Checker, every color palette and typography decision was validated to ensure readability and user comfort

Research & Insights

Research showed that dark mode helps reduce eye strain in low-light settings, while light mode is better for reading and daytime use. Since users switch based on context, offering both modes improves usability and inclusivity. Consistent visuals also enhance comfort, so I focused on balanced colors and smooth transitions throughout the design.

Design Process

Established a color token system in Figma, leveraging variables for light/dark themes:

Primary accent
Neutral grays (20–800)
Text & background tones
These were applied consistently across buttons, cards, and text to ensure accessibility compliance

Responsive Layouts

Designed for multiple viewports (375px to 1920px) using Figma’s Auto Layout to maintain consistency across device sizes and modes. The final design includes two cohesive themes: a bright, distraction-free light mode for daytime use, and a dark mode with muted tones for comfort in low-light settings. I ensured strong contrast and optimized all components—like buttons and toggles—to adapt seamlessly to each theme.

Theming Switch

Implemented a toggle control and a system-level prefers-color-scheme CSS approach to detect theme preference or allow manual switching

Outcomes & Reflections

This project deepened my skills in accessibility and inclusive design, highlighting the value of adaptable interfaces. I implemented and tested theme-switching using modern tools, refined my use of design systems, and ensured WCAG compliance with tools like Stark—all to create a more comfortable, user-friendly experience.