Pulse — Music Streaming App with Accessible Light & Dark Mode

Platform & Device

For this project, I designed Pulse, a mobile music streaming application for iOS devices (using the provided mobile template).

The goal was to create a clean, immersive listening experience while ensuring accessibility and WCAG-compliant dark mode support.

🌞 Light Mode — Major User Flow Screens

The following primary screens were designed in light mode:

• Splash Screen
• Home
• Playlist Detail
• Now Playing
• Settings

The light mode uses a soft beige background to create a warmer and more relaxed atmosphere compared to pure white interfaces. White surface cards are layered on top to maintain structure and visual hierarchy.

Design priorities in light mode:

• Clear section grouping (Recently Played, Top Albums, Made for You)
• Album artwork as the visual focal point
• Minimal text to improve scannability
• Bottom navigation for thumb-friendly interaction

🌙 Dark Mode — WCAG-Compliant Color System

Dark mode was not created by simply inverting colors. Instead, I developed a dedicated dark color palette designed to meet WCAG AA contrast standards (4.5:1 ratio for normal text).

Dark Mode Palette:

• Background: #121212
• Surface: #1E1E1E
• Elevated Surface: #242424
• Primary Text: #FFFFFF
• Secondary Text: #B3B3B3

Accessibility considerations:

• High contrast between text and background
• Clear distinction between primary and secondary text
• Large touch targets in the player and navigation
• Consistent typography hierarchy

Mode Switch Placement

The theme toggle was placed inside the Settings screen under “Dark Mode” to avoid cluttering the Home interface while remaining discoverable.

This follows established user mental models, where appearance preferences are typically found within profile or settings areas.

The prototype includes interactive switching between light and dark mode using Smart Animate.

Accessibility & Inclusivity

The design prioritizes inclusivity by:

• Ensuring WCAG-compliant contrast ratios
• Using clear typography hierarchy
• Providing large interactive controls in the player
• Avoiding reliance on color alone to communicate meaning

The interface remains readable and usable across lighting environments and user contexts.

Scannability & Visual Hierarchy

The layout was designed for quick scanning:

• Section titles clearly separated
• Album artwork prioritized visually
• Minimal text blocks
• Consistent spacing system
• Bottom navigation for predictable access

Users can locate content without needing to read dense text.

Visual Design Approach

Pulse follows a minimal, content-first design philosophy.

• Neutral UI allows artwork to stand out.
• Soft beige creates warmth in light mode.
• Layered charcoal surfaces enhance immersion in dark mode.
• Accent color used sparingly for key actions (Play, active states).

The result is a cohesive system across both themes.

Interactive Light ↔ Dark mode available here:

https://www.figma.com/proto/v68gp8Ec8Ti5nH7ILnOmsg/Music-App?node-id=29-139&p=f&t=YHHACCoTtl0ATbld-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=1%3A2&show-proto-sidebar=1