Blog

My weekly thoughts



Creating a flexible design token taxonomy in a design system is crucial for maintaining design consistency and scalability across a variety of platforms and devices. Design tokens are a way to abstract design decisions into reusable pieces of code or values, making it easier to manage and update your design system. Here are the steps to create a flexible design token taxonomy:

1.  **Understand Your Brand and Design Principles:** Before creating design tokens, it's essential to have a clear understanding of your brand and design principles. What are your brand colors, typography, spacing, and other core design elements? This knowledge forms the foundation of your design tokens.
    
2.  **Identify Your Design Tokens:** Start by identifying the design properties that need to be abstracted into tokens. Common design tokens include colors, typography (fonts, font sizes, line heights, letter spacing), spacing units, border radii, and box shadows. The specific tokens may vary depending on your design system's needs.
    
3.  **Organize Your Tokens:** Organize your design tokens into categories. Common categories include:
    
    -   **Colors:** Primary colors, secondary colors, background colors, text colors, etc.
    -   **Typography:** Font families, font sizes, line heights, and font weights.
    -   **Spacing:** Margins, paddings, and other spacing units.
    -   **Borders and Shadows:** Border radii, box shadows, and other stylistic elements.
    -   **Icons:** Define the size and color variations for icons if applicable.
4.  **Naming Convention:** Develop a consistent naming convention for your tokens. This convention should be intuitive, descriptive, and easy to understand. For example, you can prefix colors with "color-", typography with "font-", and spacing with "spacing-".
    
5.  **Define Token Values:** Specify the actual values for each token. For example:
    
    -   `color-primary`: #0073e6
    -   `font-primary`: 'Roboto', sans-serif
    -   `spacing-small`: 8px
    -   `border-radius-medium`: 4px
6.  **Document Your Tokens:** Create comprehensive documentation that explains each token, its purpose, and how it should be used. This documentation can be part of your design system documentation or a separate style guide.
    
7.  **Implement Tokens:** Integrate the design tokens into your design system. Make sure that developers and designers know where to find and how to use these tokens in their projects.
    
8.  **Version Control:** Design tokens can evolve over time. Implement a version control system to track changes and updates. Consider using a tool like Style Dictionary or a version control system like Git to manage your design tokens.
    
9.  **Testing and Validation:** Ensure that your design tokens work as expected across different platforms and devices. Testing and validation are critical to maintaining consistency.
    
10.  **Adoption and Education:** Train your team members, designers, and developers on how to use these design tokens effectively. Encourage adoption within your organization.
    
11.  **Iterate and Update:** As your design system evolves or new design requirements arise, be prepared to iterate and update your design tokens accordingly.
    
12.  **Accessibility Considerations:** Ensure that your design tokens take accessibility into account. For example, contrast ratios for text on background colors should meet accessibility standards.
    

By creating a well-organized and documented design token taxonomy, you can promote consistency, improve collaboration between design and development teams, and make it easier to adapt your design system to different platforms and devices.

Creating a flexible design token taxonomy in a design system is crucial for maintaining design consistency and scalability. 

Creating a flexible design token taxonomy in Design System




A design system is an essential tool for maintaining a consistent and cohesive user experience across all your digital products. However, creating and maintaining a design system is just the beginning. Proper documentation is the key to ensuring that your design system is accessible, usable, and scalable. In this comprehensive guide, we will explore how to document your design system effectively.

## **1. Define Your Design System's Goals and Objectives**

Before diving into documentation, establish clear goals and objectives for your design system. What problems should it solve? Who are the primary users of the design system? Having a well-defined purpose will help shape your documentation and make it more effective.

## **2. Choose a Documentation Format**

There are various formats you can use to document your design system, such as a website, PDF, or a specialized tool like Figma or Sketch. Select the format that best suits your team's needs and technical capabilities.

## **3. Create a Table of Contents**

Begin your documentation with a clear and organized table of contents. This will help users quickly find the information they need. Consider categorizing content into sections like "Typography," "Colors," "Components," "Guidelines," and "Examples."

## **4. Start with an Introduction**

Provide a concise introduction that explains the purpose of your design system. Briefly describe its history, objectives, and benefits. This is where you set the stage for the rest of your documentation.

## **5. Explain Your Design Principles**

Outline the guiding principles that inform your design decisions. This helps users understand the rationale behind the system and promotes consistency.

## **6. Document Your Components**

This is the heart of your design system documentation. Detail each component, such as buttons, forms, cards, and icons. Include information like:

-   **Name:** The component's name.
-   **Description:** A brief explanation of what it is and its intended use.
-   **Usage:** How and where to use the component.
-   **Variations:** Different styles, states, or versions of the component.
-   **Code Implementation:** Provide code snippets and examples for developers.
-   **Visual Examples:** Include screenshots and visuals to show how the component looks.

## **7. Define Typography and Color Guidelines**

