Introducing Trendyol’s Open-Source Baklava Design System
We are excited to introduce you to our new open-source design system project, Baklava. Baklava is a design system that aims to provide a consistent, accessible, usable, and multi-purpose design language that can be used as a base for many types of digital projects.
In this article, we want to share the story behind Baklava Design System, our targets, and how it can be used.
What is a Design System?
A design system is a set of standards for managing design at a scale. It provides visual and experiential consistency within the framework of a common language while creating a product. This system includes styles (design tokens), components, patterns, and guides that can be combined and reused to help optimize design and development.
Benefits of using Baklava at Trendyol
- First of all, design and development work can be created and replicated quickly. In other words, it ensures that the components are used repeatedly reducing the effort to produce fast output.
- By reducing effort, it increases productivity. The return of investment in Design Systems, which accelerates design and development, is enormous.
- It reduces stress on design resources to focus on larger, more domain-specific problems. Instead of thinking about components, will it work accordingly or will it fit small screens, we can focus on improving that funnel.
- It creates a unified language within and between cross-functional teams. As designers and developers, we can take part in more than one project. The adaptation process between these projects disappears when we use a standard design system instead of trying to adapt to each domain’s design and development language every time.
- It creates visual and UX consistency across products, channels, and departments.
The Value: Accessibility
Accessibility is a human right. As digital product creators, it is incumbent upon us to consider the temporary or permanent accessibility challenges faced by our users. Regarding accessibility, our considerations should extend beyond users with total visual or auditory impairment. We should also acknowledge users who are unable or choose not to utilise a mouse or keyboard, users who encounter difficulty with low-contrast elements, users who, despite lacking health issues, wear gloves for their daily work as motorcycle riders, and numerous other obstacles encountered by individuals within our target audience.
Baklava prioritizes accessibility. The components in Baklava supports keyboard navigation, considers screen readers, gives attention on contrast, size, readability and respects accessibility settings. We know that this is a way that we can always do better. So we aim to provide better accessibility in every release.
The Method: Atomic Design
The methodology that we try to follow from the very beginning of the Baklava Design System is Atomic Design. Which means creating a system of parts that we can use over and over again, with atoms that will come together to form molecules, organisms, templates, pages, and products. Once we identify these ions and atoms, when we put them together in certain combinations, we form our molecules.
For example, by combining specific ions such as color, typography, icon, spacing, and radius, we create a button. Then, by using the button along with other ions like spacing, radius, and typography, we create our dialog component. We don’t create entirely separate buttons for the dialog component; instead, we utilise the existing button component. By clicking on a call-to-action button, we can open the dialog, and by combining pages with the dialog, we can create a website. This approach ensures UX and UI consistency throughout the usage of our design system, Baklava. When we make a change to a color, such as the primary color, it automatically updates the primary button, the button used in the dialog, and the dialog used in the pages. This way, we can update all pages in the application without compromising the user experience and maintaining consistency.
Baklava Web
A design system can have many implementations. The same will apply to Baklava as well. Baklava currently has a React Native and web implementation. iOS and Android implementations are also under consideration. Since Baklava web is currently the most mature implementation, we want to give details about it in this article.
Baklava-web developed entirely open source, utilizing web components and focusing on accessibility, consistency and flexibility. The development process involves careful attention to the automation of flows as much as possible.
Why Web Components?
Web components are a low-level native solution executed entirely by browsers. This allows us to leverage web components regardless of which JavaScript framework we use in the project.
Within Trendyol, we use various frameworks, primarily React and Vue, and the use of different frameworks may increase according to project needs. In a design system that can be considered a long-term investment, going with a future-proof solution, avoiding the need for teams to make changes to their technical architecture to benefit from it, and avoiding the inefficiency and difficulty of maintaining separate libraries for each framework, all pointed us towards using web components as a direct solution aligned with our goals.
Web components can operate in isolation from external factors within their respective documents, allowing them to work consistently regardless of which project or codebase they are integrated into. This is a critical benefit for us, considering the targets of having a design system to have a consistent UX throughout our projects.
Additionally, web components are small and isolated, which means that their adoption in projects doesn’t necessitate a complete transition of the entire design to Baklava. For example, by simply adding Baklava buttons to a single page of a project, you can start benefiting from the design system. Since web components are small files, they don’t impose significant additional load on the page.
UI Library vs. Design System
You might think, “Oh, yet another UI library!” It’s not! Of course, UI libraries and design systems provide solutions to common problems, and their boundaries may not be clearly defined. However, let me explain the fundamental distinction for why we should not consider Baklava as a UI library.
In UI libraries, the goal is usually either to meet all the existing needs of a project or to create a technically flexible solution that can cater to all possible needs while minimizing code repetition.
Reducing code repetition is certainly a goal in Baklava, but more importantly, our priority is to enhance consistency, accessibility, performance, and user experience in our interfaces. Unlike most UI libraries, in Baklava, we approach the addition of components, their features, and their resistance to environmental conditions with extra caution.
By using it across projects, we add solutions to Baklava that can genuinely meet the needs of multiple projects. This way, our primary objective is to create a user interface solution that covers -maybe- 80% of the fundamental interface elements in projects and does so exceptionally well.
Of course, there will be project-specific customization requirements. The first option is to customize through design tokens. With the customisation options we provide through design tokens, we strive to ensure that these customisations do not disrupt interface consistency and user experience as much as possible.
However, this may not always be sufficient. For example, Baklava may never have a “product card” component because providing a standard product card that any project can use may not be feasible or practical. In such cases, we recommend creating project-specific UI libraries that extend Baklava. We already have such a UI library for our Seller Center, where there is a product card component specifically designed to meet the needs of that project. However, even in these types of components, we expect the use of Baklava tokens and components for color palettes, spacing, typography, and even the buttons within them. In summary;
Baklava is not a generic UI library, so it doesn’t intend to provide a list of components that you can customise every part of. Instead, Baklava aims to provide a good and consistent user experience (UX) for its applications.
Why Open-Source?
Baklava is being developed as an open-source project from the start. Here is why:
Firstly, the nature of the project and the development process within Trendyol align well with the principles of open source. Different methods for developing design systems are being explored in large companies. However, the most popular and successful approach is when a small team manages the project, and its development spreads throughout the entire company. Establishing a team to meet all of Trendyol’s design needs and making all teams dependent on that team would be both inefficient and practically challenging to succeed.
When we decided to work in this manner, leveraging the proven high standards of the open-source world as a disciplined approach to project development emerged as a prominent solution. We are all aware of the hundreds of open-source projects developed with contributions from tens of thousands of individuals from all over the world. Therefore, it makes perfect sense for us to benefit from this.
Having the project open source also provides us with easier opportunities to receive contributions, both from within Trendyol and from outside of the company. By utilizing a flow that almost every developer is familiar with, providing feedback to our library and contributing with code or documentation becomes quite practical.
Alongside all of this, open-source projects are an essential part of Trendyol. The majority of the libraries we use are open-source. Increasing our opportunities to give back to the world we benefit from is one of our responsibilities within the developer ecosystem.
How to use it?
To use Baklava web in any of your projects, you don’t need to undergo a redesign, change your pipelines, alter your code architecture, or switch the libraries you’re using.
All you need to do is include a JavaScript and CSS file that will load the entire Baklava library or maybe just the specific component you desire, and then you can start enjoying our components.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0/dist/themes/default.css" />
<script type="module"
src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0/dist/baklava.js"></script>Baklava doesn’t effect any libraries outside of it and is not effected by. Let’s say you’re using Bootstrap in your project but you’re striving to align it with our interface standards. Don’t worry, you can keep using Bootstrap for some parts (for some special components you built for your project, maybe), but by adding Baklava to the project, you can immediately start benefiting from the 21+ components we currently offer, as well as any future additions.
We use CSS Variables for customising Baklava Design Tokens and component styles. You can customize design tokens in any level, for whole document, some part of it or just for a single component. Since it’s CSS variable, this doesn’t require any additional build step or requirements on your project.
header {
--bl-color-primary: black;
}
bl-checkbox-group {
--bl-checkbox-direction: column;
}You can check our extended documents for customizing Baklava theme and individual components.
How to get involved?
We value to get contributions outside of Trendyol. Everyone is very welcome to make any type of additions to our project. This can be either proposing a new component, reporting a bug, improving the documentation or even just asking a question. If you are curious how to get involved, here is the flow that we currently use for developing baklava web and the design system.
Currently, we have two meetings per week internally, one for Planning and the other for Design Discussions, that we plan to open to the public soon. In the Planning meeting, we track our project board on GitHub. In the Design Meetings, if there are any new component tasks or changes that need to be discussed in the current designs, we engage the relevant participants to brainstorm ideas. In this meeting, we thoroughly discuss aspects such as the compatibility of the proposed changes with our existing standards, how they meet the needs within Trendyol, and accessibility considerations. The decisions made in these meetings are added as meeting notes to the respective GitHub issue.
For development tasks that do not require design involvement or have already been completed on the design side, if there are any changes related to the usage of our library, such as introducing a new component or making significant modifications to an existing one, we expect an ADR (Architectural Decision Record) to be written. This document is usually created by the person responsible for implementing the task, outlining the technical approach for addressing the requirements. We interpret this document with the participants, make decisions, and proceed with the development.
Figma and Storybook play a critical role in Baklava’s development. Storybook serves as our documentation, component playground, and the place where we run automated interface tests. Therefore, with each development, we ensure that the relevant Storybook documentation is updated, and we conduct certain checks based on this documentation within the PRs.
We pay attention to code and UI reviews. Our PRs are always reviewed and approved by a second person. Using a service called Chromatic, we capture automated screenshots of the Storybook demos mentioned earlier, allowing our design team to review visual changes. This helps us avoid unintentional visual glitches.
Once everything is completed and the PR is merged, we automatically release a beta version on NPM. As Baklava is a solution that works directly in the browser, we recommend using our library through the CDN, and we use jsDelivr, one of the most popular solutions in this regard. jsDelivr is a fast and practical multi-CDN service that is used by many popular libraries like Bootstrap. It offers NPM and GitHub projects and has been adopted due to its reliability.
What is Next?
By employing these methods, we made 21 components ready to use by 25 direct code contributors and many others with non-code contributions. As far as we can determine within Trendyol, currently over 15 teams are using Baklava web in production.
Indeed, there are many things on our agenda for Baklava. We have ongoing discussions and plans to improve our existing components, add new ones, and enhance our documentation and development processes.
We encourage everyone who is interested to explore our project on GitHub and share their suggestions and contributions with us through GitHub. We value the input and involvement of the community in shaping the future of Baklava.
Bonus! Why is it called Baklava?
This is one of the most interesting topics of our project. Let’s make it clear as well. There are several reasons for using Baklava name:
Firstly, at Trendyol, we like to name our projects with food names. And there are some foods that have a special place for the whole team. For example, “lahmacun”, traditional Trendyol lunch from the very beginning, is also the name of one of our platforms. Another food that is very important to the team is baklava. When a project goes live, when we celebrate our 1st, 2nd, 3rd,… year at Trendyol, or on any special day, we send baklava to each other and celebrate by eating it. So it’s part of our culture.
Another reason is, we thought that the shape of the baklava slices and the combination of them to form a whole baklava box would be a nice analogy to a design system that we tried to produce with the principles of atomic design in terms of its layered structure.
Since the name Baklava is both Turkish and a word is known all over the world, it seemed appropriate for an open-source project. And we named our design system: Baklava.
You can listen our Trendyol Tech Podcast special episode for Baklava to listen answers of more questions like this:
Stay tuned for the news!
We are actively working on Baklava Design System. To track the project, give a star on GitHub, check our discussions board, and follow our Twitter account and Medium channel for bigger news.
See you again with more news from Baklava!
Co-authored with Buse Selvi
We are looking for teammates to create masterpiece works together. If you are interested in, check our open positions:
