Purpose

The Kolibri Design System contains resources for designers and developers building Kolibri products. The purpose is to:

  • Reduce the time it takes to design and build our products
  • Create consistent and predictable end-user experiences
  • Ensure accessibility, responsiveness, and cross-browser compatibility

The design system includes both documentation design patterns and a shared front-end UI library. Together, these provide solutions to common design and implementation needs in Kolibri products.

If the design system is failing to achieve the objectives above, it needs to be updated. Your contributions and input are appreciated. For more information, see the Updates section below, the GitHub repository, the Notion project, or the Kolibri Design System Figma file.

Scope

The Kolibri Design System contains guidance and functionality that reflects very common design patterns across all of our products. It also gives guidance about patterns and component that are consistently different between products, for example due to different user needs or browser requirements.

It should not contain design patterns, UI components, or configuration parameters that are rarely used or liable to change in the future.

The public API of the shared UI library is only that which is documented in this site. Functionality which is not documented here should be considered either experimental or a private implementation detail.

Exceptions

If using an existing pattern or component would significantly degrade the user experience compared to designing and building an alternate user interface, we should prioritize the user experience and build the custom UI.

On the other hand, if using an existing pattern or component would not significantly degrade the UX, we should prioritize consistency and reuse. The benefits of standardization here outweigh the marginal benefits of a UI customized for a narrow need.

Decisions to deviate from the design system should be made intentionally, and the justification to do so should be documented. Undocumented deviations may be mistakes, oversights, or technical/UX debt.

Over time we should be able to observe patterns in the intentional deviations, and use them as guidance for implementing updates to the design system that benefit the rest of the product ecosystem.

Contributing

We welcome feedback and contributions! It's important that the Design System works for you, so please help shape it. To get started contributing to the design system, see the release process and the project readme. Feel free to submit a pull request or issue to the GitHub repo.

To contribute to the Kolibri ecosystem and Learning Equality more generally, see ways to contribute in the developer documentation or get in touch on our community forums.