Introduction

The design system is divided up into three main parts:

• A set of rules & guidelines for applying the system within the context of Atom Learning
• Information on the theme layer and underlying visual system that powers the design-system
• Technical documentation on our component library

Our main focus for this initial release has been to create the in-depth technical documentation for our component library. There is also an initial draft of the theme content written, for use mainly as a visual reference for the scales and systems that form our design system. We also have a gallery view of all our components in one place.

We're aiming to add a number of guidelines soon that talk not only about the components and how to use them, but also how best to combine them and use them in context for a greater user experience. We hope to include detailed guidance on more specific UX patterns like data capture through forms, consistent navigation patterns, tone of voice, how to best handle error & empty states, how to prioritise interface elements, and others.

The underlying source code for the design system is spread across three repositories:

• atom-learning/components contains our React component library code
• atom-learning/theme contains our design tokens and the transformations for JS and Sass
• atom-learning/icons contains our React SVG icon system

We welcome feedback so please provide comments or bug reports on our Github repository.