Learnosity Design System: Introduction

This page explains how Learnosity creates and deploys visual designs and web component styling, and notification of potential action required by some customers.

Banner image of Learnosity Design System


At Learnosity, we have been working hard behind the scenes to make operational improvements to the way we design and build our software. As our APIs have developed over the years, we haven't always had the same structure behind our user interface elements. This has sometimes made it challenging to customise the Learnosity user interface. 

One of our core goals is to produce a more robust and sustainable user interface, providing a much stronger level of consistency across our APIs and views.

With this in mind, the Learnosity Design System will also make for a better experience when customers integrate our APIs, from customising the user interface or removing components to hooking into the host page structure for more flexibility. With the approach we have been working on, accessibility is at the forefront, making these new components first class citizens in terms of accessible usability.

In order to do this, we have been integrating a design system into the way we build and ship our products. Implementing the design system to its greatest effect may require certain changes to the way you apply customizations to Learnosity. This article will help to outline some of the important factors to be aware of.



Working in phases, aligning with LTS release cycles and starting small, we have focused on replacing a small number of button elements in our Author API, and extending it to other Learnosity APIs.

Going forward, we will continue integrating with the Learnosity Design System incrementally and aligned with the LTS release cycles. We aim to retain as much of the existing DOM structure as possible, which allows us to more easily retrofit our product, gaining benefits of the new design system while requiring minimal changes from client development teams. 

For clarity on these releases and any upcoming changes, the design system will feature in migration guides, release logs and release articles. Our goal is to provide customers with clear view of upcoming changes with as much resources as possible. 


What does this mean for customers of Learnosity?

In the long term, the Learnosity Design System will offer substantial changes that will benefit advanced customizations. The changes planned for the coming year will primarily be of interest to Learnosity clients who are taking advantage of our white label capabilities– customizing our user interface, styling our APIs to match an application design, and otherwise looking for a more seamless integration in the front end.

In the near future, interested customers will be able to find a detailed breakdown of the components we have available at any point in time through our Design System website. If there are particular areas of interest to you and your customers, please get in touch via the form.

Future plans

In the upcoming LTS releases, we are intending to integrate the design system across all of our Learnosity APIs. Beyond this, we aim to replace all legacy components in APIs with a user interface, making use of the design system. This should reduce friction in development when customizing Learnosity APIs and increase consistency across our UIs.

As we make progress with integrating our growing design system into our products, we will expand its reach in future releases. And as our design system matures, we will be enabled to focus our attention on creating better user experiences, that are accessible and consistent. We’ll still be focusing carefully on a controlled rollout, with full support from documentation, migration guides, and additional resources. 


Helpful links

An early BETA tool for viewing CSS selectors in Learnosity Question Types.

We'd love to hear from you

If you would like to share your thoughts, or help us with testing the robustness of the Design System rollout, please get in touch via the form here.





Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity.