```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2F6WG40FX6Kw1cAKI4L2LA%2Ff57c960f-92ac-4931-a7d4-24f6d6b3f254.png?alt=media&token=ebdc642f-0d37-4f5e-af4f-5a1568d970c0","id":"f57c960f-92ac-4931-a7d4-24f6d6b3f254","width":2880,"height":1614,"filename":"Screenshot 2024-10-02 at 14.51.47.png","type":"image/png","caption":"","border":false}]}
```

Welcome back to the second part of my series of blogs about design systems. In this blog, we will talk about "Base components".

---

**What is this base component?**

Base components are taken as the basis of other components. That is, instead of creating all the options we need one by one, we prepare them by making changes to one component. This, in turn, makes our work easier and smoother.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2F6WG40FX6Kw1cAKI4L2LA%2F51f14cd6-d60e-4a8d-b3a9-627a922f5fa9.png?alt=media&token=db119cb1-7f08-44bc-88ac-53a59d120d12","id":"51f14cd6-d60e-4a8d-b3a9-627a922f5fa9","width":1400,"height":254,"filename":"Capture-2024-10-02-145436.png","type":"image/png","caption":"","border":false}]}
```

But how do we prepare this component so that we get other options by changing it? The answer to this question is in picture 1. As you can see from the picture, we collect all the elements we need in the base component (icons and text) and create options by hiding them using instances.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2Fbase-components%2Ffee10fd2-41d0-49e5-bc88-b468939047d8.mp4?alt=media&token=ef8e325a-17e0-4399-a5c9-b3da7722ed23","id":"fee10fd2-41d0-49e5-bc88-b468939047d8","width":2266,"height":1008,"filename":"Base Components.gif to MP4.mp4","type":"video/mp4","caption":"Base components. (Figure 1)","border":false}]}
```

Base components are mainly used to prepare components with many options.

For example, buttons, inputs, cards, etc.

**What is an instance? How was the icon and text in picture 1 hidden? 🤔**

Let's explain this briefly with an example:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2Fbase-components%2Ff0976ab1-c03b-47eb-a312-dc32d5cfd2a1.mp4?alt=media&token=9ac314fd-f556-4bfa-99ca-36d4eb6e70dd","id":"f0976ab1-c03b-47eb-a312-dc32d5cfd2a1","width":2266,"height":1350,"filename":"Base components GIF to MP4.mp4","type":"video/mp4","caption":"Boolean property. (Figure 2)","border":false}]}
```

You can search for Boolean property for more information. 👀

---

**Why should we use base components? 👾**

The answer to this question is simple, reduce the workload, simplify things and manage everything from one center.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2F6WG40FX6Kw1cAKI4L2LA%2Fc9d5358d-f176-4dc6-b6c7-b9a0af44471f.png?alt=media&token=563a6a1c-1ac5-4e62-a17b-96f8d30870d5","id":"c9d5358d-f176-4dc6-b6c7-b9a0af44471f","width":1400,"height":788,"filename":"Capture-2024-10-02-145639.png","type":"image/png","caption":"Button Components. (Figure 3)","border":false}]}
```

Figure 3 shows a version of the button component in Figure 1 made without the use of base components.

**There is one downside, Phantom instances… 😮😮‍💨**

Unwanted variants are also created when variants are instantiated. For example, we can show buttons consisting of 2 icons or spaces:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2F6WG40FX6Kw1cAKI4L2LA%2Fb4d14335-2066-4f48-9e12-6c0ac8b3286f.png?alt=media&token=5b6998c6-d004-4445-94da-cb33a3c701fe","id":"b4d14335-2066-4f48-9e12-6c0ac8b3286f","width":1400,"height":788,"filename":"Capture-2024-10-02-145735.png","type":"image/png","caption":"Phantom instances. (Figure 4)","border":false}]}
```

But how do we destroy Phantom instances? We can't. We cannot delete it because it was not created by us. We can inform the entire design team about it to prevent it from being used. This will prevent the use of Phantom instances.

**Finally**

The use of base components depends on the team you are in, the size of the team, the type of project, etc. may vary according to You may or may not use it in consultation with your team. If you are the only designer, why not? 😌

---

Have a nice day and see you in the next blogs 💜

*All visuals are made by me and must be credited when used.*

And if you've come this far, here's a gift from me to you ❤️‍🔥 in this music

> *[The Cranberries - Zombie](https://open.spotify.com/track/7EZC6E7UjZe63f1jRmkWxt?nd=1&dlsi=912bea251fa649f5)*

.base components 💠

Design systems have become one of the most important tools we use in our daily work processes. As a result, many companies and projects now have their own design systems. But who creates these design systems? Large companies have specialists for this, such as Design System Engineers and Designers. In Azerbaijan, simple UX/UI and Product Designers handle this work. I am one of them. In this series of articles, I will share the challenges I have faced, interesting situations, and the new things I have learned. The introduction was a bit lengthy, but I think we can start now.

## **Atoms, Molecules and Organisms**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2F9IhMDypQBiooxU4xvrNn%2F66320d24-db37-4f2e-92ce-9cfa3ae9eaaa.png?alt=media&token=5407da48-5115-4747-9184-a58cdc058ca0","id":"66320d24-db37-4f2e-92ce-9cfa3ae9eaaa","width":2874,"height":1598,"filename":"Screenshot 2024-10-02 at 14.42.36.png","type":"image/png","caption":"Simple structure","border":false}]}
```

Before talking about the elements of the design system (colors, typography, components, etc.), let me talk about how to build a design system that is usable and will speed up the work at the maximum level. If you have just started to develop a design system, you may also have a question: Atoms, Molecules and Organisms? What does this have to do with the design system? If you asked this question, you are on the right track, we can begin.

---

## **Now let's talk about Atoms, Molecules, and Organisms separately**

## **First, Atoms**

