Design SystemDesigned and developed by:
The building blocks behind interactive learning experiences.
Explore the kit. Try the interactions. See the pieces come together.
THE COLLECTION
A closer look at the design system behind Rondo. From the foundational choices to the things a team can actually do with them.
Four palettes, from expressive brand colors to the quieter tones that hold an interface together.
Three type families, six ways to put them together. From a handwritten introduction to the small print that holds a story together.
The small decisions that make the whole kit feel related.
Two shapes, a scribble, and a little motion. Pick the pieces or shuffle a new composition from the Rondo palette.
One family, 90 variants. Change its size, swap an icon, and try the interaction states.
Fields, choices, and the small supporting pieces. Real-sized, side by side.
Write, choose, switch. Each control is ready to use.
A few of the pieces that connect the experience.
Cards for stories, resources, people, and progress. Explore the details and try each interaction.
+18% vs. last month
+12% this week
Emails, conversations, documents, and the everyday details that make an experience feel familiar. Six formats, ready to explore.
Hi team,
We’re ready to launch on Friday, but the latest feedback suggests the pricing page still feels confusing.
Another test would take two days. The campaign is already scheduled.
What do you think we should do?
Thanks,
Mia
Choose a reply
The new pricing page is ready for another look. Before Friday, can we check that the difference between plans is clear?
I’ve simplified the plan names and moved the comparison above the fold.
Five walkthroughs are booked for tomorrow. I’ll collect the questions people ask.
Perfect. Let’s bring those findings to the go / no-go review.
| 1 | Item | Qty | Unit cost | Total |
|---|---|---|---|---|
| 2 | Customer interviews | $225 | ||
| 3 | Prototype updates | $480 | ||
| 4 | Team review | $150 | ||
| 5 | Launch materials | $240 | ||
| 6 | Contingency | $100 | ||
| 7 | Planned spend | $1,195 | ||
Sort a thought, make a choice, or find a balance. Six ways the same system invites a team into the conversation.
Drag a card, or select one and choose a theme.
The launch is tomorrow, but testers still find the pricing confusing.
Give your recommendation and one reason behind it.
Place yourself between a familiar approach and a bigger leap.
Move the marker to choose what matters most.
One shared 100%. More of one means less of another.
Drag three chips onto the ideas you want to back.
THE KIT, IN CONTEXT
The portal isn’t ready. The meeting is. Step into a short drill and see the system come together.
Try the experienceTHE DESIGN SYSTEM IS THE DELIVERABLE
Rondo is Wavetable’s platform for interactive learning experiences. The brief was to create a reusable design system their team could use to assemble those experiences themselves.
01 / THE CHALLENGE
A reflection, a card sort, and a simulated email all ask something different of the participant. They need distinct interactions while still feeling like parts of the same experience.
02 / THE DELIVERABLE
Foundations, controls, navigation, feedback, activity modules, and workplace artefacts. Components and variants provide reusable pieces for the client’s own interface compositions.
03 / THIS SHOWCASE
Explore components from Rondo’s original Figma library, with browser interactions and responsive layouts built for this showcase. Onest and Bricolage replace the original licensed fonts.
Explore more of Wimble’s work, from design systems to digital products.
Let’s test the revised plan names with five people. A small check could give us the confidence we need.