Chapter 1 :: A few words about design systems...

Design systems are like superheroes for digital products, equipped with superpowers to elevate the user experience and streamline the design process. They are the secret sauce that empowers designers and developers to create remarkable and cohesive experiences across every corner of the digital universe.

But what exactly is a design system, you ask?

Picture it as a meticulously crafted toolkit, brimming with reusable components, guidelines, and design principles. It is like having a trusted sidekick that ensures consistency, efficiency, and harmony throughout your entire product ecosystem.

In short, a design system is a collection of reusable components, rules, development tokens and robust guideline of how a digital product should be designed. It greatly reduces the time and effort taken in building a scalable product from both the designer and developer's part, all the while ensuring consistency, user experience and the ability to create new products under the same umbrella. In today's fast-paced digital world, where users expect seamless experiences across multiple devices, having a design system in place is undoubtedly crucial. However, a well-crafted design system is not just about putting a collection of UI elements together, it israther about creating a cohesive and comprehensive solution that scales, adapts and allows for easy customisation.

What is its purpose exactly?

By providing a centralised repository of design elements and guidelines, Design Systems enable teams to work harmoniously, reducing redundancies and saving valuable time and resources. According to a survey conducted by Lucidpress in 2019, 24.5% of respondents stated that inconsistent branding leads to market confusion, while 18.6% believed that such inconsistency could harm a brand's reputation. Consistency in design improves user understanding and recognition, enhances user experience and mass-perception of the brand. It is like having a master conductor orchestrating a symphony of design elements, colours, typography, and spacing, all in perfect harmony. This consistency not only creates a seamless experience for users but also instills a sense of trust and familiarity.

1. Replicability:
   With a design system, designers can replicate design elements and patterns quickly and rapidly in a consistent manner, accelerating the development of new products or features.
2. Redundancy:
   By providing a centralised repository of reusable components and guidelines, design systems eliminate the need to recreate design elements, saving valuable time and effort.
3. Consistency:
   As design systems work as a centralised repository of reusable components, patterns and guidelines, teams that work in silos can also have consistency on multiple platforms, saving valuable time and effort.
4. Compatibility:
   Design systems establish a shared vocabulary and visual language, ensuring clear communication and alignment among designers, developers, and stakeholders across every platform and products of the organisation.
5. Efficiency:
   As the design system stores design decisions, it boosts efficiency by enabling designers and developers to access pre-approved elements, reducing decision-making time.
6. Collaborability:
   Design systems promote collaboration among teams, aligning their efforts and encouraging a sense of ownership, resulting in sharing and aligning the same vision with all team members.

How it is different from a style guide?

While a style guide primarily focuses on the "what" of design, a design system goes a step further, addressing the "how" and "why" as well. In other words, while a style guide sets the stage for brand consistency, a design system empowers teams to create cohesive, efficient, and user-centred digital experiences.

A style guide primarily focuses on visual elements and brand guidelines. It outlines the rules and specifications for colours, typography, logos, and other visual assets. Think of it as a comprehensive handbook that explains and establishes the visual identity of a brand. A style guide ensures that the brand is presented consistently across different touch-points, such as marketing materials, websites, and applications. It acts as a reference point for designers and developers, providing guidance on how to implement the brand's visual elements accurately.

On the other hand, a design system takes a more holistic approach, encompassing not only visual elements but also the functional and interactive components of a digital product. A design system goes beyond visual aesthetics to encompass the underlying structure and behaviour of digital products. It offers a library of components, user interface patterns, tokens, coding standards, and best practices, enabling designers and developers to create cohesive and intuitive experiences. A design system acts as a living, evolving resource that adapts to the changing needs of a digital product, enabling efficient scalability and future growth for the entire organisation.

There are several well-known design system from large organisations that should be studied, analysed and inspired from:

And there are more...

Chapter 2 :: Understanding the necessity and ROI of a design system

Besides all the selling and pitching, when it comes to actually shipping a product, this becomes clear that Design systems are not a luxury or good-to-have for organisations but rather a necessity without which it transforms into a herculean task for everyone to build and deliver a viable product. Yes! It is that important.