Atoms are the smallest components in a design system. For example: buttons, inputs, styles (font, color, etc.), radio buttons, checkboxes, etc. You can think of atoms as Lego blocks, the smallest options that can be broken down.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2F9IhMDypQBiooxU4xvrNn%2F1cfc74b7-5333-4ac8-ba5d-22bebad2d77c.png?alt=media&token=20ef6503-68ad-4526-89d6-333752d4bf19","id":"1cfc74b7-5333-4ac8-ba5d-22bebad2d77c","width":2880,"height":1610,"filename":"Screenshot 2024-10-02 at 14.46.35.png","type":"image/png","caption":"Example of Atoms.","border":false}]}
```

---

## **Molecules**

In short, elements consisting of atoms are called Molecules. For example: A set of inputs and buttons in the Login form. Assuming that atoms are Lego blocks, we can think of molecules as the parts that are made of them.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2F9IhMDypQBiooxU4xvrNn%2Fa7ee2ff7-cef3-44b8-9f83-56d2f18b1c6b.png?alt=media&token=b2439f42-a89b-43e6-b16f-0c1060c6f30b","id":"a7ee2ff7-cef3-44b8-9f83-56d2f18b1c6b","width":2880,"height":1592,"filename":"Screenshot 2024-10-02 at 14.48.01.png","type":"image/png","caption":"Example of Molecules.","border":false}]}
```

---

## **Organisms**

An element consisting of molecules is called an organism. For example: headers, pop-ups, etc. Many of the organisms we use in the interface can function independently of some element.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2F9IhMDypQBiooxU4xvrNn%2F87dd0398-ea1d-4fe4-b329-f314396e2329.png?alt=media&token=842a1a3d-3dd5-4b6a-b772-6d2340fa4d58","id":"87dd0398-ea1d-4fe4-b329-f314396e2329","width":2880,"height":1614,"filename":"Screenshot 2024-10-02 at 14.48.51.png","type":"image/png","caption":"Example of Organisms.","border":false}]}
```

---

Additionally,

## **Templates**

We can call templates, and design parts consisting of organisms, they mainly show what and where will be located on the site.

---

That's it for today's design systems, in the next blog I will talk about redesigning systems (base component). Happy Wednesday, enjoy the holiday, relax, and read. 🏄🏻‍♀️

And if you've come this far, here's a gift from me to you ❤️‍🔥 in this music:

> [Skishape - I Don't Know](https://open.spotify.com/track/1RI9Qpt8QbYtwfCW8npcO1?si=f19a0872785546ce)

Atoms, Molecules, and Organisms in Design Systems!

Design System for Bank VTB Azerbaijan.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2Ff853f43d-5bbb-4212-b011-6e7265079deb.png?alt=media&token=8a1acc62-de8c-4e51-ac31-90e9f1d5a31c","id":"f853f43d-5bbb-4212-b011-6e7265079deb","width":2400,"height":1330,"filename":"VUI.png","type":"image/png","caption":"","border":false}]}
```

Year: 2022 to 2024\
Project: Virtual UI Design System\
Role: Product Designer\
Team: Product Designer, Front End Developer, Project Manager.

---

Virtual UI is a Design System made especially for VTB Online and other internal and external Products of Bank VTB Azerbaijan. This project aims to make the company's digital products consistent and improve user experience.

**Problems:**

* Identified key product issues: consistency, ease of use, and design language.

* The main product, **VTB Online** (internet banking), faced these challenges.

* User dissatisfaction with the current state of the products.

