← Back to Dev

Library Cards - Design Options (#225)

Testing color/contrast improvements. Keep shape/size, improve visual pop. Issues: stark navy header, white body blends with page bg.

Option A: Current Design (Reference)

Dark navy header gradient, pure white body. Body blends into page background. Stats are plain text.

beginnerStrength

Starting Strength

The classic linear progression program for beginners. Focus on compound lifts with simple progression.

3
Days/Week
12
Weeks
Build strengthLearn compound lifts
barbellsquat rackbench
by Mark Rippetoe
intermediateGeneral

Summer Shred

Get lean and toned for summer. High-intensity training combined with strategic cardio for maximum fat loss.

5
Days/Week
6
Weeks
Lose fatGet toned
dumbbellskettlebellscables
beginnerHypertrophy

Booty Builder

The ultimate glute-focused program. Build, shape, and lift your booty with targeted exercises and progressive...

4
Days/Week
8
Weeks
Build glutesShape booty
barbelldumbbellsresistance bands

Key Differences

Header Treatment

  • A: Pure navy gradient
  • B: Coral accent line, softer gradient
  • C: Solid navy, coral category badge
  • D: Fading gradient, overlapping stats
  • E: Production (same as D)

Body Contrast

  • A: White (blends with page)
  • B: White body on #FAFAFA card
  • C: White with coral stats bar
  • D: #FAFAFA body, elevated white stat cards
  • E: Production (same as D)

Test Notes

  • • Focus on: Does the card pop against the page background?
  • • Does the body section have enough visual weight?
  • • Is there good hierarchy between header and content?
  • • Test on different screens/lighting