An investigation of Pinterest’s design system
What is the right-to-left toggle for?
On one of my nosey wanderings of the internet’s design systems, I stumbled across Pinterest’s design system: Gestalt.
And it’s rather lovely.
From the platform toggle, to the clear accessibility specifications of each component, it appears to be a robust and methodical design system. There is even a global toggle that switches dark mode on and off — a useful consideration for when Pinterest’s product teams needs to design for this.
Interestingly, within those same site settings there is also another toggle. This toggle switches the site from a left-to-right (LTR) to right-to-left (RTL).
To be perfectly honest, I was confused at first. Why does this website, which is entirely in English, have a toggle which switches it to an RTL format, while still remaining in English? I searched for a language selector or some other explanation of this within the website, but came up empty.
I brought this finding to the rest of my team. We reasoned that it must be something to do with when the design system is used for developing Pinterest in an RTL language, such as Arabic, Hebrew or Farsi.
The reason for not finding any information about this toggle on the system website is that of course the public — e.g. me — aren’t the user in this instance; the Pinterest product owners, designers and developers are.
By toggling the switch from LTR to RTL, every single component is ready to be used in an RTL language, along with the code ready to go.
In fact, in July 2021, Pinterest launched Arabic as a new language available to all users across iOS, Android and web.
So why should anyone care?
With around 650 million speakers globally, it’s not surprising that RTL languages are becoming more prevalent on the web. However, many of these users are still being excluded from a considerable part of the internet due to its tendency to follow a LTR format.
Developing an RTL version of a design system could significantly expand a platform’s user base and enhance a platform’s accessibility on a global scale.
It appears that this is what Pinterest’s aim was when developing the RTL toggle on their Gestalt design system. It isn’t just that their toggle simply flipped their content, but that their components have been developed and considered for RTL languages at a code level.
Usability considerations of RTL languages
While what Pinterest has done with their design system in terms of RTL languages is interesting and deeply useful to those users who require it, there could be some usability issues with a potential “one-size-fits-every-RTL-language” approach.
Designing and testing an RTL language website poses particular challenges because it is not merely a reversed version of a LTR website. There are nuances that come with every language.
For example, underlines in Arabic are often avoided because they can interfere with certain characters. The Gestalt system does contain some components that include underline text, and there isn’t any apparent documentation to specifically address this issue. Arabic also rarely uses bold font, with italics almost never used, and font sizes are generally smaller than LTR languages.
However, as previously stated, this design system was not built specifically for someone like me, as someone outside of the Pinterest product team. Rather, it was created as a framework within which these considerations are likely to be taken into account.
The final thought…
There could be some suggestions made around whether it was necessary to have the entire website convert to RTL, rather than just having the individual components do so.
Despite that, it is definitely worth checking Gestalt out. It is at the very least a very interesting example of how a platform integrates RTL languages into its design systems at a base level.
