Scrawl - Vibrant Stationery Landing Page Template

Quick summary

Scrawl is a single-page stationery landing page template that combines a bento grid layout with playful Before/After product reveals and a five-question visual quiz. The Citrus Burst palette of tangerine, lemon, and grapefruit tones creates an instantly warm and energetic feel. It is purpose-built for back to school stationery brands that sell directly to shoppers online.

Who this template is for

This template is built for stationery brands that want to sell curated back to school packs directly from a single page. It suits product-led businesses that benefit from visual storytelling and light personalization.

• Small stationery brands targeting parents, teachers, and grandparents during the back to school season
• Founders who want a direct-sales landing page with a built-in quiz to match shoppers with the right bundle
• Creators and boutique retailers who want a gallery-style page that feels warm and personal rather than corporate

What problem this template solves

Generic stationery pages look institutional and give shoppers no reason to stop scrolling. Scrawl solves the "which pack do I actually need?" problem by turning product browsing into an engaging, personalized experience.

• Shoppers abandon pages when products feel identical and uninspiring
• First-time buyers struggle to choose the right bundle without guidance
• Brands lose email sign-ups because there is no compelling reason to hand over a contact detail

What you get with this template

The template delivers a complete, ready-to-customize landing page with every section pre-designed and purposefully ordered. Each component is built to move shoppers from curiosity to cart.

• A mosaic UGC Photo Wall header with pinned, angled snapshots that feel authentic and human
• A bento grid with Before/After Reveal tiles that flip between plain generics and vibrant Citrus Burst products
• A five-question visual quiz that captures an email and returns a personalized bundle with a shareable personality badge

Feature list

This template packs several distinct functional and visual features into a single cohesive landing page. Each one is grounded in the source brief and built to serve the direct-sales goal.

UGC Photo Wall Header

The header is a mosaic of real-feeling parent-submitted snapshots arranged at playful angles, like a corkboard in a family kitchen. Photos overlap slightly and carry the warm blur of an off-center phone camera, making the page feel lived-in and trustworthy rather than polished and distant.

Bento Grid Layout

The page is structured as a bento grid where tiles grow progressively in size and drama. Small essentials like cards and stickers appear early, while full curated kits take over larger tiles further down the scroll. The layout gives every product its own moment without the page feeling cluttered.

Before/After Product Reveals

Each bento tile flips or slides between a plain, generic supply and its vibrant Citrus Burst counterpart. Visitors can drag, tap, or scroll to trigger each transformation. The reveals build anticipation and communicate product quality better than a static image ever could.

Five-Question Visual Quiz

The primary call to action launches a short visual quiz. Shoppers pick a gradient, choose a card tone, select a grade range, pick must-have items from illustrated icons, and set a budget. The quiz captures an email before showing results, then delivers a named personality badge and a one-click bundle add to cart.

Personalized Bundle Results

Quiz results are not generic. Each outcome delivers a specifically named bundle, a shareable personality badge such as "You're a Gel Pen Maximalist," and a single prominent button to add the pack to cart. Shoppers who skip the quiz can browse curated bundles directly as a secondary path.

Citrus Burst Color System

The entire page uses a warm gradient system built from tangerine pulp, lemon curd, grapefruit blush, and a white notebook margin background. Gradients sweep across bento tiles, call to action buttons sit in ripe clementine, and all body text uses soft charcoal so the color does the heavy lifting.

Page sections overview

Design & branding system

The Citrus Burst palette is the visual backbone of Scrawl. Every color choice reinforces the warmth and energy of a new school year, from the resting background to the most prominent call-to-action button.

• Color palette: tangerine pulp (#FF8C42), lemon curd (#FFD166), grapefruit blush (#F4845F), white notebook margin (#FFF8F0) background, and ripe clementine (#EF6C00) for accent links and buttons
• Text sits in soft charcoal (#3D3D3D) to keep the citrus palette prominent without sacrificing readability
• The Soft Gradient theme sweeps gently from lemon to tangerine across bento tiles, giving the layout visual rhythm without harshness

Mobile & speed optimization

The bento grid and Before/After Reveal interactions are designed to work on touch screens as naturally as on desktop. Shoppers browsing late at night on a phone get the same engaging experience as desktop visitors.

• Before/After tiles respond to tap and scroll gestures, making the reveal interaction feel native on mobile devices
• The quiz is designed as a step-by-step visual flow that works cleanly on small screens without overwhelming the viewer
• The UGC Photo Wall mosaic scales gracefully, keeping the corkboard aesthetic intact at every viewport size

How this template helps you convert

Scrawl is structured as a direct-sales landing page, meaning every design choice points toward a purchase or an email capture. There are no dead ends.

1. The Before/After Reveal builds desire before the shopper reaches the quiz, so they arrive already emotionally invested in the product upgrade
2. The quiz captures an email as the price of entry for personalized results, turning passive browsers into identifiable leads with a named bundle ready to buy
3. The secondary browse path catches quiz-skippers before they leave, giving every visitor a clear route to a curated pack and a purchase decision

Other information about this template

Scrawl fits naturally within the broader back to school retail season when stationery, greeting cards, and school supply bundles see their highest annual demand. The template is built for the direct-sales landing page model, meaning there is no storefront navigation to distract from the conversion path.

• The template suits stationery brands selling back to school greeting cards, gel pen sets, sticker packs, and curated school supply bundles
• The quiz-first structure makes it particularly useful for brands that carry several product lines and want to guide first-time buyers toward the right starting point
• The shareable personality badge result, such as "You're a Gel Pen Maximalist," adds a social sharing layer that can extend the page's reach beyond paid traffic
• The Gallery and Detail template style means product imagery and visual storytelling carry the page, making strong product photography or UGC content a practical requirement

Show more