One brand, a different face for every age.
Infinitas Learning makes digital products for learners and teachers across a wide range of ages. A new visual language meant the look and feel had to shift almost like a brand switch, from a young learner to a teacher, while staying one Infinitas. I rebuilt the token foundation so a single system could flex by theme, audience, mode, and breakpoint, all from one core.
The problem
One brand that has to feel like several
Infinitas serves a huge age range, from young learners to their teachers, across more than one product. A new visual language was coming, and it asked a hard question of the foundation: the same product needed to feel right for a child and for an adult, almost a brand switch, while staying unmistakably one Infinitas, in light and in dark.
The old token structure was not built for that. Stack theme on audience on mode on breakpoint and you get a combinatorial mess. The naive fix, a separate theme for every combination, drifts and breaks the moment the brand moves. And the live products had to keep running the whole time.
A separate theme for every theme, audience, and mode multiplies fast, and every fork is one more thing that drifts.
My role
What I owned
I came in as the design-systems specialist to put the new visual language on a token footing. I audited and restructured the token architecture, set up the theming so it could flex across theme, audience, mode, and breakpoint, wired it into Figma variables so designers could stay on the system, and defined the migration path off the old structure without breaking the live products.
Then I built the first tokenised components and handed them to development for the code counterpart. For part of the run I also stood in for a designer on leave, so the work spanned both the foundation and the day-to-day component build.
The approach
Theming is more than light and dark
Most design systems treat theming as one switch: light or dark. Infinitas needed several at once. So instead of a flat set of tokens, the system is layered: one core of raw decisions, then composable layers for theme, for audience, for mode, and for breakpoint. A surface picks one value from each layer and resolves to the right look, no forking.
That is what lets the brand feel almost like a different brand for a young learner than for a teacher, while still being one system with one source of truth. Change the audience layer and the feel shifts; the core underneath holds. Figma variables mirror the same layers, so what a designer toggles in Figma is what ships in code.
And because real products were live the whole time, the migration was a path, not a big bang: move onto the new language without a day where the old one stopped working.
One core, four composable layers. Pick one value from each and the system resolves to the right face, no fork required.
The outcome
A foundation that flexes by age
The multi-level theming shipped: one token system flexing by theme, audience, mode, and breakpoint. The restructured token architecture and the Figma variables were delivered, the first tokenised components were built and handed to development, and the migration path kept the live products running while the new language rolled in. The engagement was ongoing from there.
The point was a foundation that could carry the new visual language across every age Infinitas serves, from one source, instead of a pile of themes that drift apart. Set that up right and the brand can keep changing its face without the system losing its head.
On the side
Two explorations, idea to proof of concept
The problem stuck with me, so I built two proofs of concept of my own to push it further. One treats motion as tokens: a small bookshelf that animates with a different feel for a learner than for a teacher, the same way colour and type shift by age. The other pulls balanced OKLCH colour scales straight from book covers, live in the browser, to see how far a palette could be generated rather than hand-picked.
Neither shipped to Infinitas. They are mine, from idea to working prototype, the kind of thing I build to find out whether an idea holds before it ever reaches a client.
Questions
What does multi-level theming mean here?
Tokens are layered so one system can flex across several dimensions at once: theme, audience (primary learner, secondary learner, teacher), mode, and breakpoint, all over one shared core. The look and feel changes almost like a brand switch, without forking the system into a separate theme per combination.
What was delivered?
The restructured token architecture, the multi-level theming, Figma variables so designers stay on the system, a migration path that kept live products running, and the first tokenised components handed to development. The engagement was ongoing.
Why does the look change by age?
Infinitas serves everyone from young learners to teachers. The brand should feel right for each, almost a different brand per age, while staying one maintainable system. Layered tokens make that possible from a single source.
One core, a different face for every age, without forking.
Theming by audience, mode, and breakpoint from a single source, so one brand feels right for a child or a teacher and stays one system. If your brand has to flex for very different audiences, let's talk.
Get in touch