What are the true goals of a design system?

Good question! By providing a centralised repository of design elements and guidelines, it becomes a necessity to ensure consistency and brand cohesion, efficiency and scalability, and improved collaboration and communication within your organisation. From a designer's perspective, it significantly reduces the time and effort involved in building a scalable product, while developers can seamlessly implement cohesive interfaces. Consistency breeds loyalty, and a design system is the key to unlocking that loyalty.

But what are the ROI of a design system?

Let's talk money for a second. Certainly, it is a designer and developer's job to be able to build a product fast. What returns of investment that brings to the high table? Excellent question!

First and foremost, a design system guarantees consistency. This consistency builds trust and brand recognition, in an ocean full of mediocre products.

Next, a design system unlocks a realm of efficiency and collaboration. Gone are the days of reinventing the wheel with each project. By establishing a centralised repository of reusable components, guidelines, and best practices, organisations can streamline their workflows and supercharge productivity. Designers and developers can focus on innovation, armed with a comprehensive toolkit that amplifies their creativity.

Lastly, a design system is a strategic investment that pays dividends in the long run. By reducing duplication of efforts and eliminating rework, we optimise our resources and cut unnecessary costs. This efficiency directly impacts our bottom line, leading to increased profitability. Additionally, a design system fosters collaboration and communication across teams, breaking down silos and nurturing a culture of innovation. Our collective efforts will be amplified, resulting in better products, improved customer satisfaction, and a stronger market position.

Too many jargons? Not convinced? Well, here is a simpler explanation:
Imagine your designers spend minimum half an hour every day contemplating on what was the colour of the secondary button outline? Was the assistive error text darker red? Was this design pattern used in the other product? (And no, we are not talking about graphical patterns. Different things.) If you pay minimum €40/hour, then for 5 designers, it costs you (2.5 hours/week x 52 weeks x €40 x 5 designers) €26.000 for contemplating.

Now imagine your developers spend minimum half an hour every day contemplating on where is the icon? Which documentation defines the error colour? Does it match the design? How many variants this button has?
If you pay minimum €50/hour, then for 10 developers, it costs you (2.5 hours/week x 52 weeks x €50 x 10 developers) €65.000 for contemplating.

A design system could save all that money. It also could save time, store design decisions and transfer design patterns seamlessly. 🔥

Numerous organisations and groups have run studies to understand how much really a design system is worth of. These following articles and studies explains it beautifully.

Should it be a product of its own?

Having such vast scope and effect on the main products definitely calls for it to be an internal product for the designers, developers, project managers and the stakeholders. By treating the design system as an integral part of your organisation, you unleash its full potential as a transformative tool for consistent, efficient, and user-centric product development. However, this approach may require a cultural shift and adequate resource allocation to overcome challenges and fully unleash the design system's potential within the organisation. The system can grow exponentially in size and capacity by establishing clear ownership and accountability, embracing a collaborative approach, and encouraging designers and developers to contribute and shape the system's growth.

Chapter 3 :: Ownership, accountability and growth of a design system

At the heart of a successful design system lies the authoritative role of designers, driving its creation and evolution. As the visionaries and custodians of user experience, designers play an important role in shaping the design system's effectiveness.

Who leads and owns the design system?

Designers take the lead in championing the design system initiative within the organisation. They advocate for its adoption, emphasising its potential benefits in enhancing consistency, efficiency, and collaboration across teams. By showcasing its value to stakeholders, designers secure the necessary support and resources for the system's development and maintenance. Designers also lay the groundwork by establishing clear and comprehensive design guidelines and principles within the system. These guidelines define the visual language, interaction patterns, and accessibility standards, ensuring a coherent and delightful user experience across all products. By setting these standards, designers provide a solid framework for developers to implement and ensure consistency throughout the development process.

