← Back to lobby

SONG GONG / DESIGN

Jade & Ink

A dark, music-led interface with clear color roles, compact scores and room for album art.

Color and meaning

Jade

#5CE0A0

Primary actions, correct answers, wins and positive results. Use ink text on filled jade buttons.

Activity blue

#3FBDD9

Games in progress, ready states and active navigation. Pair with a clear status label.

Coral

#FF8D7D

Incorrect answers, losses and errors. The logo retains its coral gradient ending at #FF6B57.

Lavender

#B9ACED

Theme labels and secondary decoration. Never a competing primary action.

Amber

#FFB067

Warnings and attention needed; not ordinary waiting states.

Ink

#0B1118

Page background and text on bright filled controls.

Surface

#172330

Cards and grouped controls. Borders use #304252.

Muted

#A8B6C4

Metadata, supporting text and waiting states. Primary text uses #F5F5F7.

Use color alongside words or symbols. Keep large surfaces quiet; reserve bright color for actions and status. Artwork supplies most of the visual variety.

Typography

Native system sans-serif: SF Pro on Apple devices, Segoe UI on Windows, then the system sans-serif. No additional font download.

Pick a game. Find your rhythm.Page headings · 28–36px · bold
In playSection headings · 24px · bold
Listen, choose your answer, and keep the music going.Body · 16px · regular · 1.5–1.6 line height
284 : 261Card scores · 30px · bold · tabular numerals
Song 3/5 · 15m agoMetadata · 12–14px · regular; compact theme labels may use 11px

Playback and scoring

The ready screen uses representative theme artwork and a filled jade Start button. During guessing, the Song Gong logo hides the album cover; the cover is revealed after an answer or timeout. The blue ring measures remaining clip playback. A separate vertical jade meter and points number measure the guessing window. New Solo and Challenge games allow 15 seconds to answer; earned points lock on selection while the clip continues. Coral marks incorrect answers. Next song lets the player skip the remaining audio.

Cards and navigation

Square artwork anchors each card. Names sit directly above scores; a short status line replaces full-width score bars. Only revealed songs supply lobby artwork. Unplayed games use the Song Gong logo.

● Ready to play✓ Won× LostWaiting

In play uses one horizontal row. Completed games use two rows, scrolling together. View more opens a vertical grid with additional pages. Buttons retain a minimum 44px touch target, and long names truncate without pushing scores out of view.