ShiftMate Brand Identity
Essential visual guidelines for ShiftMate's design system - colors, logo, and typography that define our brand.
Essential visual guidelines for ShiftMate's design system - colors, logo, and typography that define our brand.
The carefully selected colors that define ShiftMate's visual identity
#2B1F35
Logo background, headers, footers
#4930a3
#7e64e8
#ff6b6b
#252a41
#f5f6fa
How we chose our color palette
The brand primary color #2B1F35 is derived from the ShiftMate logo background, ensuring perfect consistency across all brand touchpoints. This deep, sophisticated purple conveys professionalism and reliability - essential qualities for healthcare professionals.
The supporting purple and gold accents create a harmonious palette that represents the transition between shifts, while maintaining excellent readability and accessibility standards.
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
Use on light backgrounds and white surfaces
Use on dark backgrounds and colored surfaces
Essential rules for maintaining brand consistency
How ShiftMate's advanced features are represented visually
The repeat notification system (1 of 10, 2 of 10, etc.) uses clear numerical indicators with consistent typography. The active alarm page features a prominent stop button with immediate visual feedback.
Custom sound integration with background audio management ensures reliable alarm delivery. Visual indicators show audio status and custom sound selection.
Notifications feature clear alarm names with English text, formatted as "Name Alarm ⏰" for immediate recognition. The repeat count is prominently displayed.
The dedicated alarm page provides full control with real-time status updates, remaining repetition counts, and one-tap cancellation for user convenience.
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.