Collaboration between designers and product managers is crucial throughout the process. Product managers provide insights and ensure alignment between the design system and the product's goals, while designers leverage their skills and experience to create a system that meets user needs. Design systems' project managers can help the designers by creating component roadmap, by gathering requirements of new and unique components from different teams, and by collecting insights from developers and other employees.

How does the designers ensure its growth?

The design system is a living entity that evolves alongside the organisations growth. Designers play a crucial role in continuously iterating and improving the system based on user feedback and changing needs. By staying aware of the user preferences and technological advancements, designers ensure that the design system remains relevant and effective, accommodating new design challenges and staying aligned with the latest industry trends.

The design system designers add new and unique components, expand documentations, audit design implementation for both developers and other designers, conduct design system workshops and refine the system to create a dynamic, advanced and an all-encompassing system.

Chapter 4 :: Types of design system models and governing bodies

Now we understand why a design system is important and what values it brings to the table. To comprehend the work goes behind creating one, we need to understand how it functions and how we can adopt or create one.

What are the different types of design systems?

There are several factors such as brand, design language and platform which influence how different teams and designers categorise design systems. Overall, there can be four types of design systems.

1. Modular or traditional design system:
   A modular design system is consisted of several design components such as buttons, cards, tables etc with guidelines tied to them, with no specific hierarchy. This is traditional form of design system.
2. Atomic design system:
   Atomic design system breaks down the component hierarchy into three basic levels: atoms, molecules and organism. Primitive components such as colours and typography build advanced components such as buttons and input fields which again come together to build more complex designs such as a card or table.
3. Headless design system:
   In a headless design system, the final component is decoupled from visual attributes and focuses more on the core elements and the relationships between the elements. It separates "design" or body from the visual representation or "head". For example, in this design system, a button component can only consist of shape and typography, so that the developers can assign specific contextual visual attributes to it such as colours and shadows.
4. Embedded design system:
   An embedded design system is a design system that is tightly integrated and built directly into a specific product or platform. Unlike a traditional design system, which is more modular and independent, an embedded design system is tailored to the unique needs and requirements of a particular product or service.
5. Integrated design system:
   An integrated design system is a comprehensive and cohesive approach to design that combines various elements of a design system with the broader aspects of a product or organisation. It goes beyond the traditional scope of a design system, encompassing not only design components and guidelines but also interactive patterns, motion principles, brand strategy, and even development tools.

How to approch adopting a design system?

There are generally three approaches to pursue a design system. Usually, it tends to get more time consuming and costly to implement a design system if the organisation has custom requirements that can not be met with open source design systems.

1. Adopt:
   Adopting an already existing open source design system is very low cost and offers very low level of customisation. But the design system depends on the core customisations and updates from the original creators. This is a viable approach if the organisation is just starting, prone to deliver MVPs only and does not require any customisation.
2. Adapt:
   In this second method, organisations adapts an already existing design system by borrowing the foundations such as base components from it and then building and customising over it. This takes certain time to set up but offers the organisation more independency over its design.
3. Create:
   If the organisation is looking forward a certain design language, brand perception or has a targeted audience, it is required to have a custom design system which caters to the specific need, value, practices and brand perception of the product. A custom design system is the most time consuming, and costly and also most unique, but in the long run, the return of investment is higher for the organisations as it fosters consistency of the uniqueness.

Amidst all of these approaches, the most difficult task is to implement or transform an already existing design system to a new one or updated one that has been integrated into several products. It gets even more difficult if the organisation has a followed a decentralised design language from the beginning and requires to update or implement a design system.

How to govern a design system?

Once the organisations are sure which type of design system they want to use, it is time for deciding who will be managing the behemoth of that design system and how. Generally there are six types of governing models for a design system.

1. Centralised Governance:
   In this model, a centralised team, often led by a dedicated Design System Manager or DesignOps lead, is responsible for the design system's overall management. This team oversees updates, version control, and ensures compliance with established design guidelines. Centralised governance ensures consistency but may face challenges in scalability and incorporating diverse inputs.
