In my Design Systems Crash Course I talk about two of the most effective ways to gain control back on your projects: front-end code and living / coded styleguides.

In theory, this might sound good. However, it can be difficult to understand the benefits, without seeing a live in the wild example.

Here is an example of the home page of my work in progress on Marcus’ redesign:

Now this page acts as a table of contents of sorts.

Here is a section-by-section breakdown:

  • What this is and who created it (that’s me). “Design Systems Engineering by James Stone Consulting”
  • Templates and how to use them. “HTML front-end code – click for live version”
  • iFrame based mini preview thumbnails so you can see a visual representation of the template. This is great when you have to refer back frequently.
  • 6 templates showing the main patterns and variations for the site
  • The name of each template, so you can find it in the git repo.
  • A link to the coded / living styleguide. Along with a description of what it is. “developer documentation for HTML + CSS modules”

Now, this is just the tip of the ice berg. Tomorrow I will talk about the underlying git repo and how the project is organized.