Introduction

This is the FutureLearn design system.

We're in the middle of an open redesign, so please bear in mind that this site is currently a work-in-progress.

We created this design system with several goals in mind:

  • to document the patterns we use, using our shared vocabulary
  • to ensure consistency in how we use patterns and UI elements
  • to provide guidance on correct usage of the patterns
  • to encourage re-use of code, reducing redundancy to a minimum

The design system site is a living document and should be updated when the code underlying the feature changes or when new patterns are introduced.

Approach

We use a simplified version of the Atomic Design methodology, which we have adapted to suit our design process and our team culture. The main difference with Atomic Design is that all modules are either an atom or a molecule, categorised by purpose. Having organisms used to cause confusion in the team, so we removed them.

Our approach to defining modules and naming them is function directed, rather than presentational. It is based on evolving a shared design language collaboratively and empowering all designers and engineers on the team to contribute to the system.