Aftershow · Phase 3 · UI Design

My Shows.

Tab 1 — Archive View · Both themes · The product hero
The archive is the product. The feed is the reward.

My Shows — Both Themes
Showing Marcus's archive — 214 shows, sorted by Recent. Setlist peek on top card only to show density variation.
Dark Vintage
9:41
●●● ▲ ▮
My Shows 214 shows
214 Shows
89 Artists
17 Years
2026
The Black Queen
★★★★★
Thalia Hall May 17, 2026
01 Medley Intro
02 Ice to Never
03 Secret Scream
+ 11 more songs
›
The Black Queen
2023
Gojira
★★★★★
Aragon Ballroom Jun 12, 2023
›
Nine Inch Nails
★★★★★
Riviera Theatre Sep 4, 2023
From Memory ›
2019
Monuments
★★★★★
Metro Chicago Oct 19, 2019
From Memory ›
♪ Shows
◈ Feed
⊙ Discover
○ Me
Vintage Bold
9:41
●●● ▲ ▮
My Shows 214 shows
214 Shows
89 Artists
17 Years
2026
The Black Queen
★★★★★
Thalia Hall May 17, 2026
01 Medley Intro
02 Ice to Never
03 Secret Scream
+ 11 more songs
›
The Black Queen
2023
Gojira
★★★★★
Aragon Ballroom Jun 12, 2023
›
Nine Inch Nails
★★★★★
Riviera Theatre Sep 4, 2023
From Memory ›
2019
Monuments
★★★★★
Metro Chicago Oct 19, 2019
From Memory ›
♪ Shows
◈ Feed
⊙ Discover
○ Me
Component Inventory

Every component on this screen.

ArchiveHeader Organism
ChildrenScreen title + show count + StatPills row + SortBar
Title fontPlayfair Display Italic 700 · 26px — same display role as Log a Show. Consistency across tabs.
CountDM Mono · 10px · accent-gold — live count, updates on every log. The number is the reward.
StickyHeader sticks on scroll. Cards scroll beneath it. Stats stay visible.
StatPill Atomic
Propsvalue: number · label: string
Value fontPlayfair Display Italic 700 · 18px — same family as artist names. The number earns serif treatment.
Label fontDM Mono 400 · 8px · uppercase — minimal, subordinate to the number
Three pillsShows · Artists · Years. These are the three axes of identity for a die-hard fan.
SortBar Molecule
TabsRecent · Artist · Rating · Venue
Active stateaccent-gold text + bottom border. Same treatment as nav tabs — consistent active language.
DefaultRecent — chronological, most relevant on return. Archive sorted newest-first by default.
Artist sortAlpha A–Z with year-dividers replaced by letter dividers.
YearDivider Atomic
PurposeGroups shows by year when sorted by Recent. Creates the "journal chapter" feel.
FontDM Mono 400 · 9px · uppercase · muted — structural, not decorative. Gets out of the way.
AdaptsSwitches to letter (A, B, C…) when sorted by Artist. Hidden in Rating and Venue sorts.
ShowCard Organism
Propsartist: string · venue: string · date: string · rating: 0–5 · setlist: Song[] · fromMemory: boolean
Artist fontPlayfair Display Italic 700 · 15px — the name is the headline. Always.
Setlist peekFirst 3 songs in Crimson Pro Italic · 12px. Shows on most-recent card by default. User can toggle globally in settings.
From MemoryTag shown in card footer only — not the header. Subtle, never punitive.
Tap targetFull card is tappable → Show Detail screen. Chevron is a visual cue only, not a separate tap zone.
BottomNav Organism
TabsShows · Feed · [+] Log · Discover · Me
Log buttonCenter raised circle — 44px, floats above nav bar. The single most important tap in the app.
Activeaccent-gold icon + label. Inactive: heavily muted — nav should disappear when not needed.
DarkLog btn: #D4A853 bg / #0C0C0C icon
LightLog btn: #1A1209 bg / #EDE6D3 icon
Phase 3 · My Shows · Component Spec · May 2026