← back to the gallery

Sparkles: white coding-agent landing with hand-drawn geometric characters and clear pricing

Tier
inspiration
Roles
hero, explainer, capability, offer, faq, closing
Feel
light, playful, editorial, warm, saas
Motion
pan, reveal
Source
public-site
Site
https://sparkles.dev
Licence
Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
Captured
2026-10-06
Captures
frames: https://images.refero.design/styles/refero.design/video/ea1d9651-11ce-4e42-b280-6e8489abc8dc.mp4
both: https://sparkles.dev

What it does

A short team-builder statement is framed by stacks of hand-drawn rectangles, triangles and circles with faces. Quiet white explanations contrast team problems with a small product demonstration. Two pricing columns, questions and a black subscription footer complete the recorded page.

Section roster

1. Team-builder statement and illustrated characters. 2. Problem explanation. 3. Product solution demonstration. 4. Two-column pricing. 5. Questions. 6. Black subscription footer.

Why it works

The characters give the technical product an approachable visual identity. Sparse layouts and a short pricing comparison keep the product explanation direct.

Source and capture notes

Refero [style page](https://styles.refero.design/style/eefc0305-818c-4f57-80ce-a4bc1f7aac92) and [recorded video](https://images.refero.design/styles/refero.design/video/ea1d9651-11ce-4e42-b280-6e8489abc8dc.mp4); [live site](https://sparkles.dev) checked on 2026-10-06. The recording is a point-in-time reference; current site content may differ. Descriptions distinguish the recording from the current page where they differ. Layout and motion notes come from sampled recording frames and automated live captures; interactive controls were not comprehensively tested. The current page emphasizes agents for the whole team and includes updated web and Slack demonstrations. Its opening uses a larger single character stack rather than the recorded flanking composition.