Copying comes with patterns, for GrinBot buyers
Dance Band
Color familyCream Tomato
Primary#E5341FSecondary#5B2EFFBackground#FFF3E6Surface#FFFFFFText#1C1030Accent 1#E5341FAccent 2#5B2EFFAccent 3#FFC93CAccent 4#FF8FC7
Open in Moodkit ↗

Calm copy the same design, with calmer motion and words

Dance Band (calm)
Color familyCream Tomato
Primary#E5341FSecondary#5B2EFFBackground#FFF3E6Surface#FFFFFFText#1C1030Accent 1#E5341FAccent 2#5B2EFFAccent 3#FFC93CAccent 4#FF8FC7
Open in Moodkit ↗

The idea

the steps are a dance count. A tilted ink band runs the dance styles in huge Clash Display capitals, alternate words in pink. Below it the left column pins as you scroll: a violet chip, "Your first class, on the count of 5, 6, 7, 8." with the count in red, a short line and a red button, while a pink ballet shoe sticker swings from its ribbons. On the right the four steps slide in one by one as white cards with thick ink outlines and hard shadows, numbered 5, 6, 7 and 8, the last one yellow. Behind them a collage of flat shapes (a yellow sun, a pink arch, a red squiggle, a violet triangle) drifts at different speeds as you scroll; a violet "First class free" burst rocks at the foot.

Palette and fonts: warm cream, ink, red, violet, sun yellow, pink · Clash Display 600 and Work Sans

Grinner features used

  • Button
  • Columns
  • Entrance Animation
  • Group
  • Parallax
  • Scrolling Text
  • Sticker
  • Sticky column

The calm copy

the same warm cream section: the tilted ink band of dance styles (now it slides only with your scroll), the pinned "Your first class, on the count of 5, 6, 7, 8." with its red button and the pink ballet shoe, and the four outlined step cards numbered 5 to 8 over the still collage of a yellow sun, a pink arch, a red squiggle and a violet triangle, with the violet "First class free" burst at the foot.

Palette and fonts: warm cream, ink, red, violet, sun yellow, pink · Clash Display 600 and Work Sans

Grinner features used

  • Button
  • Columns
  • Entrance Animation
  • Group
  • Scrolling Text
  • Sticker
  • Sticky column

More Process and Steps

Clean Grid: Process and StepsGlow Stack: Process and StepsTilted Notes: Process and StepsClean Before and After: Process and Steps