2. Decentralised Governance:
   Decentralised governance distributes ownership and responsibility for the design system across various teams or departments. Each team manages its specific components or areas of the system, fostering flexibility and responsiveness to local needs. However, ensuring consistent implementation and alignment across the organisation may be more challenging in this model.
3. Federated governance:
   The federated governance model strikes a balance between centralised and decentralised approaches. It involves a central design system team responsible for defining core design principles and guidelines. However, individual teams are given some autonomy to customise certain components or elements to suit their unique requirements.
4. Community-Driven Governance:
   In this model, the design system is maintained and evolved by contributions from a community of designers, developers, and other stakeholders within the organisation. This open approach encourages collaboration, innovation, and rapid improvement, but it requires active community engagement and moderation.
5. Product-Led Governance:
   A product manager may lead the governance of the design system, ensuring alignment with product development goals and business objectives. This model can be effective in integrating the design system with the overall product strategy, but it requires a strong understanding of both design and product management principles.
6. Authoritarian Governance:
   Although more common in early stage startups, an authoritarian design system is rather a rare sight for organisations. It is a design system where decision-making authority and control are concentrated in a single individual specially the founding designer. In this model, the design system's rules, guidelines, and components are dictated and enforced by the designated authority, leaving little room for input or collaboration from other team members.

Below is an interesting article discussing how to manage and govern design systems.

Chapter 5 :: Steps of creating a design system

So now we know what is a design system, what are its purposes and who manages it. So we are ready to figure out how to create a design a system. The process of creating a design system typically involves several key steps, each contributing to its development and effectiveness. While the exact steps may vary based on the organisations needs and resources, it is safe to say that the majority of them follow the below steps.

1. Research and Discovery:
   The first step to begin is conducting research to understand existing user base, user needs, business goals, and existing design assets. In parallel, also need to gather feedback from designers, developers, and stakeholders to identify pain points and areas that require improvement.
2. Visual Aduit:
   The next step is to perform a visual audit with all the associated designers in all products to find out what are the areas, components and patterns the design system can encompass, what is working and what is failing, what is driving efficiency and which ones are not aligning.
3. Design Principles:
   Next, as the data of the research and audit flows in, they needs to be analysed and defined into clear approachable goals. This is the step where the designers need to conduct workshops within the team to align on the design principles and the design language they are going to follow, and take feedback of non-designer teammates and the stakeholders. This step also decides the type and the governing body of the design system.
4. Creation:
   This is the fun part! But also the most stressful part for the designers. The designers need to break down all the components to their basic elements and start building or adapting on top of them. Not to mention, they also have to think of and create all the required variants and use cases of each components which takes months to fully complete. Development tokens are also created in this phase simultaneously. It also pays off in the future, if the components are tested in the creation phase in smaller or internal products to gather feedback and test usability.
5. Documentation:
   Once the design system takes shape somewhat, it is time to document all the guidelines and usage patterns including how a component is created, what purpose it solves, which variants are usable for which context, best practices and it should behave. This requires dedicated time and active involvement from the core design-system designers.
6. Building codebase:
   As soon as the required guidelines and design patterns documentations are in place, the developers need to come to the centre stage and study these patterns and guides to create the components in their repository which looks and acts exactly as intended in design, all the while maintaining the referable tokens as is. It is advisable for the designers to collaborate and communicate with the developers in the creation phase to build feasible components and implement feasible tokens to them.
7. Design-Code Auditing:
   After the developers are done with building the codebase for the design system, the ball is passed to designers again to do a scrutinising audit to find mistakes, inconsistencies and bugs. As soon as those are solved, the design system is ready to be implemented.
8. Implementations:
   At this stage, the developers along with their system architects, implements the new design system in the product(s). It can take several weeks to do so and developers often choose to do it in parallel branch, so that there are no chance of breaking a stable product.
9. Govern and Maintain:
   A design system is never complete. Once it is implemented, it is the designers' responsibility to audit the new designs and product features to see whether they are using the design system correctly or not, conduct workshops and tutorials for junior designers, gather requirements for new and unique high-level components and create them, all the while maintaining communication with development and other teams to ensure smooth workflow, efficiency and to gather feedback.

