Sidestep design system · free to use

Every piece knows how to move.

A free design system for learning products: quiz apps, courses, language practice, training. Use it as it is, or make it entirely yours. Hover or tap anything below and it shows you what it does.

Download it free

Free to use. Made to be changed.

Take it as it is, or take it apart. Every layer is built to be swapped for yours.

Free, as it isComponents, tokens, motion, and the files your AI tools read. No account, no fee.Your brandGive it your color and typefaces. Everything restyles and stays readable.Your motionCalm, snappy, or playful, or tuned to your product.

Foundations

ColorRamps, roles, day and night MotionEight roles, four personalities TypeRubik and Atkinson Hyperlegible Space Shape HubertThe mascot, in Rive IconsEighteen, each with its own move For AI toolsRules your coding agent can follow<Button>

Components

Sixteen of them. Hover or tap a tile to see it move.

Answer choice Lesson complete Progress bar Streak Button Toggle Checkbox Tabs Input List Toast Card Modal Tooltip Icon Hubert

Made for learning products

The moments that bring people back are built in: the right answer, the near miss, the streak, the finish.

Quiz and trivia appsAnswers that feel good to get right, and kind when wrong.Courses and edtechProgress you can see, lesson by lesson.Kids' learningLittle rewards that pop like stickers.Training and onboardingSteps that arrive in order.Language practiceStreaks that reward showing up.Test prepA hint when they are stuck, never the answer.

Try a lesson

These are the real components, working together. Answer correctly twice to finish.

Then change the motion setting at the top of the page and try again: the same lesson, in a different personality.

Which is quicker to decide?

Why does this matter?

Make it yours

Sidestep is free, and every layer is meant to be changed: your design files, your animation, your code.

If you would like a hand, the designer behind it takes on custom work. Book a call

In FigmaA design file and component library in your brand, matched to the code.In RiveA mascot of your own, or animation for your key moments, that drops into the same components.In codeNew components, motion tuned to your product, and rules your AI tools follow.

Bring your own mascot

Hubert is the starting point, not a requirement. Any character built to the same contract drops into the same component: it reacts to the lesson, looks where it is told, and follows your colors and your motion personality, with no app code changes.

It can be any style: flat, hand-drawn, or 3D. And it can do more than the five states Hubert starts with, such as giving a hint, waving hello, dozing off when no one is around, or dancing when a streak grows.

Talk about a mascot See more characters

Hubert, flatThe same character in a simpler style.

The werewolf, idling — **The werewolf**From Halloween Hotel

Haruki, the ninja raccoon, idling — **Haruki, the ninja raccoon**From Character Select

One system, four personalities

The same tokens, mapped four ways. Each tile below runs in its own personality.

CalmFades and gentle settles SnappyQuick, crisp, no fuss PlayfulSprings and squash ReducedNothing travels

Download it free Read the docs Book a call with Jon