Aftershow · Phase 3 · UI Design

Tonight Feed.

Tab 2 — Tonight view · Both themes
Live logging cards. Partial setlists. The world at a show, right now.

Tonight Feed — Both Themes
Tonight tab active. LIVE cards with setlist previews, show progress bar, just-wrapped section.
Dark Vintage
9:41●●● ▲ ▮
Feed
47 shows happening now
in 23 cities
RC
Nine Inch Nails
Riviera Theatre Chicago Tonight
9 songs · ~1h 10m in
Setlist
updating
7 March of the Pigs
8 The Perfect Drug
9 Hurt
+ 12 more expected ›
♥ 12 ↵ 5 ● live
JA
Paramore
State Farm Arena Atlanta Tonight
17 songs · encore soon
Setlist
updating
15 Decode
16 Ignorance
17 Misery Business
enc. expected ›
♥ 31 ↵ 14 ● live
VO
Deafheaven
Vulkan Arena Tonight
8 songs · mid-set
Setlist
updating
6 Dream House
7 Vertigo
8 The Pecan Tree
+ 5 more expected ›
♥ 22 ↵ 7 ● live
Just Wrapped
PM
The Cure
AO Arena Manchester
★★★★★
“Robert Smith still sounds like he’s in agony. Perfect.”
♥ 44 ↵ 9 29 songs
TS
Boris
Zepp DiverCity Tokyo
★★★★★
“Two hours of drone and it still wasn’t enough.”
♥ 34 ↵ 12 18 songs
♩ My Shows
◈ Feed
⊙ Discover
◎ Me
Vintage Bold
9:41●●● ▲ ▮
Feed
47 shows happening now
in 23 cities
RC
Nine Inch Nails
Riviera Theatre Chicago Tonight
9 songs · ~1h 10m in
Setlist
updating
7 March of the Pigs
8 The Perfect Drug
9 Hurt
+ 12 more expected ›
♥ 12 ↵ 5 ● live
JA
Paramore
State Farm Arena Atlanta Tonight
17 songs · encore soon
Setlist
updating
15 Decode
16 Ignorance
17 Misery Business
enc. expected ›
♥ 31 ↵ 14 ● live
VO
Deafheaven
Vulkan Arena Tonight
8 songs · mid-set
Setlist
updating
6 Dream House
7 Vertigo
8 The Pecan Tree
+ 5 more expected ›
♥ 22 ↵ 7 ● live
Just Wrapped
PM
The Cure
AO Arena Manchester
★★★★★
“Robert Smith still sounds like he’s in agony. Perfect.”
♥ 44 ↵ 9 29 songs
TS
Boris
Zepp DiverCity Tokyo
★★★★★
“Two hours of drone and it still wasn’t enough.”
♥ 34 ↵ 12 18 songs
♩ My Shows
◈ Feed
⊙ Discover
◎ Me
Tonight Feed. Component Spec
LiveHeaderBar Atomic
ContentPulsing red dot · "X shows happening now" · "in Y cities"
Dotblink animation 1.4s ease-in-out · #C4401C · 7px diameter
Count textDM Mono 500 · 8px · #C4401C both themes
Cities textDM Mono 400 · 7px · text-tertiary · right-aligned
DataLive count via WebSocket in prototype. Static in mockup.
ShowProgressBar Atomic
PurposeShows how far into the set the logger is. Scannable at a glance.
TrackFull width · 2px height · bg-border color
Fill#C4401C · width = (songs logged / expected total) × 100%
LabelDM Mono · 7px · "[N] songs · [context]" — context changes as show progresses: "mid-set", "encore soon", "~Xh Xm in"
ExpectedDerived from Setlist.fm average set length for artist. P1 — static in MVP.
LiveSetlistPreview Molecule
ContentLast 3 songs logged · song number + title · "updating" indicator
Latest songBottom song highlighted in accent-gold — most recent entry
Update dot4px red dot · blink animation 2s · sits beside "updating" label
Footer"+ N more expected ›" or "enc. expected ›" based on progress
BackgroundSlightly darker than card bg — inset panel feel
FontSong titles: Crimson Pro Italic 400 · 13px · secondary text color
Tap actionOpens full Show Page (P1 — not in MVP feed)
LiveCard Molecule
vs. FeedCardAdds: ShowProgressBar, LiveSetlistPreview, red border glow on active-show state
BorderActive show: rgba(196,64,28,.45) border + subtle red box-shadow
Footer stat"● live" replaces song count while show is in progress
No ratingStars not shown until show wraps — rating filled at end of log
WrappedCard Molecule
PurposeShows that ended tonight but aren't full archive posts yet
BadgeDONE — muted border, tertiary text. Contrast with LIVE badge.
Opacity0.7 dark / 0.75 light — visually recedes below LIVE cards
RatingStars shown — rating was submitted when show ended
TransitionLiveCard → WrappedCard when logger taps "End Show" in live logging mode
TonightFeedScreen Organism
Default tabTonight active · Friends shows empty state ("no one out tonight") · Global shows abbreviated list
SortLIVE cards first (newest → oldest by start time) · Just Wrapped below divider
Load more"42 more shows tonight ↓" — pagination, not infinite scroll
RefreshPull-to-refresh (P1). Live cards auto-update setlist via WebSocket in prototype.
Phase 3 · Screen 7 of 14 · Tonight Feed