Explain your typography choices, including fonts, sizes, and spacing. Define color palettes, including primary, secondary, and accent colors, and specify their usage.

## **8. Create Design Assets and Resources**

If your design system includes icons, images, or other assets, provide a library or a clear way to access them. Ensure that these assets are easily downloadable in appropriate formats.

## **9. Offer Accessibility Guidance**

Accessibility is crucial. Provide guidelines for creating accessible designs, including text alternatives for images and adherence to WCAG standards.

## **10. Include Code Standards and Guidelines**

For developers, offer coding guidelines, best practices, and naming conventions. Explain how to integrate the design system into different technologies, such as HTML, CSS, and JavaScript.

## **11. Document Versioning and Updates**

Regularly update your documentation to reflect changes in the design system. Use version numbers and changelogs to keep users informed about modifications and improvements.

## **12. Provide Examples and Use Cases**

Showcase real-world examples of your design system in action. Provide case studies and scenarios to help users understand how to apply the design system effectively.

## **13. User Testing and Feedback**

Encourage users to provide feedback and report issues they encounter with the design system. This helps you refine and improve the system over time.

## **14. Make It Searchable**

Ensure your documentation is easily searchable. Implement a robust search functionality to help users quickly find the information they need.

## **15. Train Your Team**

Offer training and workshops to familiarize your team with the design system and its documentation. This ensures consistent use and understanding.

## **16. Keep It Up to Date**

Regularly maintain and update your documentation. An outdated design system can lead to confusion and inconsistencies.

## **Conclusion**

Documenting your design system is a crucial step in ensuring its success and usability. A well-organized and comprehensive documentation system not only helps your team but also allows others to embrace and adopt your design system more effectively. Remember that great design systems are not just about how they look but how they are used, and documentation is the bridge that connects the two.

By following the steps outlined in this guide, you can create a robust and accessible documentation system that supports your design system's growth and evolution.

A design system is an essential tool for maintaining a consistent and cohesive user experience across all your digital products. 

How to Document Your Design System


In the ever-evolving world of UX/UI design, creating visually appealing and user-friendly interfaces is paramount. To achieve this, designers need to understand and apply a set of fundamental principles that form the bedrock of their craft. These principles not only enhance the aesthetics of a design but also play a crucial role in user experience. In this article, we will delve into six essential design principles that every UX/UI designer must know. From contrast to hierarchy, these principles serve as guiding lights in the creative journey, ensuring that your designs not only look good but also function effectively.

**Contrast**: Contrast is about making elements stand out. It adds interest and guides the viewer's eye. Use contrasting colors, fonts, sizes, or shapes to create visual hierarchy and draw attention to key elements in your design.

**Layout**: Layout is the foundation of your design. Consider the arrangement of elements, spacing, and overall composition. A well-organized layout can improve readability and user experience, making your design more effective.

**Color**: Color is a powerful tool for evoking emotions and conveying messages. Choose a color palette that aligns with your brand or message. Remember to consider color psychology and accessibility to reach a wider audience.

**Alignment**: Alignment brings order and cohesion to your design. Elements should be aligned with each other or a grid to create a harmonious and balanced composition. This ensures your design looks intentional and polished.

**Balance**: Balance is about distributing visual elements within your design to create a sense of equilibrium and stability. It ensures that no single element overpowers the others, resulting in a harmonious and pleasing composition.

**Hierarchy**: Hierarchy guides the viewer's attention. It helps them understand the importance of elements in your design. Use typography, color, size, and placement to establish a clear hierarchy and lead the viewer through your content.


## Conclusion:

In the realm of UX/UI design, mastering these six foundational principles - contrast, layout, color, alignment, balance, and hierarchy - can be the key to creating interfaces that captivate, engage, and delight users. While the digital landscape continues to evolve, these timeless principles remain the cornerstones of effective design. By incorporating them into your work, you'll not only create visually stunning designs but also ensure that your creations offer a seamless and intuitive user experience. So, whether you're a seasoned designer or just starting in the field, keep these principles in mind as you craft the next generation of user interfaces. Your users will thank you for it.

In the ever-evolving world of UX/UI design, creating visually appealing and user-friendly interfaces is paramount. 

6 Design Principles every UX/UI Designer must know 

Product designer with  over <span class="text-white"> 7 years of experience</span> focused on developing and maintaining design systems.


As Featured By

I approach design strategically, aligning with your business objectives to deliver results-driven solutions.


Business Thinking

I meticulously craft design elements to maintain a consistent and cohesive visual identity, reinforcing your brand's presence and trustworthiness.


Scalability

I bring your vision to life with meticulous attention to detail, turning design concepts into reality with precision and craftsmanship..


Execution

The approach

Process Delivers Value

6 — Present

Recent Works


## Where every flavor tells a story.