Chapter 6 :: Introducing WDS, the wholesome design system

WDS or Wholesome Design System was born with a vision of a genuine desire to create a simple, portable, and semantic repository that unleashes the potential to craft remarkable products effortlessly! At its core, WDS comprises a thoughtfully curated collection of components, tokens, rules, and guides, meticulously designed to elevate and streamline the process of creating exceptional digital products.

The idea of WDS originated from my own struggles as a designer. I often found myself reinventing the wheel, recreating similar components and grappling with inconsistencies in my designs. Realising that this process was not only time-consuming but also hindered creativity, I was compelled to take action. I yearned for a design system that not only streamlines the design process but also fosters collaboration and inclusivity among teams.

Thus, WDS was born, guided by the principles of simplicity, versatility, and user-centricity. I believed that by creating a design system with clear guidelines and reusable components, designers and developers could focus on what truly matters—the user experience. With WDS, I sought to empower the design community and bridge the gap between designers and developers, fostering a culture of seamless collaboration.

Let's be upfront and honest — WDS does not make unrealistic promises of solving all imaginable design problems or magically creating digital products without effort. Building a design system requires expertise, time, and reasonable investment. What WDS offers is a great starting point with a set of robust components and guidelines that one can start building upon.

FIGMA DESIGN SYSTEM

Wholesome Design System :: Foundations

FIGMA DESIGN SYSTEM

Wholesome Design System :: Components

Features of WDS

1. Atomic model:
   WDS is an atomic design system which is the most comprehendible type of design system for creating cohesive interface and experience. It reduces component complexity and ensures multilayered, robust design system which can be modified at any level.
2. Design language:
   The design language of WDS embraces a warm and inviting approach, aiming to create a friendly and approachable user experience. By incorporating rounded corners and higher elevations, it ensures a softer demeanour that fosters a sense of comfort and familiarity. These design elements have been carefully chosen to evoke a feeling of ease and inclusivity, inviting users to engage with the product in a more relaxed and enjoyable manner. The rounded corners soften the overall aesthetic, reducing sharp edges that may convey a harsh or rigid impression. Meanwhile, the higher elevations provide a subtle depth and dimension, adding a touch of visual interest without overwhelming the user.
3. 4px Grid system:
   In WDS, I have made a deliberate decision to adopt a 4px grid system, as it offers superior flexibility and agility compared to an 8px grid. With a 4px grid, designers have finer control over layout and spacing, allowing for more precise adjustments and accommodating a wider range of design elements.
4. Tokens:
   WDS also uses 400+ design tokens in all of its components which are visual representation of storing semantic design decisions such as colours, sizes, radius, padding etc. into reusable data which acts as a bridge between design and engineering, detailing what and how to use to build dynamic and comprehensive interface.
5. Independence:
   The foundational elements of WDS are separated from the complex components. It gives superior flexibility and independence to use the foundational elements outside of the intended Tier-1, 2 and Tier-3 components. This also gives the option to customise the design system, both foundations and components at ease assuring diverse interfaces.

WDS Features

Atoms and fragments

WDS is an atomic design system. As we learnt before, it means that the components of WDS were stripped down in to smallest possible elements which are independent of each other. Based on those elements, we built larger components which are dependant on the basic elements or each other. Just like atoms make molecules and molecules make organisms.

Further more, WDS is divided in two fragments — Foundations and Components. The independent atomic visual elements such as colours, typography, icons, layout etc have been separated from their more complex heirs, so that these elements can be applied to any variations and are not limited to WDS components. I call the group the foundations. On the other hand, WDS components being higher level organisms, depend highly on the foundational elements and it will take rather drastic (not impossible) approach to separate them from the foundations. It will be like a sort of alchemy: disintegrating a matter to use its atoms to create another matter. But we are not performing alchemy today. ✨🚫

In simple words, WDS is consisted of two fragments: The foundations, which is a library of basic foundational elements such as colours, typography, icons, elevations, layouts etc. We will refer to them as Tier-0 from now on.

