- Scilent UI Design Guidelines
This document outlines an approach to designing and developing unified, consistent user interfaces integrated with multiple major music platforms. By understanding and respecting the design languages of these platforms, we can create experiences that support and feel native to each while maintaining a distinct identity.
This library currently supports and explores integration with the following platforms:
ℹ️ Why? Included due to its significant market share, especially among iOS users, and its high-quality streaming options.
Apple Music embodies Apple's premium, minimalist aesthetic with:
- Light-themed UI by default with dark mode as an option
- SF Pro typography, never substituted
- Subtle red-to-pink gradient used primarily for branding, not UI elements Thin, uniform icons from SF Symbols with slight rounding
- Flat, minimalist controls without excessive ornamentation
- Generous use of whitespace to create an airy, premium feel Strict preservation of album artwork and artist imagery
ℹ️ Why? Selected for its market dominance and robust API that allows deep integration with third-party applications.
Spotify's design emphasizes discovery and accessibility through:
- Dark-themed UI by default
- Bold, minimalist icons and controls
- High-contrast green accents (#1DB954) used sparingly for highlighting actions
- Circular typeface (or system fonts as alternatives)
- Strong focus on playlist creation and music discovery
- Album artwork presented in its original form without modifications
ℹ️ Why? Chosen for its audiophile-focused approach and to ensure Scilent appeals to users who prioritize sound quality above all else.
Tidal distinguishes itself with a focus on high-fidelity and premium experience through:
- Dark-themed UI by default
- Monochromatic color scheme with occasional blue highlights
- Gotham typeface providing a modern, strong presence
- Simple, geometric icons
- Emphasis on high-resolution imagery and lossless quality
- Premium feel reinforced through subtle animations
- Album-oriented browsing experience
Scilent UI aims to acknowledge the unique characteristics of each platform while allowing for the creation of both fully unified and easily customizable digital music experiences.
Experiencing music includes not just listening to it, but also learning about it, exploring it, and interacting with it. The entirety of that experience should be accessible to all.
Accessibilty is a core principle of every Scilent UI decision, component, tool, and implementation.
- WCAG 2.1 AA compliance as a minimum standard
- Strong color contrast (minimum 4.5:1 for normal text, 3:1 for large text)
- Support for system font size adjustments
- Screen reader compatibility with appropriate ARIA labels
- Keyboard navigation support for desktop
- Touch targets sized appropriately (minimum 44×44px)
- Gesture alternatives for critical actions
- Reduced motion option for animations
- Clear, consistent navigation patterns
- Appropriate loading states and feedback
- Error messages that suggest solutions
- Progressive disclosure of complex features
Scilent adopts a flexible approach to color that respects user preferences and platform conventions, but also allows for full customization when needed.
Scilent UI theme options include:
- Support for default, accent, and functional (success, error, warning, info, etc.) colors
- Default dark and light themes
- Platform-specific themes for ultimate compatibility/compliance
- A system theme option that follows the user's device settings
- Custom theming options for advanced customization
Scilent UI supports a default set of typography options that can be customized as needed, as well as some platform-specific overrides.
Primary headings: 24px, weight 600 Secondary headings: 20px, weight 600 Tertiary headings: 16px, weight 600 Body text: 14px, weight 400 Small text/captions: 12px, weight 400
Apple Music: Slightly decreased font weight (default to 400 instead of 500) Spotify: Slightly increased letter spacing (+0.2px) Tidal: Slightly increased font weight for headings (600 instead of 500)
- Text sizes must scale proportionally on smaller screens
- Minimum body text size of 12px to ensure readability
Coming soon
Preserving the integrity of music artwork is paramount across all platforms:
- Never crop, filter, or modify album artwork
- Display at highest available resolution
- Maintain original aspect ratio (typically square)
- Optional subtle shadows to help artwork stand out against backgrounds
- Adaptable grid system that adjusts density based on device and platform context
Spotify Design Guidelines Spotify Developer Documentation
Apple Music Design Guidelines Apple Music Developer Documentation
Tidal Design Guidelines Tidal Developer Documentation
Coming soon.
1.0 - Initial release of Scilent UI Design Guidelines