UI System
Watermelon’s visual design is built on Material Design 3 with a custom dark-first palette optimized for music streaming.
Color Tokens
Primary Palette
| Token | Hex | Usage |
|---|---|---|
Watermelon | #FF1A4C | Brand accent, CTAs, active states |
Watermelon Dark | #C2002B | Hover / pressed states |
Surface | #0A0A0A | App background |
Surface Container | #141414 | Cards, sheets |
Surface Container High | #1C1C1C | Elevated cards |
Utility Colors
| Purpose | Hex |
|---|---|
| Error | #E54545 |
| Success | #4ADE80 |
| XP Accent | #E2B124 |
| Rank Tiers | Gradient from green → cyan → purple → gold |
| Rank Legend | #FFD700 (gold) |
| Rank SpectrumLord | #00FFFF (cyan) |
Dynamic Theming
Material You dynamic colors are supported on Android 12+:
val colorScheme = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
dynamicDarkColorScheme(context)
} else {
WatermelonDarkColorScheme
}Typography
| Scale | Size | Weight | Usage |
|---|---|---|---|
| Display Large | 57sp | 400 | Splash / Welcome |
| Headline Large | 32sp | 700 | Screen titles |
| Title Large | 22sp | 600 | Card titles |
| Title Medium | 16sp | 600 | Section headers |
| Body Large | 16sp | 400 | Primary text |
| Body Medium | 14sp | 400 | Secondary text, descriptions |
| Label Large | 14sp | 500 | Buttons, badges |
| Label Medium | 12sp | 500 | Chips, captions |
| Label Small | 11sp | 500 | Timestamps, metadata |
Font: System default (Roboto on Android, Inter on Web)
Spacing Scale
| Token | Value |
|---|---|
spaceTiny | 2.dp |
spaceXS | 4.dp |
spaceSmall | 8.dp |
spaceMedium | 16.dp |
spaceLarge | 24.dp |
spaceXL | 32.dp |
spaceXXL | 48.dp |
Component Catalog
Buttons
// Primary CTA
Button(
colors = ButtonDefaults.buttonColors(
containerColor = Watermelon
)
) { Text("Play Now") }
// Secondary
OutlinedButton(
border = BorderStroke(1.dp, Watermelon)
) { Text("Add to Queue") }
// Icon Button
IconButton(
onClick = { /* toggle favorite */ }
) { Icon(Icons.Filled.Favorite, null) }Cards
| Type | Elevation | Corner Radius | Background |
|---|---|---|---|
| Elevated Card | 2.dp | 12.dp | Surface Container |
| Filled Card | 0.dp | 12.dp | Surface Container |
| Outlined Card | 0.dp | 12.dp | Border 1.dp |
| Playlist Card | 4.dp | 16.dp | Gradient overlay |
Images
| Component | Shape | Size | Cache |
|---|---|---|---|
| Song thumbnail | RoundedCorner(8.dp) | 56×56.dp | Coil memory |
| Artist image | CircleShape | 56.dp / 120.dp | Coil memory |
| Playlist cover | RoundedCorner(12.dp) | 160×160.dp | Coil disk |
| Profile avatar | CircleShape | 80.dp | Coil disk |
Progress Bar
LinearProgressIndicator(
progress = { currentMs / durationMs },
color = Watermelon,
trackColor = SurfaceContainerHigh,
modifier = Modifier.height(2.dp)
)Animation Specs
| Animation | Duration | Easing |
|---|---|---|
| Screen enter | 300ms | ease-out |
| Screen exit | 200ms | ease-in |
| Card press | 100ms | spring(stiffness=300) |
| Mini-player slide | 250ms | spring(stiffness=400) |
| Progress update | 1s | linear (every 500ms tick) |
| Skeleton shimmer | 1.5s | linear (infinite) |
| Staggered list | 50ms/item | ease-out |
Responsive Breakpoints
| Name | Width | Layout Change |
|---|---|---|
| Compact | < 600.dp | Single column, bottom nav |
| Medium | 600–840.dp | 2-column grids, rail nav |
| Expanded | > 840.dp | 3-column grids, side nav |
Icons
Icon set: Material Icons (Rounded variant)
| Icon | Name | Context |
|---|---|---|
| 🏠 | Home | Home tab |
| 🔍 | Search | Search tab |
| 📚 | LibraryMusic | Library tab |
| ⚙️ | Settings | Settings tab |
| ▶️ | PlayArrow | Play action |
| ⏸️ | Pause | Pause action |
| ⏭️ | SkipNext | Next track |
| 🔀 | Shuffle | Shuffle mode |
| 🔁 | Repeat | Repeat mode |
| ❤️ | Favorite | Liked state |
| ⬇️ | Download | Download action |
| 🔔 | Notifications | Push settings |
Dark Mode
Watermelon is dark-first — light mode is not supported. The palette is tuned for:
- OLED black backgrounds (
#000000) - Reduced eye strain during night listening
- Battery savings on OLED displays
- Immersive full-screen player experience