Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
workspace-spread
Widen a single panel to fit three workflow lanes.
result-condense
Contract around one reviewed output.
card-settle
Task cards enter their lanes with a small shared rise.
signature-fold
The panel becomes the container for a supplied brand mark.
Sound
A precise, light electronic pulse with room for a calm voice.
Voice
Clear and practical, 125-145 words per minute; describe actual actions and visible results.
What's in the pack
STYLE.md
276 lines: tokens, motion system, 6+ scene recipes, captions, sound, ratios, self-audit.
SKILL.md
Auto-loads in Claude Code when you ask for this look.
palettes.json
4 tested palettes + rules for mapping your brand colours.
showcase.html
A working reference composition of every signature move.
Principle: keep one spatial anchor · change shape for a reason · leave time to read
More product & saas styles
Hardware Hero Reveal
$29A CSS-3D product turning in a dark studio, rim light sweeps and spec callouts on leader lines.
Midnight Gradient Launch
$19Dark, glowing launch energy for SaaS and developer tools.
AI Chat Reveal
$19Prompts that type, answers that stream and deliverables that develop — for AI product launches.