The Totara element library is nice, I checked it and used it immediately in my theme work. On the BeyondTellerrand conference I heard Brad Frost's talk about his new Pattern Lab. The description on the Github page:
"All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages."
When you look at the way the Pattern Library works you see it uses exactly the same structure as websites should be build. First define the "Atoms" like Type and other basic elements. Then create the molecules by combining the atoms. In the Pattern Library the "molecules" are not created from scratch but the atoms are "included" (Brad uses PHP and includes the atom files). The same with the next stage the "organisms" and so on.
The philosophy behind the Pattern Lab helps designers and developers to understand the structures. Start to create the basic elements and build the complex ones by combining the basic elements. Never invent new elements in complex structures - always use the basic elements. And when some new elements are needed create them as an atom. Think carefully if you really need a new atom or if you can get the solution by combining existing elements. Then build the new molecule together with the existing atoms. Create the organism you need for the page and put it into the page.
When I heard Brad's talk I immediately thought this clever approach would help to solve the Moodle front-end needs.
The basic concept of the Pattern Lab sounds quite similar to the Totara element library. Show what you have. The big difference is that in the Totara element library all pages are constructed from scratch. In the Pattern Lab the atoms are created. The higher complex structures work by including lower complex structures. Always with the good advice - take what you have - don't invent new. And you get the much desired consistency in the pages - automatically.
To find an entry point working with the Pattern Lab may be to set up two installations.
One to collect all the elements Moodle uses now to be able to find a way to detect the similar but slightly different atoms/molecules and replace them with one. This approach would help to enhance the consistency in Moodle pages with no/minimal modifications in the Moodle codebase.
The other to create new atoms using the much discussed new code/CSS structure with clean class naming. And form there build the molecules and so on to show how the pages should look in the future. This second Pattern Lab would help to build and understand and test the new approach.
What do you think?