And the second fragment is the components, which is a library of more complex elements such as buttons and cards etc. We will refer these components as Tier-1, Tier-2 and Tier-3 based on the context.

Design language

WDS adopted a semi-round, soft edged, soft shadowed visuality instead of sharp unwelcoming shapes or fully round over-friendly approach.

Semi rounded components offer more active area for clicking, alignment and consistency in design by settling in the grid, and offers balance between sharpness of sharp buttons and the softness of rounded buttons.

Fully rounded components might create the perception of a larger active area, potentially leading to slight confusion about the clickable region. Semi-rounded corners can provide clearer visual boundaries, indicating precisely where the button's clickable area ends.

Find some great articles on this topic below.

Layers and Tiers

Tier-0 elements are true foundational elements which are not dependant on any other elements at all and can exist alone. They are colours, Typography, Icons, Spacings, Layouts, and Elevations.

Tier-1 elements are consisted of purely Tier-0 elements. For example, a button is a Tier-1 element which is built upon Colour, typography, Spacings, Icon and Elevation. Similarly, selection toggles, chips, badges, tooltips etc are Tier-1 elements.

Tier-2 elements are consisted of a mixture of Tier-0 and Tier-1 elements. For example, a text field or a split button is made of colour, typography, elevation, icons, and buttons.

Tier-3 elements are consisted of a mixture of mainly Tier-1 and Tier-2 elements. For example, a popup modal or side-sheet modal is consisted of buttons, input text fields and various other elements, which are Tier-1 and Tier-2. Tier-3 usually consists of majority of the complex components.

Tier-4 elements are basically unique use case where the entire design system is applied to create specific design solutions. For example a a sign-in modal which varies from organisation to organisation and is created using the all other tiers. Once designed, the modal becomes a unique component for the organisation that can be used and reused.

Tokens and values

Tokens are named after the Tier-0 elements and are used to build and maintain design system components such as colours, typography and elevations. They can represent anything that has a definition such as a colour can be a RGB or HSL value, while a spacing can be a numerical value, and shadows can be combination of both RGB and numbers.

Tokens are categorised in Raw value, Global value and Alias value. For example, a specific shade of colour blue can be represented by an Hex value such as #2352D7 which is its Raw value. This hex code can be named as color/blue-1, which is simply saying this hex code represents the strength 1 of the blue colour in the design system. This is Global value. Now this Global value can be used as background of a button or as the outline of a focused input field. Although the background and outline contexts are different, they are still referring to the same global value. These contexts are called Alias value. Now, at any point, if we feel like changing the blue colour to something else, we can make change to the raw value and the global value along with the alias value will automatically be updated.

Design Token Architecture

Adobe describes the tokens in more comprehensive details in their design system.

Any design token can be created with aliases that are understandable to the design system maintainers. However, the naming convention can be obscure and very abstract for other designers. For example, instead of naming radius tokens according to t-shirt sizes such as radius-sm, radius-md etc, it is more accessible to name them as radius-4, radius-8. This was the user of the design system can clearly and intuitively understand what number this token represents. It is also advisable to update the alias names once a design token value gets changed.

Tokens used in construction of input field component

Chapter 7 :: Outlining the foundations of the wholesome design system

WDS is a system that is constantly improving. Here we will talk about the ideas that went behind the foundational elements while building this design system. The detailed documentations for all the available component is available and being update regularly.

Colours

WDS design system has swatches of two brand colours, 4 semantic colours and neutral colour. These colours were chosen based on the HSL manipulation algorithm to generate lighter and darker shades of certain base colours.

HSL (Hue, Saturation, Lightness) manipulation holds several advantages over linear interpolation (LERP) when generating colour shades. By adjusting the lightness while preserving the hue and saturation, HSL manipulation retains colour vibrancy and consistency throughout the darkening or lightening process. This results in visually pleasing and more natural colour variations, making it ideal for design systems, user interfaces, and products where colour aesthetics and accessibility are crucial considerations. HSL manipulation provides intuitive control, ensures constant colour relationships, and helps maintain sufficient contrast for accessibility.

