building a design system for Affinidi's privacy- preserving applications
A design system is crucial for ensuring consistency, efficiency, and scalability in digital product development. By providing a collection of reusable components and standardised guidelines, it creates a unified visual language and cohesive user experience across different platforms and products.
This not only streamlines the design and development process, reducing redundancy and errors, but also enhances collaboration among teams
Ultimately, a robust design system enables organisations to innovate faster and deliver high-quality products that meet user needs and expectations.
For our design system we used the Atomic Design approach. Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:
Atoms
Molecules
Organisms
Templates
Pages
design system
design handover
design leadership
responsive design
ux design
ui design
web 3.0
prOject dEtails
key responsibilities
COMPANY
affinidi
role
lead product designer
date
2022-2023
link
www.affinidi.com
Two years after launching Affinidi, we had developed a diverse array of products. Our Berlin team created some, our Singaporean team crafted others, and we built additional products for clients.
Our goal was to unify these varied offerings into a cohesive suite within our developer portal. Naturally, each product had its own distinct look and feel, creating the need for a new, overarching design system.
Integrating these different products into a single, cohesive entity was a significant challenge.
the chAllenge
my rOle
As the Lead Designer on this project, my role was to unify all the diverse products. Having contributed to most of these products in some capacity, I was responsible for harmonising the user experience in the final product.
Additionally, I led the team in designing and developing the various components of the design system and managed the handover to the developers who were building it.

stYleguide
text styles
RGBA (39, 154, 241, 1)
HEX #279AF1
Utility_info_100
utility
info
RGBA (33, 171, 104, 1)
HEX #21AB68
Utility_success_100
utility
success
RGBA (252, 207, 7, 1)
HEX #FCCF07
Utiliy_warning_100
utility
warning
RGBA (228, 38, 72, 1)
HEX #E42648
Utility_danger_100
utility
danger
brand colors
utility colors
neutral colors
molecUles
Molecules can be created by combining two or more atoms. For instance, an input field and a button can combine to become a search form - below is a selection of molecules from our design system.
The style guide below served as the foundation for our design system. While most elements were predefined, additional elements were incorporated as needed.
Organisms
Multiple molecules together form an organism - examples of an organism are for example, a header, sidebar or signup form.







Applications
developer console
This design system was originally created for our developer console. The developer console provides tools to enhance data privacy and portability within the applications of our customers.

white label credential applications
The flexibility of the design system enabled us to reuse it across various applications.
By duplicating the design system and updating the style guide to create a unique look and feel, we significantly reduced the time required to build new applications.
pAges
The highest lever of hierarchy in an atomic design system are the actual pages which makes a product. Below are selection of the pages of our developer portal.

stYleguide
The style guide below served as the foundation for our design system. While most elements were predefined, additional elements were incorporated as needed.
atOms
Atoms are the most basic components. They are the building blocks of a design system such as buttons, lines, shapes, icons, text fields, text labels, etc. - this is a selection of the atoms we used in our design system.
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
buttons m - variations
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
labels
messages
inputs
selects



contact me
connect
me@wernersdesigns.com
©️ werner van huffelen, 2024 all rights reserved
lEt's cOnnect ✌️
page tEmplates
Templates are the glues that combine the different organisms or individual sections to create a complete design.
