Copying comes with patterns, for GrinBot buyers
Story Pile
Color familyTangerine Navy
Primary#FF6A1FSecondary#2A1F5CBackground#FFF4E8Surface#FFFFFFText#1A1230Accent 1#FF8A4CAccent 2#FFD23FAccent 3#FF6A1FAccent 4#1A1230
Open in Moodkit ↗

Calm copy the same design, with calmer motion and words

Story Pile (calm)
Color familyTangerine Navy
Primary#FF6A1FSecondary#2A1F5CBackground#FFF4E8Surface#FFFFFFText#1A1230Accent 1#FF8A4CAccent 2#FFD23FAccent 3#FF6A1FAccent 4#1A1230
Open in Moodkit ↗

The idea

a climbing wall's stories page with the energy of the wall itself. On bright orange, a giant violet "48" counts up over "stories from", zigzag-underlined, and the last line keeps changing in serif italic: the cave, the top rope, kids' club, the setters. A violet "Read all 48 stories" button grows on hover. On the right a fanned pile of three cream story cards with thick ink borders (bouldering, rope, kids' club) spreads when you point at it and brings the card under the pointer forward; each card has its picture, topic, title, one line, date and reading time, and a "Read the story" link. A violet chalk bag rocks above the pile, a yellow star turns below it, and a dark strip of topics runs across the foot.

Palette and fonts: bright orange, cream, deep violet, ink, yellow · Archivo 800 expanded, Instrument Serif italic, Outfit

Grinner features used

  • Accent
  • Button
  • Card Pile
  • Columns
  • Count up
  • Link hover
  • Pile Card
  • Scrolling Text
  • Sticker
  • Text Rotator

The calm copy

the same bright orange stories page: the giant violet "48", "stories from the cave." with the zigzag under "stories", the violet button, the fanned pile of three cream story cards that spreads on hover, the chalk bag and star resting on their corners, and the topics set as one still line on the dark band.

Palette and fonts: bright orange, cream, deep violet, ink, yellow · Archivo 800 expanded, Instrument Serif italic, Outfit

Grinner features used

  • Accent
  • Button
  • Card Pile
  • Columns
  • Group
  • Link hover
  • Pile Card
  • Sticker

More Blog List Layouts

Topic Chips: Blog List LayoutsEpisode Table: Blog List LayoutsIndex by Year: Blog List LayoutsRecipe Series: Blog List Layouts