However, in procedural content generation, where colours are algorithmically generated, LERP can be a simple and effective method to create variations in colour shades without the need for complex colour space conversions.

Every colour swatch in WDS, except for the neutral swatch, has 10 values. The base value is 0, and based on it, we have 7 lighter shades and 2 darker shades. The lighter shades are represented with negative numbers and darker shades are represented with positive numbers. For example, Blue 0 is a the base colour which has 7 lighter shades — Blue -10, Blue -20... to Blue -70. And on the positive side, it has two darker shades — Blue +10 and Blue +20. The relationship between these 10 values is defined throughout the whole design system.

The relationship between these 10 values are defined throughout the design system. -70 is always used a background colour of the surface i.e. the product's main background. -60 is the colour of any container (background of an element) such as chips, tags, badges, card etc. -50 is the hover colour of -60 and -40 is the selected or focused colour of -60. Similarly, -30 is the colour of border, -20 is hover colour of the border. -10 is the hover colour of the base colour 0. And +10 is always the text colour on the containers. +20 is a high contrast text colour option for the containers.

Semantic use of WDS colours

The neutral swatch is used in various more instances and even for dark themes, hence it requires more lighter and darker shades. But the relationship between the shades are generally maintained in neutral swatch as well.

Typography

Closed source digital products are built and developed usually behind paywalls, if not always. These products or applications seldomly need the semantic HTML header tags which the web-crawlers use to rank websites. On the other hand, the applications have so much more than hierarchical texts to make use of these semantic tags. Digital applications have lot more smaller body texts than six heading types. In design, it is getting more appropriate to use more contextual nomenclature for texts rather than the traditional semantics while preserving the hierarchy. For example, Apple uses unique naming for their text hierarchy in Human Interface Guidelines such as Large Title, Title, Heading, Body etc.

Similarly, WDS, uses a more contextual approach towards typography. In WDS, the texts are categorised based on their usage on different breakpoints such as large screen, desktops and mobiles.

To achieve this, WDS used a modular responsive type scale where the relation between two typesets always stay the same. So when root font value is changed based on breakpoints, the  other rem values continue the same ratio between them.

Below are some in-depth informative articles to understand Modular type scales.

Typographic hierarchy is a collection of font sizes that are in visual harmony among each other. This harmony is achieved by maintaining a scale, just like musical scales. There are several scales that offer different benefits such higher or lower contrasts between the font sizes. WDS uses Major-Second scale (1.125) which as a lower ratio scale is ideal for the digital products, dashboards etc where font sizes nearing the body font is required and large display sizes are not necessary.

The typographic scale uses a base of 18px for desktops, 16px for mobiles and 20.25px for larger screens. The root-font size may change in different breakpoints, but the ratio and the rem value between the sizes remain consistent.

Additionally, the root value can be set in clamp function so that it automatically changes based on different breakpoints.

For text heavy products such as websites or apps dedicated to reading, it is advisable to set high-contrast type scales for different breakpoints as the users will benefit from having larger font-size and line height on mobile screen, which increases legibility.

WDS categorises the type scale as Display text for data visualisation, Product title, Page heading, Module heading, Body main, Body alt or description, Caption and Footer.

WDS Typography in major-second scale

The typographic scale has been set using “Inter” which a typeface carefully crafted and designed for computer screens by Rasmus Andersson. Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Inter is a free and open source font family.

Icons

WDS is an open source, friendly and human focused design system. To achieve that personal feelings with the users, WDS needed an iconography that mirrors its core values.

WDS adopted Tabler Icon library which consists of more than 4600+ icons and is licensed under MIT. Tabler has easily available React and VueJS packages available making it easier for the developers to accurately find and implement the right icons.

WDS only used a basic set of icons that were essential for creating the design system. However, it is advisable to adopt the entire Tabler icon library to expand the repository as required. Alternatively, any other open source icon library can also be used if the organisations have different needs.

Spacings and Sizes

