blastoise/android/BlastoiseNative/DESIGN.md

2.0 KiB

Blastoise Native Android Design Brief

Design direction: broadcast-console music app, not generic AI dashboard.

Principles

  • Put the listening task first: current channel, current track, transport, progress, channel switcher, and queue preview must stay visible on the main screen.
  • Use explicit states: connected, loading, disconnected, guest session, drift, buffering, and playback state are visible without opening logs.
  • Avoid generic AI decoration: no random blobs, ornamental gradients, nested cards, oversized empty hero areas, or decorative metrics.
  • Keep controls direct and tactile: large touch targets, clear labels, predictable placement, no hidden primary actions.
  • Keep diagnostics subordinate: useful for development, but visually quieter than playback.

Theme

  • Personality: late-night radio console, compact and technical.
  • Display/body font: Rajdhani.
  • Diagnostics font: JetBrains Mono.
  • Background: near-black.
  • Surfaces: layered blue-black panels.
  • Accents: safety orange for primary actions, level-meter green for live sync, brass for warnings/session state, restrained red for failures.
  • Avoid blue, cyan, and purple as dominant interface colors.
  • Corners: squared receiver hardware. Use small 2-4dp radii, never bubbly cards.

Layout

  • Header: app identity plus connection status.
  • Server row: compact editable endpoint and reconnect action.
  • Mode switch: RADIO and LIBRARY are first-class modes.
  • Main deck: station/library identity, track title, progress, transport, session/sync health.
  • Transport controls: use a real player strip with previous, seek back, large play/pause, seek forward, and next. Avoid generic equal-width text buttons for playback.
  • Radio channels: station cards that feel like playlists/radio rooms the user can join.
  • Library: dense track rows for direct local-style MP3 playback from the server library.
  • Queue: next few tracks for Radio mode, not the whole library.
  • Diagnostics: compact, monospaced, last few events.