The Power of Systematic Digital Design
Bachelor Thesis 2025Visual Communication and Digital Spaces BAInstitute Digital Communication Environments
AuthorYoana Tacheva
MentorDr. Invar-Torre Hollaus
Abstract
Designers face new challenges in the digital age. Exponential technological innovation and increasing online consumption have made digital spaces a dominant medium for visual communication. Designers are no longer limited to fixed physical formats. Today, they are challenged to design across various devices with different characteristics, screen sizes, and platforms. This thesis explores digital design systems as an approach to solving these challenges. Modular and rule-based methods developed before the digital era are now fundamental concepts of modern digital design and cutting-edge design frameworks. To support the research with practical insight, the thesis defines a digital design system called Nexa, developed as part of the practical thesis and applied in the design project. It further connects this definition to a well-established methodology offering an alternative perspective and enhancing conceptual clarity. While the research provides a critical overview of digital design systems and their power to create visual languages, it also discusses the evolving roles and opportunities for visual communicators today.
Keywords: systematic digital design, visual messages, responsive design, consistent design, reusable components, grid system, rulebased design, modularity, digital era, frameworks, design systems
Table of Contents
1. Introduction
1.1 Motivation
2. The Birth of Systematic Design
2.1. Typeface Design
2.2. The Role of The Grid
2.3. Designing Programmes
3. Systematic Digital Design
3.1. Digital Design Systems
3.1.1. Layout Structure
3.1.2. Reusable Components
3.1.3. Rules
3.1.4. Summary
3.2. Atomic Design
3.2.1. Atoms
3.2.2. Molecules
3.2.3. Organisms
3.2.4. Summary
4. Conclusion
5. Appendix
5.1 List of References
5.2 List of Digital Sources
5.3 List of Figures
5.4 List of Aids
1. Introduction
Throughout history, designers have strived to create consistent visuals that clearly define an idea, a movement, or a brand, establishing recognition and delivering a visual message. Over the years, they have studied and searched for effective methods to create impactful and, at the same time, long-lasting designs. The digital era has brought new challenges for visual communicators. In recent years, traditional, in-person services and face-to-face interactions have transformed into digital products and experiences. Booking a doctor’s appointment has become possible through a mobile application; shopping has shifted into online purchases; taking a language course has been transformed into an interactive experience; meeting colleagues at work has turned into a virtual video conference. The new circumstances require the creation of recognizable visual identities and intuitive, user-friendly interfaces.
Although this fundamental shift started years ago, the COVID-19 pandemic has accelerated the advance of new technologies, with government restrictions leading to a sharp increase in the usage of online services. Therefore, the strict measures have affected many areas. Society and businesses urgently had to adapt their communication models to the new and unexpected circumstances the pandemic brought (Amankwah-Amoah et al., 2021, p.602). The rapid pace of technological progress is happening faster than ever before. Advancements shaped a digital divide between technologically proficient design studios and those resistant to adapting due to a lack of expertise and flexibility, putting them at high risk of falling behind more agile competitors (Burger & Weinmann, 2024, pp.3-4).
The exponential technological innovations and COVID-19 restrictions led to the unprecedented scale of online media consumption (Tarun et al., 2020, p.107). Therefore, visual messages have significantly expanded their medium. They are required to be adaptive and respond to the constantly changing technology. Digital transformation affected many, especially those responsible for creating these visual messages. The designers’ work is more critical than ever. Visual communicators have the challenging mission to respond to the new circumstances as their work becomes a key factor in the digital economy. In this new setting, they face multiple challenges.
The growing variety of new devices with diverse characteristics, screen sizes, and resolutions requires the designer to make very well-thought-out, creative decisions, ensuring responsive and adaptive design. Years ago, mobile phones were known as small handheld devices with limited screen sizes and abilities. However, today, they serve as an extension to people’s lives, performing increasingly complicated tasks. Smartphones and tablets are becoming more powerful and often distinctively designed with new releases. Additionally, desktop computers expand to a wide range of display sizes, bringing another level of complexity. Years ago, designers worked within the constraints of a single, fixed format. Today, visual communicators must ensure a seamless experience across various screens and devices. Scott McCloud, an author and expert on comics, refers to this concept as the infinite canvas. He suggests that any device is simply a window displaying a portion of a much broader world, encouraging creatives to think on a larger scale rather than limiting themselves to a fixed format (Kenna, 2012, p.88). In the constantly growing competition for people’s attention, visual messages may be easily overlooked if not communicated effectively. The fast turnover of content in modern media further emphasizes the need for consistent, highly recognizable visual messages while also requiring constant presence and engagement to remain relevant. These challenges, combined with the demands to support highly diverse mediums, make it necessary for visual communicators and design studios to establish a digital design system workflow and shared visual language. Otherwise, they risk inconsistencies and could struggle to meet users’ increasingly high expectations.
However, upon a thorough look into the problem, the answer to the current issues may be deeply rooted in the design history. Although the digital transformation introduces a new phenomenon, notable designers have studied and developed systematic approaches crucial for digital designers today. Contemporary design draws from modular, component, and rule-based methods that have long shaped visual communication and are now fundamental to modern digital design and cutting-edge design frameworks. Graphic designers developed systems to create consistent while engaging visual outcomes. Similarly, popular web design frameworks rely on modular components that can be easily combined and maintained to create flexible designs quickly while staying consistent and aligning with the developed system.
This thesis focuses on systematic digital design as a problem-solving tool for the current issues the digital era introduces.
1.1. Motivation
The motivation for this topic evolves from personal experience and design process. It is inspired by the strong curiosity to search for underlying principles and solutions that can help designers in today’s challenging creative landscape. The systematic approach opens numerous possibilities and helps overcome visual and technical challenges. Today, designers are not just visual creators. They are architects of design systems, shaping how we interact in the digital infinite space. Given the topic’s future importance and ongoing research, the thesis is dedicated to visual communicators facing increasingly complex tasks and people interested in the foundations of contemporary digital design.
2. The Birth of Systematic Design
The increasingly complex tasks contemporary designers face today are a recent phenomenon, bringing new challenges to the design workflow. Looking back at history, prominent artists and designers have established fundamental principles that may have a crucial problem-solving application in today’s digital era. To what extent is the modern digital designer building upon these foundations, and how can they be further developed to address today’s design issues?
Modularity is a unifying concept in different fields, such as biology, physics, psychology, economics, and mathematics. In the context of art and design, it occurs when several basic units, known as modules, are combined to create diverse and consistent modular structures (Jablan, 2005, p.259). It is a conceptual framework representing the search for and development of repeated elements, aiming to create a larger whole (Mooney, 2014, p.6). One of the earliest uses of this concept traces back to Paleolithic and Neolithic ornamental art, which dates several thousand years before ancient civilizations (Figure 01). It represents one of the oldest records of human attempts to understand and express repeated identical elements, an underlying basis of any knowledge, and a design principle in visual communication until today (Jablan, 2000, pp.1-2). Modularity demonstrates humanity’s inherent desire for control and understanding of the process and the final product.
The drive of modularity yields systematic approaches in many aspects and fields. Systems often find a place in the creative landscape, including typeface design.
Figure 01Black and white ornaments composed from a single element. One of the first modular elements. Ornaments on the right are obtained by overlapping of the basic ornaments on the left.
2.1. Typeface Design
Modularity is a systematic and reductionist method for creating systems and constraints in typeface design. Historically, this method was crucial for enhancing the efficiency of type production for early printing machines by breaking down letterforms into reusable components, or “kits of parts,” which allowed craftsmen to accelerate the mechanical manufacturing process (Mooney, 2014, pp.4-7). For instance, tools like the counterpunch (Figure 02) helped in the consistent creation of internal shapes, known as counters, in multiple letters (such as the holes in “o” or “p”), accelerating the overall production of the alphabet (Smeijers, 1996, p.76).
Figure 02Steps in cutting a punch using a counterpunch.
Type designers made creative decisions based on certain chosen constraints while developing new typefaces. These constraints aimed to point out the essence within type systems. However, this was not just a matter of efficiency; it also became a trend in historical revolutionary movements such as the Bauhaus, promoting universalism, abstraction, and geometric forms. Herbert Bayer, one of the most prominent designers of Bauhaus, developed the Universal Alphabet (Figure 03), a lowercase-only sans serif typeface, to combine aesthetics with functionality by reducing it to its standardized geometric lines and curves. Bayer’s rationalization of the letter “a” (Figure 04) employs a reduction method to remove details in the letter to emphasize its essence (Mooney, 2014, p.5). This example points out that the reduction allows the designer to apply rules and parameters to control the systematization and variability of creating new letters.
Figure 03Typographic exploration by Herbert Bayer, displaying the Universal typeface, a key example of Bauhaus principles.
Figure 04Herbert Bayer's rationalization of the letter "a". Insight into his design process.
Josef Albers, a notable designer in the Bauhaus movement, created the lettering system Kombinationsschrift (Figure 05). It demonstrates a modular arrangement of letterforms composed of repetitive use of predefined elements. While a typical lettering alphabet contains at least seventy-two unique characters, Albers’ system allows the creation of all letterforms using only ten basic geometric shapes. Designed to apply to materials such as glass and metal, constructing all letters with a limited set of shapes minimized production costs, simplified maintenance, and reduced material challenges (Albers, 2014, p.316). Josef Albers applies newly developed laws that serve his vision and creativity, ensuring efficiency. The system helps the designer overcome challenges while innovatively keeping foundational principles.
Figure 05Typeface Kombinationsschrift by Josef Albers.
The examples above show systems as a problem-solving method. Design issues are approached systematically and broken into parts to ensure a solution in all aspects, from the process to the production. Although the final visual product may appear seamless and complete, the designer’s underlying “invisible rules” deconstruct the letters into individual components.
2.2. The Role of The Grid
The grid system defines the hidden laws that shape the structure of a beautifully designed composition, bringing the designer’s vision to life in a creatively informed way. Williamson describes the grid as representing the structural rules and principles guiding the visual outcome and portraying the designer’s rational thinking process (Williamson, 1986, p.20).
The Swiss graphic designers expanded the application of the mathematically drawn grid. They developed it to perfection without changing its essential use as an instrument for rationally structuring and communicating information. Josef Muller-Brockmann, a pioneer of Swiss design, introduced the grid system as a design tool for creating a variety of compositions with consistency and as a guide for the designer to handle visual problems and find aesthetically pleasing solutions systematically (Muller-Brockmann, 1999, pp.10-13). The grid does not aim to limit the design work within a fixed, constrained canvas, as each visual outcome showcases the designer’s personal vision, expression, and knowledge in addressing creative challenges. The underlying invisible matrix aims to serve as a helping tool, ensuring cohesive design decisions rather than restricting creativity (Figures 06 and 07).
Figure 06Poster by Josef Müller-Brockmann.
Figure 07Poster by Josef Müller-Brockmann.
Well-known designers such as Wolfgang Weingart often exposed the invisible logic behind the composition and used it as a creative element. His work (Figure 08) demonstrates a new look at the grid, viewing it not as an invisible law but as a playful visual element that is part of the design composition (Williamson, 1986, p.24).
Figure 08Poster by Wolfgang Weingart.
Nevertheless, Brockmann introduced the grid as an instrument of the designer that helps in the critical mission of promoting a professional aesthetic. He believed that information presented clearly and logically, including texts, subtitles, imagery, and captions, would be perceived correctly and quickly remembered by the viewer (Muller-Brockmann, 1999, p.13). In this way, the grid system becomes especially valuable for creating a wide range of formats, such as books, poster series, magazines, and visual identities, involving many elements under the designer’s control.
2.3. Designing Programmes
Prominent designers introduced systematic approaches to their design process during the 1960s (Kenna, 2012, p.122). Karl Gerstner was a strong proponent of using systems in graphic design. Gerstner was one of the first to exploit grids and create them with unmatched complexity, allowing flexible design decisions within a system. He defined the grid as a program setting parameters through columns, gutters, and margins to generate creative layouts that maintain consistency between the various elements (Kulba, n.d.). As the grid grows in complexity, Gerstner suggested the designer should strive to maintain a balance between having a maximum number of rules ensuring structure and having significant possibilities for flexible, creative expression (Gerstner, 1964). Grids can lead to monotonous and homogenous layouts if the designer is not playful enough, turning creativity into a basic act of placing elements.
In 1962, Gerstner designed a magazine called Capital (Figure 09) to put complex economic concepts into an understandable human perspective. His design mission was crucial in clearly conveying complex ideas in an engaging way. Gerstner developed a complex grid system that was flexible enough to create different and consistent layouts (Kulba, n.d., p.3). At first glance in Figure 10, the grid appears very complex and challenging to understand. The example suggests that while a grid system can universally apply to various issues, the designer’s critical role is creatively addressing these problems to develop flexible rather than repetitive design compositions.
Figure 09Magazine Capital by Karl Gerstner. Variations within grid layers.
Figure 10Grid for magazine Capital by Karl Gerstner.
Gerstner formulated a programmatic method that redefined design work as building, selecting, and recombining parameters. He theorized design as a programming algorithmic set of rules to solve visual problems by making informed decisions rather than following intuition (Gerstner, 1964). This approach does not mean that every problem can be solved the same way, as every design issue is entirely different, making design a challenging intellectual and creative work. The systematic approach helps address challenges in a structured way while opening a creative space for consistent experimentation if the designer is innovative enough.
The Morphological Typogram by Gerstner is a system that allows designers to produce different design variations systematically. It aims to illustrate the creative process as defining and choosing parameters that can be consciously combined and further developed. For instance, in Figure 11, the typeface is broken down into “Sans-serif,” “Roman,” “German,” “Some other,” and “Combined” (Gerstner, 1964, p.9). By generating variations with this program, the designer makes decisions based on clearly defined parameters instead of random choices. Even while experimenting, the designer works within a framework to develop the best solution for each unique case. Gerstner used the typogram to design the wordmark Intermöbel (Figures 12 and 13). The final solution uses the following combination: a-11, 21, 33; b-14, 22; c-12, 22, 33, 41; d-11, 22, 31, 43 (Gerstner, 1964, p.10). The approach may initially seem overly conservative and misaligned with the design process. However, the program’s strength allows for the development of a wide range of systematic combinations. This keeps the designer from randomly thinking of possibilities that may not be close to the solution of the design problem (Kulba, n.d., p.3).
Figure 11Morphological Typogram by Karl Gerstner.
Figure 12Wordmark Intermöbel by Karl Gerstner created with the Morphological Typogram.
Figure 13The solution for wordmark Intermöbel by Karl Gerstner.
Applying a systematic method channels creative energy in a way that effectively addresses design challenges and helps create a cohesive visual language. Karl Gerstner introduced programs into the design process to encourage designers to invest creativity and rationality in establishing a defined design foundation, resulting in an efficient and structured design workflow. The systematic approach represents a shift in the designer’s work, allowing creativity to be invested in defining a system. This system enables the creation of individual elements in a highly efficient and algorithmic way. The designer works more on a conceptual level instead of focusing on particular elements. Gerstner’s systematic approach closely resembled the set of operations the programs and algorithms a computer could execute, even though computing technology was still in its early stages and unable to produce visual output.
His systematic approach resembles the creation of the first manuals and set of guidelines that corporations developed to maintain consistency across diverse design elements. One of the most iconic examples is NASA’s Standards Manual from 1976 (Figures 14 and 15), a comprehensive guide providing a detailed, consistent use of typography, color, and visual language of NASA’s identity in multiple printed formats (NASA, 1976). Similarly, the New York City Transit Authority Graphics Standards Manual (Figures 16-19) was foundational to unifying the visual system across signs, maps, and other analog materials (New York City Transit Authority, 1970). Back then, designers focused on how identities would appear in analog formats—physical items like signs, envelopes, and forms. However, the digital era brings new difficulties for visual communicators.
Figure 14NASA's Standards Manual by Richard Danne and Bruce Blackburn from 1976.
Figure 15NASA's Standards Manual by Richard Danne and Bruce Blackburn from 1976.
Figure 16New York City Transit Authority Graphics Standards Manual by Massimo Vignelli and Bob Noorda.
Figure 17New York City Transit Authority Graphics Standards Manual by Massimo Vignelli and Bob Noorda.
Figure 18New York City Transit Authority Graphics Standards Manual by Massimo Vignelli and Bob Noorda.
Figure 19New York City Transit Authority Graphics Standards Manual by Massimo Vignelli and Bob Noorda.
3. Systematic Digital Design
With the fast-paced transformation into the digital space marked by technological advances and increasingly high online consumption, designers’ challenges have evolved drastically. Today, designers must also consider how visual identities translate into digital platforms such as apps, websites, and interactive design experiences, further increasing complexity (Werle, 2021, p.24).
This shift is reflected in the transition of the term “page,” which was once defined as a fixed format in printed media but is now a fluid, interactive web page on the World Wide Web, invented by Tim Berners-Lee (Berners-Lee, 1989). Brad Frost suggested that the term “page” remain as it provides users with a familiar language while navigating the web. This similarity helped them master the new medium using conventions they were already comfortable with (Frost, 2016, p.9). Through the years and technological development, the page evolved into a constantly changing, dynamic medium and infinite canvas. On one side, it brings freedom of creative expression and possibilities, but on the other, it creates new difficulties for those responsible for shaping the digital world.
While technological progress has introduced complexities into the design workflow, computers can significantly enhance and accelerate the creative process. An analogy for the systematic approach is the first car production lines. Ford revolutionized the auto industry by breaking the automobile into components and creating a streamlined, modularized assembly process. This resulted in more uniform, safe, and reliable cars, produced in record time (Frost, 2016). But unlike the physical world, where every car still had to be built from parts, the digital world allows instant duplication. Once something is created and defined digitally, it can be recreated at virtually no cost, simply by copying it. Designers should take full advantage of this capability, as computers execute highly repetitive tasks far more efficiently. In this context, visual communicators can embrace technology as a valuable tool, accelerating the creative process while avoiding manually performing repetitions.
As visual communicators face the numerous design issues mentioned before, many consider establishing digital design systems a solution to the new challenges of the digital transformation (Figma, n.d.). Systems make design reusable, consistent, and easier to maintain across different mediums. Material Design is a leading benchmark for digital design systems. Its influence has inspired companies like IBM, Adobe, Apple, etc., which have embraced and helped mainstream the concept. Design systems are increasingly becoming a field for experimentation and ongoing research (Đukić, 2020, p.8).
3.1. Digital Design Systems
Due to its novelty in the creative industry, there is no widely accepted definition for the concept (Đukić, 2020, p.8). According to MacDonald (2019), a design system is a single source of truth helping the designer build consistent visual messages. Pyrhönen (Pyrhönen, 2019, p.25). defines a design system as a living set of guidelines, reusable code assets, and tools that ensure organizations deliver cohesive digital experiences.
NASA and the New York City Transit Authority design systems include a style guide with colors, typography, and icons. However, today’s key distinction and challenge is that the design must consistently adapt and respond in real-time across various platforms and diverse digital environments. The digital design system is further enhanced with a component library, additionally focusing on functionality and behavior across different devices (Figma, n.d.).
As previously mentioned, the concept of a digital design system does not have a single, universally accepted definition. It often varies based on the specific use case, goals, and design project. The following definition on the next page is developed in the practical thesis to support the research from a personal perspective and experience. For later reference, this system will be called Nexa Digital Design System.
Figure 20Nexa Digital Design System, The conceptual overview including each part of the system with examples for better understanding.
In the scope of this project, a robust digital design system like Nexa consists of five key pillars (Figure 20):
Layout structure has a well-defined layout organization (e.g., columns and sections), establishing a consistent foundation across various screen sizes. The layout enables visual harmony and has responsive behavior.
Reusable components are modular and unique, each designed to have a specific role and be repeatable throughout the design. Two distinct components never serve the same purpose. They avoid redundancy, ensure clarity, and streamline the design and development process.
Basic elements are the smallest building blocks that are never duplicated in their raw form. Instead, for repetition, they are integrated into components.
Design schemes include color palettes, typographic scales, and others applied across the entire system to establish visual consistency.
Rules define the creation of new components and elements, with additional detailed interaction rules that determine how layout, components, and elements respond to user input and screen sizes in real-time.
The Nexa Digital Design System (Figure 20) is applied in the practical design project with possible slight differences.
3.1.1. Layout Structure
As mentioned, modern designers face the challenge of designing for the growing variety of screen sizes, constantly evolving devices, and different interface characteristics to ensure correctly displayed and well-presented visual messages. Focusing on a single format during the design process without considering how the layout and elements will transition to other screen dimensions may be a critical oversight, causing serious problems. It often leads to complexities that are difficult or impossible to resolve without a complete redesign. In today’s digital landscape, layout organization is crucial in creating adaptive, flexible designs when the display format is unknown (Figures 21 and 22).
This approach refers to the concept of responsive web design, originally introduced in an article by Ethan Marcotte (Marcotte, 2010). Responsive web design involves building a fluid layout structure that dynamically adapts to the viewing environment (Nebeling, 2012, p.9). It is a design approach ensuring pages render correctly on all screen sizes and is a way to design for a multi-device web (MDN Web Docs, n.d.). The layout is a strong foundation and driving force for a design system. Therefore, it is crucial for designers to define it at the beginning of the design process. By investing creative energy in establishing a solid layout structure, designers create a space for design development that ensures responsive behavior.
Figure 21Nexa Digital Design System, Demonstration of how the layout structure changes based on the screen dimensions, Example of wide screens.
Figure 22Nexa Digital Design System, Demonstration of how the layout structure changes based on the screen dimensions, Example of mobile screens.
3.1.2. Reusable Components
As previously discussed, modularity is a key graphic design concept fundamental in modern web design and development. Modular web design is breaking down a digital design into smaller, reusable components. Contemporary web design has increasingly moved toward a component-based development model as popular frameworks such as React, Angular, and Vue rely on modular components. They can be seen as LEGO blocks in the sense of being combined in different ways for various purposes, significantly enhancing design and web development efficiency (Strantz, 2022, pp.126-127).
A component is self-contained and reusable, serving a specific purpose with a well-defined scope (Ottaviani, 2024). It is always unique in its role, and at the same time, it is a repeatable building block. A website consists of buttons, navigation bars, forms, etc., similar to a house with repeated parts, such as doors, windows, and walls.
Buttons are among a website’s most frequently used interactive components. If the color of a button needs to be updated, manually changing every instance would be inefficient and timeconsuming. However, designing the button as a reusable component allows for updates to be made once. That change automatically propagates across the entire design system. Therefore, all buttons are updated simultaneously, maintaining consistency and saving valuable time. Rather than designing the same element multiple times, wrapping them in reusable components preserves creative energy for thoughtful design decisions and avoids redundancy (Figures 23 and 24). Spending time on repetitive tasks is no longer practical in a fast-paced, dynamic world. Modern design systems encourage designers to shift their focus from monotonous production work to a more strategic and intellectual approach to design (Frost, 2016, p.32).
Figure 23Nexa Digital Design System, Example of a button, a primitive reusable component.
Figure 24Nexa Digital Design System, The color change automatically propagates across the entire design system as the button is a primitive reusable component.
3.1.3. Rules
The well-defined set of rules forms the foundational logic and ties the entire digital design system together. The base rules define how components and elements are created, styled, and implemented in the system. For example, a component width can be measured in the number of columns of the layout structure, and its color is determined from the color scheme (Figure 25). Only the predetermined colors, text sizes, and border roundness schemes can be applied, ensuring visual harmony and consistency.
Beyond visual coherence, the digital design system incorporates interaction rules that define how components, elements, and layout structure dynamically react to user input and adapt to diverse screen sizes. These include responsive behavior principles, such as using breakpoints to adjust layouts based on viewport dimensions, and dynamic adjustments, such as scaling font sizes in real time to enhance readability across devices (MDN Web Docs, n.d.). Additionally, interaction rules define how components and elements respond to user actions, such as hovering and submitting input.
Figure 25Nexa Digital Design System, A component width is measured in the number of columns of the layout structure, and the color is determined from the color scheme.
3.1.4. Summary
This digital design system aims to establish a solid foundation that is scalable and efficient, responsive, highly consistent, and easy to maintain over time. By approaching design and development with a systematic and strategic mindset from the beginning, the system allows for identifying challenges beforehand. This early investment in a thoughtful system eliminates inconsistencies and redundancies later in the development process and often avoids fatal design problems. The designer establishes a structured framework as the base for creativity to thrive. This approach aligns with the philosophy of Karl Gerstner, who, even before the digital age and progress in technology, emphasized and predicted the benefits of systematic design (Gerstner, 1964).
Within this framework, the designer’s courage and personal vision bring life into the system. Without creative thinking and bold design choices, a design system can turn visual communicators into rule-followers. For example, Bootstrap is a popular open-source framework enabling fast and efficient web development through predefined components and structured design principles. However, its limited customization often leads to homogeneous and predictable visual outcomes. While Bootstrap intends to help develop an efficient workflow, it limits original ideas and hinders valuable design exploration. The strength of the systematic approach comes from its ability to empower designers to create custom, unique, and visually tailored digital design systems.
The value of the digital design system lies in how the designer pushes its boundaries, using it as a platform for creative visual expression. While the system offers structure, the creative decisions remain in the hands, curiosity, and courage of the designer. For instance, Tailwind CSS is a highly customizable framework that allows designers to build their design systems from the ground up. It enables full creative control as the framework provides complete freedom and supports creating original visual languages.
3.2. Atomic Design
Atomic Design is well-known as a foundational framework and systematic approach for creating and organizing digital design systems, a methodology developed by Brad Frost (Frost, 2016). By referencing this well-established approach, this chapter aims to enhance clarity and strengthen the arguments presented in the above definition, providing an alternative view.
Frost’s methodology breaks down a user interface design into atoms, molecules, and organisms. As the name suggests, his explanation is inspired by the formation of the natural world. His definition offers a simplified view of the universe’s complex structure boiled down to fundamental ideas, where atoms combine to create molecules, which further form complex organisms. Frost’s theory aims to explain the creation of interface design in a hierarchy. At the same time, it is not a clearly defined step-by-step process. Instead, it is a mental model of how a designer can build a robust digital design system (Frost, 2016, p.42).
3.2.1. Design Tokens
Atoms are the basic building blocks of everything surrounding us: air, water, body, food, etc. The atom consists of subatomic particles such as protons, neutrons, and electrons (Kamath, 2022). In the natural world, these subatomic particles define the properties of the atom. These particles represent visual properties in the context of design systems. Some designers often name them design tokens. They are the most basic properties, such as color, opacity, size, roundness, etc., aiming to create consistent design styles across the entire design system. Therefore, they apply to every level of Atomic Design. Similarly, in Nexa, these design tokens influence the layout structure, reusable components, and basic elements. Design schemes are collections of tokens. Rules describe how these tokens should be applied. Design tokens correspond directly to CSS properties in web development. While Brad Frost’s standard principle does not contain design tokens, designers add additional layers to his model to better formulate design decisions (Kamath, 2022).
3.2.2. Atoms
Atoms are the foundational building blocks that any design consists of. Like atoms in the natural world, these atoms represent the smallest meaningful part. Examples of atoms include form labels, search input, buttons, etc. (Frost, 2016, p.43). In Nexa, they correspond to primitive reusable components (Figure 26).
Figure 26Nexa Digital Design System, A separate atom.
3.2.3. Molecules
Molecules are reusable components representing a group of atoms functioning together. Like in the natural world, molecules consist of at least one atom (Frost, 2016, p.44). For example, a label, a search input, and a button are separate atoms, but when combined, they form a search form molecule.
In the case of Nexa, this translates to three primitive reusable components combined to create a new reusable component equivalent to a molecule. The molecule serves a specific and unique function in the design system. The designer can reuse it without rebuilding it from scratch, helping create a consistent experience while making the design more efficient, organized, and easier to maintain over time (Figure 27).
Figure 27Nexa Digital Design System, A label, a search input, and a button are separate atoms, but when combined, they form a search form molecule.
3.2.4. Organisms
Organisms have the highest complexity in a design system. They consist of individual atoms, molecules, and other organisms. Organisms have similar or entirely different molecule types, and their structure is unique for each design project (Frost, 2016, p.46). In Nexa, they represent complete sections (Figure 28).
Figure 28Nexa Digital Design System, A complete section or an organism.
3.2.5. Summary
Brad Frost’s Atomic Design methodology promotes and aims to establish a mindset where designers approach their work with a hierarchical and modular perspective. Instead of seeing a design as a series of static pages, they are encouraged to view it as a dynamic, living system made of reusable, modular parts. Every component, from a simple button (atom) to a large section (organism), is interconnected within the system. This way of thinking ensures that the design can evolve and scale over time, making it much easier to maintain, update, and expand because changes propagate across the entire digital design system.
Frost’s methodology’s core structure is universal, applies to different types of projects, and is not fixed. Depending on a project’s specific scale, complexity, and goals, it can be scaled up, expanded, or simplified. The intention is not to impose a strict set of correct steps. Instead, it offers a framework that designers can interpret and adjust based on their unique needs. In some cases, particularly in smaller design projects, introducing a hierarchy of components such as atoms, molecules, and organisms may be unnecessary or counterproductive. Atomic Design serves best as a guide rather than a binding set of rules.
4. Conclusion
The design field has experienced significant transformations due to technological progress and an unprecedented rise in online consumption. This phenomenon significantly impacts the designer’s workflow, making it an ever-changing, dynamic, and challenging process rather than a static, repetitious routine. On one hand, this change significantly adds high value to the creative work; on the other hand, it places significant responsibility on the designer.
In the non-digital era, visual communicators were limited to physical media, which often required considerable resources for creation and strategic distribution to reach their audience effectively. Today’s presence in the digital space is vital to reaching people and gaining recognition as society increasingly moves to digital platforms. While this shift allows for a much greater and more immediate impact than ever, it also brings new challenges. The demand for engaging content and the users’ rising expectations add complexities. The need for recognizable and consistent visual identities, combined with the requirement to support diverse mediums, makes it crucial for visual communicators to consider approaching design systematically.
Building a digital design system offers significant advantages and is essential in the design and web development of digital products in the fast-paced contemporary world. However, creating a digital design system from scratch is a complex, ongoing effort requiring thoughtful planning, constant maintenance, and longterm commitment. The return on investment is significant for large-scale projects, but for small ones, it may be unnecessary and could add overhead rather than value.
The scale and implementation of a digital design system should reflect the size and scope of the project. The system is not a solution for all design cases. Instead, it should develop as a flexible instrument that helps designers without constraining them. The real power of systematic digital design comes from how the designer creates and applies it. To unlock its full potential, designers should embrace and approach the system with curiosity and willingness to push the boundaries. The system should support, not replace, creative thinking. It streamlines the design process and creates harmony across modern visual communication mediums. However, if it is not approached with creativity, it can become an overly restrictive and rigid set of rules.
Systematic digital design is a problem-solving tool. Its value lies in how the designer shapes it. It evolves in response to creative vision, project demands, and user needs. Mastering the development of design systems is only part of the equation. The success depends on the designer’s ability to balance structure with creativity, making a design responsive but also original and expressive. While systematic digital design can serve as a mental model and a valuable tool, the key to creating outstanding visual messages lies in the designer’s vision and personal expression.
5. Appendix
5.1. List of References
Albers, J. (2014).Josef Albers: Minimal Means, Maximum Effect.
Amankwah-Amoah, J., Khan, Z., Wood, G., & Knight, G. (2021).COVID-19 and digitalization: The great acceleration.Journal of Business Research, 136, 602–611.
Berners-Lee, T., R. C. (1989).World-Wide Web.
Burger, C., & Weinmann, J (2024).Chapter Title: The Challenge of Digital Transformation BookTitle: Leveraging Digital InnovationBook Subtitle: Lessons for Implementation. Ubiquity Press
Đukić, N. (2020).Design Systems for improved development efficiency in Software Startups.
Frost, B. (2016).Atomic Design.
Gerstner, K. (1964).Karl Gerstner: Designing programmes. Lars Muller.
Jablan, S. (2000).Symmetry and Ornament.
Jablan, S. (2005).Modularity: Understanding the Development and Evolution of Natural Complex Systems.Chapter: Modularity in Art. Volume 5 of Vienna Series in Theoretical Biology MIT Press, 2009. Konrad Lorenz Institute.
Kenna, H. (2012).A Practice-led Study of Design Principles for Screen Typography with reference to the teachings of Emil Ruder.
Kulba, B. (n.d.).Karl Gerstner and Design Programmes.
MacDonald, D. (2019).Practical UI Patterns for Design Systems: Fast-Track Interaction Design for a Seamless User Experience. First Edition.
Mooney, A. (2014).Modularity: An elemental approach to type design.
Muller-Brockmann, J. (1999).Rastersysteme für die visuelle Gestaltung - Grid systems in Graphic Design. Niggli Verlag.
NASA (1976).NASA Graphics Standards Manual.
Nebeling, M. (2012).Lightweight Informed Adaptation Methods and Tools for Responsive Design and Development of Very Flexible, Highly Adaptive Web Interfaces, ETH Zurich.
New York City Transit Authority (1970).New York City Transit Authority Graphics Standards Manual.
Pyrhönen, E. (2019).Hack the design system.(Mindy Reyes, Ed.; Edition 1.0). Idean Publishing.
Smeijers, F. (1996).Counterpunch: making type in the sixteenth century, designing typefaces now.
Strantz, A. (2022).Modularity. Keywords in Design Thinking: A Lexical Primer for Technical Communicators Designers, pp. 125–127. The WAC Clearinghouse; University Press of Colorado.
Tarun K, J., Nicole, D., Taral K, J., Mamta, S., Johnie, R., Heidi, G., & Kurt, S. (2020).Analysis of Online Media Consumption during Initial Months of the COVID-19 Pandemic. Annals of Public Health Reports.
Williamson, J. H. (1986).The Grid: History, Use, and Meaning.In Source: Design Issues(Vol. 3, Issue 2).
5.2. List of Digital References
Apple (2019)Human Interface Guidelines - Design - Apple Developer[Accessed May 13, 2025]
Bootstrap (n.d.)Bootstrap[Accessed May 13, 2025]
Carbon Design System (n.d.)Carbon Design System[Accessed May 13, 2025]
Figma. (n.d.)Design systems – Figma[Accessed May 13, 2025]
Google (2023)Material Design.[Accessed May 13, 2025]
Kamath, R. (2022)Atomic Design methodology for building design systemsMedium[Accessed May 13, 2025]
Marcotte, E. (2010)Responsive Web Design – A List Apart[Accessed May 13, 2025]
MDN Web Docs. (n.d.)Responsive design[Accessed May 13, 2025]
Ottaviani E. (2024)Web Components. A Practical Perspective Using Custom ElementsMedium[Accessed May 13, 2025]
React (n.d.)React[Accessed May 13, 2025]
Spectrum Design. (n.d.)Spectrum, Adobe’s design system[Accessed May 13, 2025]
Tailwind CSS (n.d.)Tailwind CSS[Accessed May 13, 2025]
Vue.js (n.d.)Vue.js.[Accessed May 13, 2025]
5.3. List of Figures
Figure 01Modularity: Understanding the Development and Evolution of Natural Complex Systems, Konrad Lorenz Institute Chapter: Modularity in ArtVolume 5 of Vienna Series in Theoretical Biology[Black and white ornaments composed from a single element. One of the first modular elements. Ornaments on the right are obtained by overlapping of the basic ornaments on the left.][Accessed May 13, 2025]
Figure 02Paul Koch & Fritz Kredel (1933)The Dolphin: A Journal of the Making of Books[Steps in cutting a punch using a counterpunch.][Accessed May 13, 2025]
Figure 03Herbert Bayer (1927)Harvard Art Museums: Busch-Reisinger Museum[Typographic exploration by Herbert Bayer, displaying the Universal typeface, a key example of Bauhaus principles.][Accessed May 13, 2025]
Figure 04Ellen Lupton and Elaine Lustig Cohen (1996)Letters from the Avant-Garde: Modern Graphic Design[Herbert Bayer’s rationalization of the letter “a”. Insight into his design process.][Accessed May 13, 2025]
Figure 05Josef Albers (1931)[Typeface Kombinationsschrift by Josef Albers.][Accessed May 13, 2025]
Figure 06Josef Muller-Brockmann (1962)Internationale Juni-Festwochen 1962 Stadttheater Zürich[Poster] 128 x 90 cm[Poster by Josef Muller-Brockmann.][Accessed May 13, 2025]
Figure 07Josef Muller-Brockmann (1967)Juni-Festwochen Zürich[Poster] 128 x 90 cm[Poster by Josef Muller-Brockmann.][Accessed May 13, 2025]
Figure 08Wolfgang Weingart (1978)Kunst Kredit, Mustermesse Basel[Poster] 128 x 90 cm[Poster by Wolfgang Weingart.][Accessed May 13, 2025]
Figure 09Karl Gerstner (2001)Rückblick auf 5 x 10 Jahre Graphik Design etc.[Magazine Capital by Karl Gerstner. Variations within the grid system.][Accessed May 13, 2025]
Figure 10Karl Gerstner (2001)Rückblick auf 5 x 10 Jahre Graphik Design etc.[Grid for magazine Capital by Karl Gerstner.][Accessed May 13, 2025]
Figure 11Karl Gerstner (1964)Designing programmes.[Morphological Typogram by Karl Gerstner.][Accessed May 13, 2025]
Figure 12Karl Gerstner (1964)Designing programmes.[Wordmark Intermöbel by Karl Gerstner created with the Morphological Typogram.][Accessed May 13, 2025]
Figure 13Martin Lorenz (2021)Flexible Visual Systems.[The solution for wordmark Intermöbel by Karl Gerstner.][Accessed May 13, 2025]
Figure 14-15NASA Graphics Standards Manual (1976)[NASA’s Standards Manual by Richard Danne and Bruce Blackburn from 1976.][Accessed May 13, 2025]
Figure 16-19New York City Transit Authority Graphics Standards Manual (1970)[New York City Transit Authority Graphics Standards Manual by Massimo Vignelli and Bob Noorda.][Accessed May 13, 2025]
Figure 20Nexa Digital Design System[Nexa Digital Design System, The conceptual overview including each part of the system with examples for better understanding][Author’s own work]
Figure 21Nexa Digital Design System[Nexa Digital Design System, Demonstration of how the layout structure changes based on the screen dimensions, Example of wide screens.][Author’s own work]
Figure 22Nexa Digital Design System[Nexa Digital Design System, Demonstration of how the layout structure changes based on the screen dimensions, Example of mobile screens][Author’s own work]
Figure 22Nexa Digital Design System[Nexa Digital Design System, Demonstration of how the layout structure changes based on the screen dimensions, Example of mobile screens][Author’s own work]
Figure 23Nexa Digital Design System[Nexa Digital Design System, The color change automatically propagates across the entire design system as the button is a primitive reusable component.][Author’s own work]
Figure 24Nexa Digital Design System[Nexa Digital Design System, Demonstration of how the layout structure changes based on the screen dimensions, Example of mobile screens][Author’s own work]
Figure 25Nexa Digital Design System[Nexa Digital Design System, A component width is measured in the number of columns of the layout structure, and the color is determined from the color scheme.][Author’s own work]
Figure 26Nexa Digital Design System[Nexa Digital Design System, A separate atom][Author’s own work]
Figure 27Nexa Digital Design System[Nexa Digital Design System, A label, a search input, and a button are separate atoms, but when combined, they form a search form molecule.][Author’s own work]
Figure 28Nexa Digital Design System[Nexa Digital Design System, A complete section or an organism][Author’s own work]
5.4. List of Aids
GrammarlyGrammarly was used for spell checking.
ChatGPTChatGPT was asked for assistance with word choice. It was explicitly not used as a research aid or to generate writing ideas.
Bachelor Thesis 2025
The Power of Systematic Digital Design
Design and code