WDS also tokenises various sizes, spacings, radii, and paddings so that these values can be recalled easily and accurately.

Radii help to soften sharp edges, create a pleasing aesthetic, enhance the overall user experience by conveying a sense of friendliness and visual comfort, and contribute to a cohesive and inviting user interface.

Padding around elements improves readability, usability, and touch targets, ensuring comfortable interaction.

Use of gaps between elements helps organise content, create breathing room, and guide users' focus, resulting in a clean and well-structured design that enhances the user experience.

Elevations

WDS also ensures that every element maintain their appropriate hierarchy and visual elevations so that the product feels more physical to the user and less digital.
The elevations are categorised as standard elevations, direction specific elevations and button elevations.

Standard elevations help majority of the components to establish vertical hierarchy, where direction specific elevations are more suited for specific modals such as side sheet or  navigation drawers. Button elevations are unique and exclusive to buttons because as the most clicked component in an application, they require different elevation and effect treatment.

The Component counterpart of WDS :: Foundations comprises of over 30+ components and 2000+ variants which uses these foundational elements at its core and are able to create human-centric, aesthetically pleasing and friendly user interface boosting elevated experience for any digital products.

Chapter 8 :: Challenges of a design system

Design systems, while immensely beneficial, can also present various challenges during their development and implementation. Some common challenges of design systems include:

1. Resource Intensive:
   Building and maintaining a design system requires significant time, effort, and resources. Organisations must allocate dedicated teams and budget to ensure its successful development and continuous evolution.
2. Adoption and Buy-In:
   Convincing stakeholders and teams to adopt the design system can be challenging. Resistance to change or a lack of understanding about its benefits may hinder its widespread adoption.
3. Customisation:
   Often corporations and clients express demand customisable design for the products they are buying from SaaS companies to fit their branding which becomes a crucial challenge for the SaaS companies as they have to cater to several customers with their products and customising it based on every client's whim may easily become a nightmare. Unless, a design system is being used for in-house products, customisability is a huge roadblock for any design systems. Only very few advanced and gigantic design systems such as Google's Material Design System can handle such customisability.
4. Maintenance and updates:
   Design systems require continuous maintenance and updates to remain relevant and effective. Failing to keep it up to date can result in outdated or irrelevant design elements.
5. User feedback and iteration:
   Gathering user feedback and iterating based on it can be time-consuming, but it is essential to ensure that the design system resonates with users' needs and preferences.
6. Skill and knowledge Gap:
   Designers and developers may require training and guidance to effectively use the design system. Bridging the skill and knowledge gap is essential for seamless adoption.
7. Absence of product roadmap and project management:
   Developing a design system without a clear product roadmap can lead to ambiguity and confusion regarding the system's goals, priorities, and future direction. Without effective project management practices, timelines may be extended, tasks might be overlooked, and coordination between teams could suffer, ultimately hindering the design system's effectiveness and adoption.
8. Legacy systems integration:
   Many companies have existing legacy systems, which are older software applications or platforms that have been in use for an extended period. Integrating a design system with these legacy systems can be particularly complex due to differences in technology, design conventions, and user interfaces. The integration process may also reveal inefficiencies or limitations in the legacy systems that need to be addressed. This can lead to additional development efforts to modernise and optimise the existing systems to align with the design system's standards.

Chapter 9 :: Conclusion

In conclusion, the Wholesome Design System stands as a testament to my commitment to creating a simple, portable, and user-centric design repository. By embracing the vision of simplicity, portability, and ease of use, WDS provides a solid starting ground for crafting remarkable digital products. While not claiming to solve every design problem or offer effortless solutions, WDS offers a valuable foundation with robust components and guidelines, empowering designers and developers to build upon and create unique, user-centric solutions.

WDS is now entering an exciting phase of documentation. This documentation will serve as a valuable resource for other designers and developers offering clear guidelines, best practices, and insights into the system's components and principles.
As I embark on this design journey, let us embrace WDS as a trusted companion, empowering us to create amazing things and forge lasting connections with the users.