FoodSpring is a mobile app that brings the world's flavors to your fingertips. Designed to entice and inform, it offers a visual feast of high-quality images and engaging stories behind every dish. Users can explore diverse cuisines, learn about their cultural and historical significance, and even access recipes. It's more than an app; it's a culinary adventure, making FoodSpring the perfect companion for food lovers and cultural explorers.

## Typography

![Bis 01.](/images/project/typo.png)

## Color Palette

![Bis 01.](/images/project/color.png)

## Onboarding

![Bis 01.](/images/project/onb.png)

## Main & Recipe screens

![Bis 01.](/images/project/main.png)

## Adding recipe pages

![Bis 01.](/images/project/add.png)

## Notification & profile page 

![Bis 01.](/images/project/not.png)



Client

Timeline

Services

website

FoodSpring


## Business intelligence system solutions.

Biss company provides customized software development, system integration, solution design, and consulting services to clients in the Telco/Service provider systems, Enterprise applications, and State/Government domains. They specialize in delivering cost-effective, efficient, and high-quality solutions tailored to meet the specific requirements of theier clients.


## Approach

In a first step wireframes were created to test and agree on general directions and to clarify content blocks and fix the structure of the website.

 To enhance the existing design system, a blue color scheme was introduced to create a consistent and sleek aesthetic. The greyscale was adjusted to include subtle blue tones, adding depth and sophistication to the design.

 In terms of typography, the versatile and modern Montserrat font was chosen as the primary typeface to create a clean and professional look. For headlines, the bold and highly legible Montserrat font was used, adding a touch of elegance and modernity to the design, while also complementing the blue color scheme.


<div class="image columns-1 sm:columns-2 gap-8">

![Bis 01.](/images/project/biss-1.png)
![Biss 02.](/images/project/biss-2.png)
</div>

## Final UX / UI

![Bis 01.](/images/project/biss-final.png)

Biss Web


## Anroni development

 My role in the project involved researching and understanding the target
                                     audience, developing user personas, and mapping out user journeys. By understanding the users' needs and behaviors,
                                     I was able to design a website that provided an intuitive and seamless user experience.


  In the design phase, I worked on creating wireframes, prototypes, and visual designs. I focused on creating a clean and modern design that reflected the company's brand identity while also being visually appealing and easy to navigate.

   To ensure the website was accessible to all users, I paid attention to color contrast, font size, and other accessibility guidelines. Additionally, I ensured that the website was mobile-responsive, which meant that
                                            it could be accessed on different devices and screen sizes without any issues.

<div class="image columns-1 sm:columns-2 gap-8">

![Curoloy 04.](/images/project/anroni-one.png)
![Curoloy 05.](/images/project/anroni-two.png)
</div>


<div class="image columns-1 sm:columns-2 gap-8">

![Curoloy 04.](/images/project/anroni-4.png)
![Curoloy 05.](/images/project/anroni-5.png)
</div>

## Code of tomorow

Engaging, efficient, and reliable software solutions using cutting-edge technology for your digital future investment.



Anroni development


## Manage tasks on the fly

Whether you're juggling multiple projects at work or trying to stay on top of your personal to-do list, this app has everything you need to stay organized and productive. You can create custom categories and tags to sort your tasks by project, priority, or any other criteria that makes sense for you



<div class="image columns-1 sm:columns-1 gap-8">

![Everyday 01.](/images/project/task-t.png)
</div>

## Challenge

This mobile app is designed to make task and project management more efficient and accessible, allowing users to easily organize and track their work from anywhere. With its user-friendly interface, the app makes it easy to create tasks and projects, set deadlines, and assign them to specific team members.


<div class="image columns-1 sm:columns-2 md:columns-2 gap-8">

![Not—Pot 02.](/images/project/task1.png)
![Not—Pot 02.](/images/project/task2.png)
![Not—Pot 03.](/images/project/task5.png)
![Not—Pot 03.](/images/project/task12.png)
</div>

Tasky


## About the project.

By leveraging the power of data and intelligent analysis, this tool can help organizations achieve their goals more efficiently and effectively, while minimizing waste and improving transparency

## Challenge

By analyzing data and identifying inefficiencies, the tool can suggest changes to the organization's structure that will reduce overhead costs and improve transparency.


<div class="image columns-1 sm:columns-2 md:columns-2 gap-8">

![Not—Pot 02.](/images/project/goxy.png)
![Not—Pot 02.](/images/project/goxy-1.png)
![Not—Pot 03.](/images/project/goxy-2.png)
![Not—Pot 03.](/images/project/goxy-3.png)
</div>


<div class="image columns-1 sm:columns-1 md:columns-1 gap-8">

![Not—Pot 02.](/images/project/goxy-4.png)

</div>
<div class="image columns-1 sm:columns-1 md:columns-1 gap-8">

![Not—Pot 02.](/images/project/goxy-5.png)

</div>

Senior Product Designer