Five lessons from a 1,000-year-old design system
Arabic calligraphy styles standards are very close to what we call now a “design system”.
8 years ago, I started attending my first Arabic calligraphy class. and I’m, since then, captivated by its beauty and gracefulness. but surprisingly, I discovered that this millennia-old art also taught me a lot about design systems.
Word -written and spoken- is highly valued in the Arabic and Islamic culture. Arabic calligraphy is one way of expressing this value and importance. it is one of the most sophisticated and diverse calligraphic systems in the world. With more than 1000 years of history, it has more than 10 main different styles and rich regional and cultural varieties. from the west of China to Iberia (today’s Spain and Portugal) and from Turkey to Mali. Arabic calligraphy is used to write holy scriptures, poems, official documents, and other pieces of literature.
Thuluth is -arguably- the most elegant and sophisticated styles of the Arabic calligraphy. Traditionally, the calligraphy learner will only be called “Calligrapher” after being able to write in Thuluth. some calligraphy masters say it usually takes around 20 years of training and practice to master this style.
The rules of Thuluth style were first set by the pioneer calligrapher Ibn-Muqla (885–940 CE. Baghdad, Iraq). by doing so, he changed the course of Arabic calligraphy history forever. he created standards for Thuluth and then for other Arabic calligraphy styles, those design standards are very close to what we call now a “design system”.
The Thuluth design system
The dot (actually diamond shape because the Arabic calligraphy pen has a chisel tip) is widely used in the Arabic alphabet. 15 out of 28 of the Arabic letters have one or more dots. Ibn-Muqla established a system to standardise the measurements and angles of the Thuluth letters using the dot.
This simple concept is the foundation of the calligraphic style. each calligraphic style (such as Thuluth) have a specific aesthetic DNA that can be traced in each of its letters lines, the negative spaces between words, and even the layout of the whole page. all starting from the simple dot measurement. sounds familiar right? reminds me of the atomic design methodology.
I have been working on digital design systems for the last couple of years. for Ericsson -my current employer- and LEGO -my former employer-. During building and working with those design systems, I found out that there are a lot of lessons that we can learn from the “Calligraphy Systems” of Arabic calligraphy.
1- Consistency can’t be achieved by vague rules
A consistent, unified user interface is one of the main goals of a design system. or a good user experience in general. but you will be surprised how many time we fail to achieve this.
Even the best are being inconsistent sometimes. Apple iOS 11 had many UI inconsistencies, there is an article that took a dive into the details of iOS 11 and found a good amount inconsistent UI elements.
A better example: Windows 10 at some point, had -at least- 6 different right-click menu styles…
I don’t know if it there were any rules to design right-click menu in Windows 10 at this point. but looking at these different menu styles, and in spite of how different they are, we can still assume that there *might* have been some rules for The right-click menu. and yet, all these different menu styles will still be adhering to the rules, for example:
- Only use Segoe font
- Do not mix more than one font size, style or colour
- Use 1 pixel line to separate menu items if necessary
- Don’t use gradients, patterns or emboss effects in the background
- The menu items should be either text only or text with an icon (the icon should always be to the left of the text)
- Use arrowhead symbol (>) on the right side to differentiate items with submenu
As you can see, the 6 rules I came up with *look* OK, they might get approved in many design systems teams. yet, we can see that they were not clear enough to achieve consistency. we are only talking about the visual part of it, let alone the interaction and animation.
In Arabic calligraphy, the consistency is amazing even on the level of lines that shape the letters. to the extent that you won’t have to learn to write the whole alphabet. because if you master specific lines and curves, you will learn all that is needed to create the letters. let me show you an example:
In Thuluth style, One curve (called Kassah, Arabic for Cup) is reused in -at least- 8 different letters. and for this one curve, there are at least 6 rules that guarantee the consistency of the Kassah:
Not only this makes the curve easier to learn and follow. but the result will always be consistent. and the fact that the curve is reused in different letters creates this visual harmony when you use the system for actual implementation of weaving the words together.
Remember to:
- Decide which elements of the design system will be reused the most and focus on creating clear and comprehensive rules for these elements. don’t think that a visual example or vague rules will be enough.
- Ask a colleague/try yourself to generate odd output without breaking the rules to test how inclusive they are. ’(Bonus: it is actually fun team exercise also to do watch this video as a reference)
2- Demanding consistency without offering variety is obstructive
If you followed the first advice and created bullet-proof rules around a UI element that will be reused in different contexts. then unless you want the design system users to come up with sneaky solutions and workarounds to fulfil their needs -which is something we humans are really good at- you better have some variety to cover the *most common* needs.
Just like having different types of kitchen knives, the variations of the elements in your design system make our lives easier and safer.
I was recently working on a project where I had to use the logo of another organisation (a big international one). and I needed to place their logo on a dark background and it turned out that their brand guidelines are stating that their logo can only placed against a white background!
Thuluth Style is a very good example of the power of well-thought variations. comparing to other Arabic calligraphy styles it is the most versatile and thus, most favoured by calligraphers (the users of the design system)
Thuluth Style is a very good example of the power of well-thought variations. comparing to other Arabic calligraphy styles it is the most versatile and thus, most favoured by calligraphers (the users of the design system)
Remember to:
- Make sure you perform user research (users here are the designers and developers who will use the system) to define the most common use cases for the element you are designing.
- Create an easy and well-communicated feedback channel where users can share the new use cases that need a variation of an element (e-mail only will work for small teams)
3- Design for modularity
One of the main differentiators between having a (style guidelines +components library) Vs a design system is that design systems can be considered eco-systems. Where the visual styles, design principles, interaction, coded components, tone of voice … etc. are living *together* to help create a smooth, unique, and delightful overall user experience
In design systems, we shouldn’t think of each component in isolation. Always consider the bigger context and think of an element in relation to other components.
In Thuluth style, most of the letter varieties that we mentioned in the last point are actually covering the different transitions and connections between the letter and other letters in the alphabet. Arabic writing system is cursive (letters always joined together). So one variation of the letter might look great alone or after a specific letter but when you connect it with another letter (that ends high above the baseline for example) it will not fit. And the connection will look odd. consequently, the word and then the whole page will look unbalanced.
These, for example, are all the possible connections of the starting letter “Baa” (when it comes at the beginning of the word) with all types of letters of the alphabet in their different variations and also with different diacritic marks.
Remember to:
- Always use the components you designed to create demos and prototypes that contain different pages (for example login or wizard walkthrough) it will be easier to find the gaps and think of more modular possibilities.
4- Don’t only tell the users “What” to use, but also “When”, “How” and “Why”
a good design system provides the users with a dropdown, it’s rules and variations. all of this defines “What” is the drop-down. a great design system, on the other hand, will provide the users not only the “What” but also a short note on “When” should they use a dropdown instead of radio buttons for example. and “How” to use it. is there a maximum number of items in a dropdown the users should consider? should it be Keyboard enabled? …etc.
Another example is the data visualisation. a good design system will contain a good variety of chart types. but -as you might know- it’s not the style, animation, and interaction what makes a good piece of data visualisation. it’s the “how” and “why” the data was represented in this specific way.
Sounds too much or “off-topic”? It shouldn’t. because otherwise, we will be designing an eye-candy design system that will most probably fail the implementation test.
The most popular manuscript the Ibn Muqla -the Arabic calligraphy pioneer- wrote, actually called “On Calligraphy and Pen” started with pieces of advice on the different kinds of pens, how to sharpen and hold them, the different kinds of ink and when and why to choose one over the other. This isn’t just an unnecessary prologue. this care of the details of the adjacent topics is one of the secrets why his “calligraphy system” was widely adopted.
Remember to:
- Offer distilled and concise pieces of advice and tips. no one wants to read a book on iconography before choosing an icon to place on a menu.
5- The best design systems are never “complete”
If you are waiting to have a “complete” design system before launching it. I have some news for you. you should never look forward to reaching that state.
Even if you have an open budget to hire the best designers in the world, it’s not a matter of capacity or skill. If we agree that design systems are eco-systems, then we can think of them like a forest. if a forest becomes static or “complete”, then that means its dead and lifeless. on the other hand, if it’s alive, it is always dynamic not only adding new elements but also recycling and getting rid of what is not suitable anymore to leave space for the new blossom and offspring to flourish.All our views today on what is “standard” or “unique” or “intuitive” will not be invalid in the future.
as long as your design system is used and “alive” there will always be new product or projects that will use your design system and come up with use cases and needs that you didn’t think of.
Thuluth style has been around for about 1000 years. all the rules, variations, ...etc. have been added along the way and not from day one. and as long as it is being used, it will keep evolving with every calligrapher’s contribution and creative use. And this is how you too should envision your design system.
Instead of worrying about a “complete” design system. focus on building the minimum valuable product to launch and most importantly a process to keep it alive and dynamic.
