A Design System Grammar

Dan Eden’s articles are not the run-of-the-mill posts you see scattered across the internet; his essays are always well researched, and professionally written. Dan is currently writing a series of posts about design systems, what they are and how to maintain them.

One of the most appealing things about defining a pattern language or design system in this way is the flexibility that it affords. For novice builders who just need a high-level component or concept of their project, they can find it at the top of the heirarchy and use the component as it comes. For those pioneering new experiences or experimenting beyond the confines of existing produce surface, they can take those high-level components and concepts and deconstruct them into their composite parts; they can keep doing this until they have the primitive, atomic components they need to construct a bespoke pattern that still fits with harmony in the wider system.

It’s much easier to create a palette of components once you have an idea of what you are building. Where I (and many others) struggle is when the defined palette of components don’t fit with a new concept: do we revisit the existing design system and update our collection of components, or is the new experience misaligned with the goals of the product? The answer to this question is not black and white; this will have a profound affect on the style and direction of your product.

Dan’s metaphorical ties between design components and grammar is an interesting abstraction. His concept allows the designer to explore new ideas, without severing ties with the system as a whole. We see companies like Facebook experiment with these “atomic components” all the time. Some of these make it into the wider design system, but most don’t. If we adhere to the grammatical metaphor in Dan’s essay, maintaining a record of your components is critical; something added to your design documentation should be treated with the utmost scrutiny. However, this should not inhibit exploration and ideation; how can you move a product forward if you are always concerned with maintaining the past.