* For more detailed insights, refer to the **[VTB Online Case Study](https://www.figma.com/design/AhAnbreCyGc9Vq5VKsMt7t/VTB-Online-Case-study-and-Design?node-id=0-1&t=BSFmr4FKk7ub7laM-1)**.

**Constraints:**

* Limited time frame.

* Limited resources for User Research.

* Complexity of current Front End architecture.

This is what VTB Online looked like when we started:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F3cd7bc4d-3d8c-405a-832a-701687308a8f.png?alt=media&token=3e2de64d-2907-4e65-8b87-0430e5205773","id":"3cd7bc4d-3d8c-405a-832a-701687308a8f","width":3470,"height":2169,"filename":"Screenshot 2024-10-02 at 12.54.44 1.png","type":"image/png","caption":"Login Page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F2b2240ac-a59e-4757-8ffa-99c33fd1d7c6.png?alt=media&token=724b1a3c-131f-43a8-842d-c5e3e8c3d904","id":"2b2240ac-a59e-4757-8ffa-99c33fd1d7c6","width":3470,"height":1952,"filename":"926shots_so 1.png","type":"image/png","caption":"Main Dashboard","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F814995f2-9d7f-4564-9502-46f49f21c525.png?alt=media&token=dcfd144c-3118-4d2b-88ab-41714dd19072","id":"814995f2-9d7f-4564-9502-46f49f21c525","width":3470,"height":2169,"filename":"Screenshot 2024-10-02 at 12.54.44 2.png","type":"image/png","caption":"Transfer","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F0fbee618-d886-41ff-ba68-a4a306fa61af.png?alt=media&token=05b3c004-d1ca-40eb-8b19-2cf89956641e","id":"0fbee618-d886-41ff-ba68-a4a306fa61af","width":3470,"height":2169,"filename":"Screenshot 2024-10-02 at 12.54.44 3.png","type":"image/png","caption":"Order a new Card","border":false}]}
```

Now you have a bit of an understanding of why we needed to redesign.

Now let's talk about the **Process**.

1. Talking with our customers and understanding what they need and want.

2. Doing a market research.

3. Making mood board for the new visual language of VTB Online.

4. Make variations and select one of them from among stakeholders.

5. Making a Design System.

6. Updating VTB Online interface.

Overall that was the process. Our main goal was to make user-friendly, modern, and competitive UI and improve User Experience simultaneously.

---

Let's dive into the process of the Makign Design System.

We started to make this design system by choosing which structure to follow. Long story short, we came up with 2 alternatives:

1. Atomic Design Methodology

2. Code-Based Design System

These 2 have their own advantages and drawbacks. For example:

Atomic Design Methodology is good for long-term, complex, and large projects. Drawbacks? Long list of components, sometimes, repeating components.

Code-Based Design System is good when we talk about Designer-Developer relations. But our case was different, we already had good relations with developers. And mam, creating a single component can take a long time.

So we decided to go with the Atomic Design Methodology. I wrote about my experience and overall information about [Atoms, Molecules, and Organisms](https://medium.com/@uxbymaharram/dizayn-sisteml%C9%99rind%C9%99-atomlar-molekullar-v%C9%99-orqanizml%C9%99r-3bebb000170f).

---

When I made this case study, I thought about adding a full list of Components and so on. But then I decided why not add interactive components instead of simple bullet points? Yeah, I made interactive components in Framer:\
\
**[Virtual UI on Maharram.xyz](https://www.maharram.xyz/virtual-ui)**

You can interact with components (Not all, main components only), and view and read about how I used Tokens in Virtual UI.

---

Now, Let's talk about the hardest part of this Design System, Colors...\
Why the hardest part? Because of accessibility. Yeah, I challenged myself to make good-looking and Accessible colors for this system. It took me 4 months and 4 different approaches to find the perfect one for our needs.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F2d935795-42e1-478e-b1a6-931773ddf669.png?alt=media&token=ba173b2c-511e-4137-a6f1-08c6fe104096","id":"2d935795-42e1-478e-b1a6-931773ddf669","width":3558,"height":8544,"filename":"Colors.png","type":"image/png","caption":"Light Mode","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F12bedf42-c2ec-40f7-9b0c-c6d2106780a6.png?alt=media&token=1560b410-a59a-4b4f-ad26-aeb339fe0ba4","id":"12bedf42-c2ec-40f7-9b0c-c6d2106780a6","width":3558,"height":8544,"filename":"Colors-1.png","type":"image/png","caption":"Dark Mode","border":false}]}
```

As you can see, all colors have dark mode and are separated into Color and Element tokes. This approach makes it easier to maintain and use these colors in elements because of simplicity and number of tokens. It's easy to understand for both, Designer and Developers. Why? You can see it from here:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2Fc3a732ec-2a3d-45ef-94fe-da3e86cf30f0.png?alt=media&token=75497e75-b9b2-4963-aab4-409e182d5f80","id":"c3a732ec-2a3d-45ef-94fe-da3e86cf30f0","width":1440,"height":764,"filename":"Token sturukture.png","type":"image/png","caption":"Logic behind the colors.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F7f70b6ca-cf5c-46ec-a133-6209b605fe7f.png?alt=media&token=676b934c-b817-4065-8af1-6476a9f328f8","id":"7f70b6ca-cf5c-46ec-a133-6209b605fe7f","width":1440,"height":1096,"filename":"5.png","type":"image/png","caption":"Usage of Colors, ex:1","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F8409348e-2c81-4b63-8911-d21e78adfb50.png?alt=media&token=b1bea301-8c0e-4544-80ce-7e70c7cb0e65","id":"8409348e-2c81-4b63-8911-d21e78adfb50","width":1440,"height":1016,"filename":"3.png","type":"image/png","caption":"Usage of Colors, ex:2","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F49ad2790-b88f-4bf3-b278-00de853a4056.png?alt=media&token=5efaf199-74c9-4f4d-824c-370b8ffdeb2c","id":"49ad2790-b88f-4bf3-b278-00de853a4056","width":1440,"height":764,"filename":"2.png","type":"image/png","caption":"Usage of Colors, ex:3","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2Ff6adecd3-0f0f-4ba0-b2d6-f0549f1469ab.png?alt=media&token=a71d657a-41f0-4842-9136-7b7788afc8d3","id":"f6adecd3-0f0f-4ba0-b2d6-f0549f1469ab","width":1440,"height":764,"filename":"1.png","type":"image/png","caption":"Usage of Colors, ex:4","border":false}]}
```

For more Details and explanations, please read it from here:

**[Tokens on maharram.xyz](https://www.maharram.xyz/virtual-ui/tokens)**

---

We talk about the Idea behind this system, structure, and colors, and it's time to talk a bit about Font. I will keep it short, We used VTB Group UI font. It's the official font of VTB Group. And it looks like this:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F83bf407b-1f0e-4c93-bce0-9e76d3acb5f2.png?alt=media&token=307e47cb-8574-41c4-8960-a0d666b6a517","id":"83bf407b-1f0e-4c93-bce0-9e76d3acb5f2","width":1600,"height":960,"filename":"file cover - 2.png","type":"image/png","caption":"","border":false}]}
```

---

If you made it through here, You are a real Hero and Design system nerd. Now let's talk about this Design System in action.

Here you go, meet the all-new VTB Online:

Light mode:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F57aa729e-7856-4f69-9bd2-5b4b2781b2da.png?alt=media&token=319aadd3-3abf-4c31-b24b-4d8ea93dc2d8","id":"57aa729e-7856-4f69-9bd2-5b4b2781b2da","width":2880,"height":1956,"filename":"20.png","type":"image/png","caption":"Login","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2Ff780c686-700f-4c9f-8acc-85bff5270caf.png?alt=media&token=16ff6c73-c713-4eb4-8c00-43ce9af9bfd6","id":"f780c686-700f-4c9f-8acc-85bff5270caf","width":2880,"height":1956,"filename":"01.png","type":"image/png","caption":"Main Dashboard","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2Fa16abba8-bf38-4d18-b0ff-67bbe865da69.png?alt=media&token=6fae1dc8-15eb-4ff0-9ec8-a0f668721277","id":"a16abba8-bf38-4d18-b0ff-67bbe865da69","width":2880,"height":3176,"filename":"02.png","type":"image/png","caption":"Headers","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F9f9aa98d-afdf-4d90-9a2b-f30c23ab2972.png?alt=media&token=c778f21d-2e5a-466d-a205-1de16afc12c2","id":"9f9aa98d-afdf-4d90-9a2b-f30c23ab2972","width":2880,"height":2352,"filename":"04.png","type":"image/png","caption":"Transfer","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F932f2b1c-33ef-4b2f-bf3f-dd369d6bb311.png?alt=media&token=03afdb57-3d14-48b0-9fc8-5ede48d4b9fc","id":"932f2b1c-33ef-4b2f-bf3f-dd369d6bb311","width":2880,"height":2120,"filename":"06.png","type":"image/png","caption":"Payments","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2Fbef5e8aa-1df2-43fa-aa3c-cf39bdeb8553.png?alt=media&token=feb0b0d3-861e-42fc-ac6b-50e7190af3b8","id":"bef5e8aa-1df2-43fa-aa3c-cf39bdeb8553","width":2880,"height":1950,"filename":"07.png","type":"image/png","caption":"Settings","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F0a40d805-fcce-423c-9be1-cd5ab4add6ee.png?alt=media&token=92b906b8-3190-4e34-b967-e93d763084f1","id":"0a40d805-fcce-423c-9be1-cd5ab4add6ee","width":2880,"height":1956,"filename":"03.png","type":"image/png","caption":"Empty State","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F68671f81-86c8-4876-a899-d69dd1535ddc.png?alt=media&token=b884d576-c877-44e1-bb89-5a48b7d241c3","id":"68671f81-86c8-4876-a899-d69dd1535ddc","width":2880,"height":1950,"filename":"05.png","type":"image/png","caption":"Loan informations","border":false}]}
```

Dark Mode:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F85fe0210-54c6-4792-bbfe-1187f10f7212.png?alt=media&token=c5c0a62c-c8e9-44ba-a304-0440621cd7f2","id":"85fe0210-54c6-4792-bbfe-1187f10f7212","width":2880,"height":1956,"filename":"21.png","type":"image/png","caption":"Login","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2Ff2c3e723-2365-442d-9686-267861a12770.png?alt=media&token=ddfd86bf-2b49-4acd-a7ab-94be9c2b2e4d","id":"f2c3e723-2365-442d-9686-267861a12770","width":2880,"height":1956,"filename":"13.png","type":"image/png","caption":"Main Dashboard","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F3b660efa-14fd-4238-9256-35e7454a8815.png?alt=media&token=88aa814c-fa94-408d-8ebb-f2fa77796896","id":"3b660efa-14fd-4238-9256-35e7454a8815","width":2880,"height":3176,"filename":"14.png","type":"image/png","caption":"Headers","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F6fc996a3-4bd1-4955-aafe-261e2742fcba.png?alt=media&token=b5f82db1-23ad-468d-903b-a91bf5a624b3","id":"6fc996a3-4bd1-4955-aafe-261e2742fcba","width":2880,"height":2352,"filename":"16.png","type":"image/png","caption":"Transfers","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F9a3a2bc8-67ac-4049-b311-2163527ee908.png?alt=media&token=b4c78f2d-c18f-4abb-ae6f-b3d76ff06d92","id":"9a3a2bc8-67ac-4049-b311-2163527ee908","width":2880,"height":2120,"filename":"18.png","type":"image/png","caption":"Payments","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2Fdc27e7a7-5a7f-426c-87cb-b0c13a7de8f2.png?alt=media&token=769abdf1-4cf1-4cc0-ab57-188497333604","id":"dc27e7a7-5a7f-426c-87cb-b0c13a7de8f2","width":2880,"height":1950,"filename":"19.png","type":"image/png","caption":"Settings","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F19f6aa83-5df0-4fda-aa46-a4c0b6bc623e.png?alt=media&token=c6b6ccb8-44b0-4008-83ee-4dc21b50fb96","id":"19f6aa83-5df0-4fda-aa46-a4c0b6bc623e","width":2880,"height":1956,"filename":"15.png","type":"image/png","caption":"Empty State","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FNcb8fhqt7XHyPZbItioR%2F719af254-2433-4b78-88d7-f58365e181a1.png?alt=media&token=06ce7a21-a9af-44bc-90f1-2848c999d3bb","id":"719af254-2433-4b78-88d7-f58365e181a1","width":2880,"height":1950,"filename":"17.png","type":"image/png","caption":"Loan information","border":false}]}
```

For a more detailed Case Study of VTB Online, follow this link:

**[Case Study on Figma](https://www.figma.com/proto/AhAnbreCyGc9Vq5VKsMt7t/VTB-Online-Case-study-and-Design?page-id=1:13413&node-id=1-13435&node-type=frame&viewport=694,438,0.04&t=dd1G0iZzgcPcNZBr-1&scaling=scale-down-width&content-scaling=fixed)**

---

Thank you for Reading folks, If you have any comments, do not hesitate to drop one or DM me here or on Twitter (x.com):\
\
**[Me on Twitter](https://x.com/uxbymaharram)**

My Website for more of my works and details about me:

**[maharram.xyz](https://x.com/uxbymaharram)**

Thank you and just in case:

```cv
youtube
{"url":"https://www.youtube.com/watch?v=MdwuW8n3JYA","width":200,"height":113,"thumbnail":"https://i.ytimg.com/vi/MdwuW8n3JYA/hqdefault.jpg"}
```

Virtual UI Design Syst

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FbJaZxOppwF5yzaogzlXM%2Ff4248f0d-5600-4d1d-9dc9-37790331df6f.png?alt=media&token=2faab01e-e6e9-4a0d-a3ae-c3e603cb028f","id":"f4248f0d-5600-4d1d-9dc9-37790331df6f","width":2560,"height":1160,"filename":"Capture-2024-10-02-150654.png","type":"image/png","caption":"","border":false}]}
```

Welcome back with part 3 of my series of blogs about design systems. In this blog we will talk about *tokens in design systems*.

---

## **What are design tokens?**

Design tokens are naming and alignment for small and repeatable elements throughout the design system. These elements include colors, fonts, spacing, sizing, etc. belongs to. As a simple example, tokens in the design replace the colors represented by hex codes with self-explanatory names. (Figure 1)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FbJaZxOppwF5yzaogzlXM%2F700316e5-525b-4091-89a2-0a2fbd5b910f.png?alt=media&token=edf6705e-7396-4dc7-9a16-cd929727ace1","id":"700316e5-525b-4091-89a2-0a2fbd5b910f","width":1400,"height":325,"filename":"Capture-2024-10-02-150825.png","type":"image/png","caption":"Figure 1","border":false}]}
```

As can be seen from Figure 1, tokens are written in code-like naming. This, in turn, enables the designer and developer to easily read these tokens and more precisely use the appropriate elements in different places.

## **But why are these tokens important?**

Tokens create a place in design systems that everyone can trust and feel confident in using. That is, developers and designers can easily use it here. In addition, tokens enable system elements to be updated and changed from one point throughout the system. A kind of*. We can think of [base components](https://medium.com/@uxbymaharram/base-componentl%C9%99r-bd2b37d7bdec)* as a style variant. 🌝

## **Token types in design**

Different types of tokens can be used in different systems. They mainly depend on the designer himself and the areas where the design system will be used. Based on this, tokens are divided into 2 main types:

1 — Global tokens (Choice tokens)\
2— Component-specific tokens (Decision tokens)

**Global tokens (Choice tokens)** — these are tokens designed for general use, and mainly colors, font size, paddings, etc. belong to

Example of global tokens (Figure 2)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FbJaZxOppwF5yzaogzlXM%2Ff0dc0eca-5eac-4a78-a60f-882c71d82dd9.png?alt=media&token=463b6612-f6b7-4344-ba81-7c95b3a5b9c5","id":"f0dc0eca-5eac-4a78-a60f-882c71d82dd9","width":1400,"height":394,"filename":"Capture-2024-10-02-150840.png","type":"image/png","caption":"Figure 2","border":false}]}
```

**Component-specific tokens (Decision tokens) —** these tokens are tokens used for specific purposes. For example:

`color.button.accent.defaultdefault`\
` Here: `\
`color - the color `\
`button - which component it belongs to, `\
`accent - which color it should be, `\
`default - which state it should be in`

The following example (Figure 3) shows the use of Global tokens (neutral-700) and Component-specific tokens:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FbJaZxOppwF5yzaogzlXM%2F2c93d7be-c9ad-4c09-b697-e6f21193b04c.png?alt=media&token=b3e2f926-c1a6-4bb6-8d7a-79992534d9a9","id":"2c93d7be-c9ad-4c09-b697-e6f21193b04c","width":1400,"height":578,"filename":"Capture-2024-10-02-151007.png","type":"image/png","caption":"Font color is Global, and Button color belongs to Component-specific tokens. (Figure 3)","border":false}]}
```

## **Use of tokens**

If we use tokens, we must use them appropriately for the content. Otherwise, it may cause us problems during future updates or other unforeseen circumstances.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FbJaZxOppwF5yzaogzlXM%2F10d87561-5ae8-4ec3-9fa3-507b446d072b.png?alt=media&token=af6cd376-d335-40a7-8c89-e3bdd7dbf91f","id":"10d87561-5ae8-4ec3-9fa3-507b446d072b","width":1400,"height":316,"filename":"Capture-2024-10-02-151051.png","type":"image/png","caption":"Right way to use","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FbJaZxOppwF5yzaogzlXM%2F502efe4a-4401-4894-803c-cd8d629d79ad.png?alt=media&token=965542aa-30c7-4fca-9cc8-22bff1e42e41","id":"502efe4a-4401-4894-803c-cd8d629d79ad","width":1400,"height":316,"filename":"Capture-2024-10-02-151102.png","type":"image/png","caption":"Wrong way to use","border":false}]}
```

## **An example ✨**

Let's assume that in your team development work is done by outsourced developers, all the work is done in this way. After some time, a decision is made and it is decided to assemble a new development team. In this case, how will new developers use the design system?

Option 1: No design tokens 🥹\
In this case, new developers should be trained by old developers, designers should explain the design system to them, and then work on the project should begin. If a design system is used in several projects, this in itself creates an additional problem and workload.

Option 2: We have tokens 🫦\
At this time, the tokens (the naming structure) are simply explained to new developers, and developers can easily start their new work.

## **Finally…**

Summarizing the data, design tokens allow design systems to be easily used by the entire team (whether developers or designers), updates are quick and easy, design systems can be easily integrated into multiple projects, etc. is an ideal tool for Of course, not everyone has to use tokens, you can if you talk to your team and come to a mutual agreement. 🏄🏻‍♀️

---

Have a nice day and see you in the next blogs 💜

*All visuals are made by me and must be credited when used.*

And if you've come this far, here's a gift from me to you ❤️‍🔥 in this music

> *[Moku Moku - Hako Is Alive and She Is 59](https://open.spotify.com/track/6b0GBFyOJ7V15bzdUnoxiC?nd=1&dlsi=d6167d182af445d8)*

Tokens in design systems 🫧

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FctOT1TCDll045kchhpCA%2Fb6892a58-7e49-44eb-97f6-14f39423ba9f.png?alt=media&token=79e0c7b3-aaed-4621-97ae-00212f48cf64","id":"b6892a58-7e49-44eb-97f6-14f39423ba9f","width":1400,"height":788,"filename":"Capture-2024-10-02-151359.png","type":"image/png","caption":"","border":false}]}
```

Welcome back to part 4 of my series of blogs about design systems. In this blog, we will talk about *colors in Design systems*.

---

## **Colors in design systems:**

One of the first things we do when starting a new project is choosing a color. Choice of colors to match the brand and project. It's the same when creating a design system, so if you're starting a new design system, one of the first things you should do is choose the right colors. The right colors? Yes... But what is the correct color and according to whom? If we ask this question, we can start already.🤯

There is no standard rule for choosing colors for a design system, and many designers have their own correct ways. And today I will tell you about how I did it while preparing the VTB Design system.

## **Places of use:**

Before starting the color selection, we must first determine where and in which parts we will use the colors.

These parts for the VTB Design system (Figure 1):

1\. Surface\
2\. Border\
3\. Element\
4\. Text

was determined as:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FctOT1TCDll045kchhpCA%2F9c47a8ad-bf2a-4603-bf16-aee7015a374a.png?alt=media&token=d44711b5-730f-43f9-a6f2-c6a95e0cf701","id":"9c47a8ad-bf2a-4603-bf16-aee7015a374a","width":1400,"height":788,"filename":"Capture-2024-10-02-151607.png","type":"image/png","caption":"Figure 1","border":false}]}
```

Figure 1 shows an example of the interface according to the names. Now let's go to the second stage, the choice of states. Since states are globally defaulted, let's choose states without wasting too much time in this section:

1\. Default\
2\. Hover\
3\. Focus\
4\. Disabled

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FctOT1TCDll045kchhpCA%2Feb17c6ba-9352-4d6b-9483-c0fc97e5a84b.png?alt=media&token=7820fcc1-c728-48c7-b521-3bc2d854fc84","id":"eb17c6ba-9352-4d6b-9483-c0fc97e5a84b","width":1400,"height":788,"filename":"Capture-2024-10-02-151700.png","type":"image/png","caption":"Figure 2","border":false}]}
```

In our projects, the indicated 4 states are enough, if you need an additional state or less, you are free to choose.

## **Brand colors:**

Since we finished the first 2 parts, we can now move on to the 3rd stage, that is, the selection of colors. (Photo 3)🏄🏻‍♀️

Here, the brand color is selected as the main color (or colors), and semantic, neutral colors are prepared accordingly. Semantic colors are selected over the HSL system and mainly change the hue, while the saturation and lightness change with a maximum range of +10 and -10. In this way, we get the semantic colors corresponding to the brand color.

Neutral colors are obtained by changing saturation and lightness, while the hue remains constant. In this way, a neutral color matching the brand color can be obtained.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FctOT1TCDll045kchhpCA%2F4799ae8d-de9f-4eed-822f-e60630cbb188.png?alt=media&token=dc4aac15-ddb2-49fd-a58d-9510086756ed","id":"4799ae8d-de9f-4eed-822f-e60630cbb188","width":1400,"height":788,"filename":"Capture-2024-10-02-151735.png","type":"image/png","caption":"Figure 3","border":false}]}
```

## **Shades:**

If we have chosen the places of use and brand colors, we can move to the next stage, the selection of shades. 🫡

There are two methods for this, Manual and Automatic method:

1. ***Manual method:*** With this method, you can select the shade range and change the saturation and brightness on HSB based on it. Briefly, you can lower the saturation to 10 and increase the brightness to 99 to get lighter shades. For dark shades, it is enough to reduce the brightness to 50 without changing the saturation.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FctOT1TCDll045kchhpCA%2F4d925f51-e5e8-4e10-a6af-d945d6878631.png?alt=media&token=3ec03490-470d-4764-9c69-5528a60b3dec","id":"4d925f51-e5e8-4e10-a6af-d945d6878631","width":1400,"height":788,"filename":"Capture-2024-10-02-151803.png","type":"image/png","caption":"Figure 4","border":false}]}
```

> As we can see from the example above, when making dark and light shades, exact numbers are not used, they vary by color. In other words, when we say English, we do ( [Eyeballing](https://www.openriskmanual.org/wiki/Eyeballing#:~:text=Eyeballing%20is%20an%20informal%20term,of%20tabulated%20or%20graphical%20data.) ). 👀

***2. Automatic method:*** In this method, we can use various online tools or Figma plugins.

As a website:

1. [colorbox.io](https://colorbox.io/)

2. [colors.eva.design](http://colors.eva.design/)

3. [uicolors.app](http://uicolors.app/)

Figma plugins:

1. [Color Shades](https://www.figma.com/community/plugin/929607085343688745)

2. [Foundation: Color Generator](https://www.figma.com/community/plugin/1024452006068794933)

3. [HueHue — Tints and Shades](https://www.figma.com/community/plugin/1216562126235955526)

In this way, it is easier and faster to get results and prepare colors. But sometimes you may need to change the colors slightly to meet WCAG standards.

Of the tools I mentioned above, the one I use the most is [Colorbox.io](http://colorbox.io/). Here you can interfere more with colors and shades, which in turn makes the result better.

## **Color box:**

Now let's go to how to use the Color box:

Without further ado, let me tell you simply what settings I use:

Number of Steps:\
**21 — minor steps 0 & 1**

Hue:\
**From start to end same** *value*

Saturation:\
**From 0 to 1 — Rate 1**

Brightness:\
**From 0 to 1**

Locked Value:\
**The Hue number of the selected color**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FctOT1TCDll045kchhpCA%2Fb5e5f797-263c-4055-80be-7a3ae0c591f5.png?alt=media&token=65072694-addd-4b53-854b-d2799d610bbf","id":"b5e5f797-263c-4055-80be-7a3ae0c591f5","width":1400,"height":536,"filename":"Capture-2024-10-02-151852.png","type":"image/png","caption":"Figure 5: Color Box","border":false}]}
```

*P.s. When making Shades, don't forget to change the Curve settings of different colors and choose the appropriate one. All colors are different and each color has its own Curve adjustment.*

## **Choice of colors:**

Since we have prepared our shades, we can now move on to the selection of colors. (Figure 6)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FctOT1TCDll045kchhpCA%2Ff7587bec-df6a-406b-94f1-3cce0fd5c57d.png?alt=media&token=dcd7706c-95a5-4ab8-aa4b-1b0cd1a0a7af","id":"f7587bec-df6a-406b-94f1-3cce0fd5c57d","width":1400,"height":788,"filename":"Capture-2024-10-02-151930.png","type":"image/png","caption":"Figure 6","border":false}]}
```

We select colors based on their usage and test each color for WCAG along with the colors it will be used for, and add that color to the system after making sure it has at least AA contrast.

For the Contrast test:

1. [Contrast](https://www.figma.com/community/plugin/748533339900865323)

2. [Simple WCAG 2.1 color contrast checker](https://www.figma.com/community/plugin/1220101069607769508)

And you can use other plugins.

> *Remember to use Tokens when naming colors and make the naming understandable to everyone. [For more information about tokens, you can check out my blog](https://uxbymaharram.medium.com/dizayn-sisteml%C9%99rind%C9%99-tokenl%C9%99r-f6246dda400d) :)*

## **Application of colors:**

If we have selected the colors and done the contrast test and everything is in order, we can now apply the colors.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FctOT1TCDll045kchhpCA%2F3f817b1e-2356-44ed-b339-d7483bfba867.png?alt=media&token=d6877659-38b9-4ed2-a65b-94838aed2d52","id":"3f817b1e-2356-44ed-b339-d7483bfba867","width":1400,"height":788,"filename":"Capture-2024-10-02-152037.png","type":"image/png","caption":"Figure 7","border":false}]}
```

Figure 7 shows an example of applying colors over a Button Group. As can be seen here, each element has tokenized colors corresponding to its state. After applying the colors according to the tokens, we don't need to think about the contrasts anymore, because all our colors are AA standard.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FctOT1TCDll045kchhpCA%2F24bac3ec-a386-4186-95d2-9bdd8e935a9a.png?alt=media&token=a02b9b8e-ef83-4546-808f-57aa6deba756","id":"24bac3ec-a386-4186-95d2-9bdd8e935a9a","width":1400,"height":1077,"filename":"Capture-2024-10-02-152114.png","type":"image/png","caption":"Figure 8","border":false}]}
```

Figure 8 shows a simple test I did for contrast. After applying the colors, I just tested it without changing and it is WCAG AA compliant.

## **Last words…**

In this blog, we mainly talked about the choice of colors and which tools to use. By doing all these things in order, you can also create accessible colors for your design system. Psst, you can apply what you learn here in your own way and discover new ways.🤫

---

Have a nice day and see you in the next blogs.💜

*All visuals are made by me and must be credited when used.*

And if you've come this far, here's a gift from me to you in this music.❤️‍🔥

> *[Jersey - The World I'm Searching For](https://open.spotify.com/track/4bGxZBtZU18y9ASWHS1nFA?nd=1&dlsi=bda3fccce4574036)*

Colors in design systems 🌈

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FwJOpSPm7VeGG9p25A7tj%2F737fe897-c762-41d8-8d8c-b5c396ee1c59.png?alt=media&token=9d2c55f8-fadc-4f24-b2b4-160a58df0e06","id":"737fe897-c762-41d8-8d8c-b5c396ee1c59","width":1440,"height":764,"filename":"Token sturukture.png","type":"image/png","caption":"Tokens Structure","border":false}]}
```

This image effectively showcases our approach to managing blue color tokens within the design system, ensuring a consistent and cohesive visual experience.

1. **Key Points:**

\- Hex Codes: Each color is explicitly defined by its hexadecimal value (e.g., \`#042351\`).

\- Token Names: Colors are distinctly assigned unique token names (e.g., \`blue/1100\`, \`blue-darker\`) for effortless reference and updates.

\- Light and Dark Modes: The system robustly supports both themes, with tokens like \`blue-dark/light\` and \`blue-dark/dark\` dynamically adapting to different modes.

\- Hierarchy: Tokens are meticulously organized hierarchically to represent various shades of blue, ensuring unwavering consistency.

2. **Significant Advantages:**

\- Consistency: Standardized tokens unequivocally ensure a unified look across interfaces.

\- Efficiency: Rapid application and modification of colors unequivocally streamline the workflow.

\- Flexibility: Effortless updates to the design system consistently propagate automatically.

\- Accessibility: Robust support for light and dark modes enhances user experience. significantly

### **Types of Tokes:**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FwJOpSPm7VeGG9p25A7tj%2Fb7a63a0d-d72f-45d5-a9c3-c8e49928f89e.png?alt=media&token=0d33a309-4bdd-49ef-8abe-e6ffd4ee4fa0","id":"b7a63a0d-d72f-45d5-a9c3-c8e49928f89e","width":1440,"height":764,"filename":"Token types.png","type":"image/png","caption":"Types of Tokes","border":false}]}
```

In VirtualUI, I have implemented 2 types of tokens (excluding typography):

1. **Color tokens**

These tokens consist of Brand & Semantic Colors: Blue, Red, Orange, Green, Purple, and Neutral. When we need any of these colors in the UI, we use color tokens as shown in Image 1. The naming structure of these tokens is straightforward. More detailed images of the naming and usage of these tokens will be provided in the following sections.

2. **Element tokens**

These tokens are widely used, from buttons to backgrounds. Element tokens are a simplified version of component tokens due to the reduced number of tokens required to maintain. Element tokens are divided into 5 types:

\- Surface (6 tokens)

\- Text (4 tokens)

\- Icon (4 tokens)

\- Border - Separator (4 tokens)

\- Special (3 tokens)

Why did I choose these specific types? After months of research, I identified a method to reduce the number of tokens used by grouping them to create a straightforward approach. Now, even non-designers can easily understand where to use each token. My primary goal was to make this design system universally accessible and simple to use. With these tokens, I have unequivocally achieved it!

### **Usage of Tokens:**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FwJOpSPm7VeGG9p25A7tj%2F1cb01e70-56f4-4d9d-b557-342d01c90c4f.png?alt=media&token=c3589c36-9f24-4947-9190-a3fc2439fc41","id":"1cb01e70-56f4-4d9d-b557-342d01c90c4f","width":1440,"height":764,"filename":"1.png","type":"image/png","caption":"Usage of Tokens, Toast","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FwJOpSPm7VeGG9p25A7tj%2Ffb7b32f0-ecac-4f19-ac25-3c63a1ee234d.png?alt=media&token=5e5e6969-26ae-430a-84a4-eaee3b08d59d","id":"fb7b32f0-ecac-4f19-ac25-3c63a1ee234d","width":1440,"height":764,"filename":"2.png","type":"image/png","caption":"Usage of Tokes, Navbar","border":false}]}
```

Colors and Element tokens can be used for the same purposes such as borders and backgrounds. In the two token usage examples provided, the primary consideration is backgrounds. VirtualUI features six different background types:

\- Surface-dark

\- Surface-dark-helper

\- Surface-bg

\- Surface-main

\- Surface-main-helper

\- Surface-alpha

Now, the reason behind having six different surface tokens will be explained.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FwJOpSPm7VeGG9p25A7tj%2Ff9bedc30-b179-4f43-89df-cf0743ee7783.png?alt=media&token=102d7540-1109-40dd-a32e-74bfd4b1cbcc","id":"f9bedc30-b179-4f43-89df-cf0743ee7783","width":1440,"height":1096,"filename":"5.png","type":"image/png","caption":"Layers of UI","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F896sbW2cPBPyYUojFWILYOSMEPs2%2FwJOpSPm7VeGG9p25A7tj%2F45b5f891-cb67-4263-83c3-574b05dd74fb.png?alt=media&token=77cfb531-3b1d-47c1-9a17-d0ce7513b687","id":"45b5f891-cb67-4263-83c3-574b05dd74fb","width":1440,"height":1016,"filename":"3.png","type":"image/png","caption":"Main Dashboard","border":false}]}
```

As you see above, each token has its own use cases. Let's explain these use cases in more detail: Each token has its own specific use case:

1\. Main Background:

This token is strictly used for absolute backgrounds with a z index of 0.

2\. Main Surface Background:

Exclusively used for the main container, such as the header background or history section, with a z index of 1.

3\. Surface over Surface Background:

This token is used when a container needs to be placed over the main container, for example, for the cards view in the cards section, with a z index of 2.

4\. 64% Alpha Background for Blurred Backgrounds:

This token adds a touch of glamour to the UI with a 64% transparent background, such as for the tab bar, with a z index of 10 (possibly).

5\. Dark Surface Background for Light Mode:

These background colors may not be currently in use, but are planned for future use as more features are added, with a z index of 1.

6\. Dark Surface over Surface Background for Light Mode:

Similar to token 3, this token is also used for a container over the main container, if the main container is using token 5, with a z index of 2.

Conclusion:

By implementing tokens in VirtualUI and embracing the design language of Bank VTB Azerbaijan, we have successfully established a more centralized, polished, and user-friendly color system. This has significantly enhanced our flexibility and streamlined the process of creating, modifying, and updating products, both in Figma and during development. If you require a design system for your project or company or need assistance with your current design system, do not hesitate to schedule a call with me.

Tokens of Virtual UI

Product Designer

Interaction Design nədir?

Writing about Interaction Design which covers what interaction design is and why we need to use it 🧚🏻

Nielsen Heuristics — Bilməli olduğunuz 10 histerik.

A short and informative writing about Nielsen Heuristics 🚀

Build Wireframes and Low-Fidelity Prototypes

Responsive Web Design in Adobe XD

Create High-Fidelity Designs and Prototypes in Figma

Foundations of User Experience (UX) Design

Start the UX Design Process: Empathize, Define, and Ideate

Conduct UX Research and Test Early Concepts

Internet Banking Project for Bank VTB Azerbaijan. You can also check the Virtual UI Case study for more details and the motivation behind this project.

Internet Banking

Design system made for VTB Online. for more, Check this out:

Virtual UI (Design System)

Corporate website for Vitanur, but a little bit unusual.\
\
Some of the animation from the landing page ✨

[https://x.com/uxbymaharram/status/1781389893362397602](https://x.com/uxbymaharram/status/1781389893362397602 "https://x.com/uxbymaharram/status/1781389893362397602")

[https://x.com/uxbymaharram/status/1780562902740607342](https://x.com/uxbymaharram/status/1780562902740607342 "https://x.com/uxbymaharram/status/1780562902740607342")

[https://x.com/uxbymaharram/status/1780143472155959769](https://x.com/uxbymaharram/status/1780143472155959769 "https://x.com/uxbymaharram/status/1780143472155959769")

Vitanur

[framershaders.xyz ](https://framershaders.xyz/ "https://framershaders.xyz/")is a GLSL shaders library made using Framer code components for usign in Framer.

Framer Shaders Library

I was invited to talk About how we maintain [Virtual UI](https://www.maharram.xyz/virtual-ui) and use it on different kinds of projects. The last part of my talk was about the Accessibility of colors, texts, and effects on a Design System.

Talk about Design Systems

We collaborated with Ulvin to organize the first-ever Framer meetup in Baku, Azerbaijan. 

Framer x Baku

I talked about how we need to collaborate with front-end developers while designing.

GDG x Baku

As the founding designer at Vitanur, I was responsible for shaping the company's entire design identity. This involved assembling a team of 8 talented designers and leading the comprehensive rebranding efforts for the company. In addition to overseeing the redesign of their website, which is currently under construction, I also revitalized their branding and developed a new design system to fully capture and express their updated design language.

Founding Product Designer

We recently completed a redesign of the Socar Midstream website in Azerbaijan. The goal of the project was to improve the user experience and make the site more visually appealing. We implemented a clean and modern design, as well as streamlined navigation to make it easier for visitors to find what they need.

Freelance Product Designer

Otobaza is an online auto parts dealer located in Azerbaijan with a sleek and modern website design. Our website is easy to navigate and allows users to easily find and purchase the auto parts they need. We strive to provide a user-friendly shopping experience for all of our customers.

As a designer, I have had the opportunity to work on numerous projects that have been loved and used by thousands of people in Azerbaijan. These projects include mobile banking and internet banking. My main focus has always been on creating user-friendly designs that make it easy for people to access and use these services. I am always striving to improve the user experience and make my designs as accessible as possible.

The Conference website for MINEPS 7 was designed to be user-friendly and accessible to all attendees. The website was created for the international conference of Unesco and the ministry of youth and sports of Azerbaijan, and includes information about the conference schedule, speakers, and registration. The website was designed with a focus on accessibility, ensuring that all attendees can easily access and navigate the site.

Our interactive education system is perfect for K-12 schools looking to engage their students in a fun and interactive way. Our user-friendly platform allows teachers to easily create and assign lessons, track student progress, and collaborate with their colleagues. With our system, education becomes an interactive and enjoyable experience for both teachers and students.

Maharram Hasanli

2024

2023