SleepWell UI Library
Putting together a cohesive UI system for a case study project
UI improvement
simplicity
figma
Context
For this short case study, I developed a simple style guide for a meditation app. The goal was to create a cohesive visual and typographic framework that would support a calming, user-friendly experience. The style guide focused on color palettes, typography, iconography, and layout principles, ensuring that the app's interface was both aesthetically pleasing and functional, enhancing the overall meditation experience for users.

Primary
Neutrals
Semantic
Small Button:
Padding L/R -> 2x font height
Padding T/B -> 0.5x text height
Full-Width Button:
Padding L/R -> Fill
Padding T/B -> 0.5x text height
Label
Primary
/
Sweet Purple
Label
Secondary
/
Lavender
Label
Outline
/
light
Normal
Label
Label
Label
Disabled
Apply
Apply
Label
Label + Icon
Label
Label
Label
Icon
Label
Label
Label
2
Vertical List
/
library views
Horizontal List
/
carousel view
© 2025 Nyle Collins