About the Hopscotch template
Chalk numbers jump across grey-pavement darkness in this Playful template evoking street games and childhood freedom. The stark white-on-charcoal contrast creates urgency without meanness—ideal for kids' apps, playful startups, and creators keeping childhood alive. Referral leaderboards track the jumps and hops of organic growth.
What the demo shows
The live demo on this page launches Chalkbox, a made-up product we wrote to show the template with realistic copy: the headline reads “Games for the whole block.” and the subhead says “A family app of outdoor games, from hopscotch to tag. Rules, variations and chalk ideas for every age.” Below it you see the signup form, a demo launch countdown and the share-to-climb referral panel exactly as a visitor would. Try the form: in the demo nothing is stored. When you use Hopscotch, you replace Chalkbox with your own product name, headline, subhead and logo; the palette and motion come with it and every colour stays editable.
Design details
Hopscotch is a dark template: a dark grey background (#525252), white type (#fafafa) and a white accent (#fafafa) on the join button, the countdown and the referral highlights. Body text sits at a 7.5:1 contrast ratio against the background, comfortably past the WCAG AAA threshold. Behind the copy the page animates with hand-drawn doodles, clearly visible; visitors who ask their device for reduced motion get a still frame instead. Structurally it uses the Bold layout, shared with 59 other templates, but the palette, the motion and the demo copy are Hopscotch's own.
- Background
- #525252
- Accent
- #fafafa
- Text
- #fafafa
How it compares
Within Playful, Hopscotch stands out for its white accent on a dark grey ground. If it is not quite right, Recess Yellow flips to a light cream canvas with a vivid amber accent and grass swaying in the wind (“Tetherball, sun glare”). Sticker Book flips to a light pink-tinted white canvas with a violet accent and scattered sparkles (“Rainbow page, glossy”). Water Balloon flips to a light pale sky blue canvas with a vivid sky blue accent and ripples spreading across still water (“Splash burst, yard fight”). All of them share the same signup, referral and analytics features, so switching later only changes the look.
Launch with Hopscotch in three steps
- Click “Use this template” and create a free account; Hopscotch is preselected in the page wizard.
- Replace the Chalkbox demo copy with your product's headline and one-line pitch, pick a URL, and optionally set a launch date to show a real countdown.
- Publish and share the link. Every subscriber gets a personal referral link, and you watch signups and top referrers arrive in the dashboard.
