The complete visual guide for ShiftMate's design system.
The carefully selected colors that define ShiftMate's visual identity
#5d3fd3
#4930a3
#7e64e8
#ff6b6b
#252a41
#f5f6fa
How we chose our color palette
The primary purple color scheme was inspired by the concept of twilight and dawn - the times when shift workers often transition between work and rest. The gradient from deep purple to lighter lavender represents the transition between night and day, symbolizing the different shifts many users work.
The secondary red color provides a vibrant accent for highlighting important elements, such as notifications and alerts. This creates a balanced visual hierarchy while maintaining an energetic feel appropriate for an app focused on productivity and alertness.
The typefaces that bring consistency and readability to our brand
Poppins is a geometric sans-serif typeface with a modern feel. Its clean lines and excellent readability make it perfect for both headings and body text across all digital platforms.
ShiftMate Typography Example
ShiftMate Typography Example
ShiftMate Typography Example
ShiftMate Typography Example
ShiftMate Typography Example
The font choice was inspired by modern mobile application design principles, with a focus on clarity and legibility across different screen sizes. Poppins works well in both light and dark modes and maintains excellent readability even at smaller sizes.
The icon system that provides visual cues throughout the interface
ShiftMate uses Font Awesome icons for a consistent, recognizable icon system. These icons were chosen for their clean, modern appearance and excellent scalability across different device sizes.
The visual mark that represents ShiftMate
Primary Logo
Dark Background
The ShiftMate logo combines a clock face with a calendar element, symbolizing the app's dual focus on time management and shift scheduling. The circular shape represents continuity and the cyclical nature of shift work, while also ensuring the logo works well as an app icon.
The gradient color treatment adds depth and dimension, making the logo visually appealing across both digital and physical applications.
The concepts and principles that shaped ShiftMate's visual identity
ShiftMate's interface draws inspiration from Google's Material Design guidelines, emphasizing intuitive navigation, clear visual hierarchy, and purposeful motion.
Subtle neumorphic design elements create a sense of tangibility in the interface, with soft shadows and highlights giving controls a sense of depth.
The color scheme and layout were partially inspired by healthcare applications, as many shift workers are in medical professions, creating a familiar environment.
ShiftMate's brand identity was designed to convey reliability, organization, and ease-of-use. The visual elements come together to create a professional yet approachable experience that resonates with busy shift workers who need a dependable tool to manage their complex schedules.
The purple-dominant color scheme sets ShiftMate apart from competitors while creating a calming, focused experience that reduces stress when managing complex shift patterns.