Design System

Banner image of Expa Design system page on austinejoy.com

Building a design system for a global platform

AIESEC is a global organization that operates in 114 countries and territories, with more than 7000 partner organizations. Expa is AIESEC's online platform, where participants and companies/organizations are managed. However, the lack of a proper design system has resulted in a number of problems, including inconsistencies and longer development cycles.

Expa dashboard

The introduction of the Expa Design System (EDS) allowed us to accelerate and scale production, improve the quality of our work, and strengthen collaboration between designers and developers. This enabled us to maintain consistency, ship our products in a timely manner, and avoid getting bogged down in customizations that did not provide any additional value.

I was responsible for the design, documentation, and maintenance of the design system's component library, pattern library, and style guide from 2020 to 2021.

See full team at the end

Establishing purpose and principles

We had already established a basic style guide a few years ago, which was created by our lead, Arian. The development team had been using this guide as a reference, as well as utilizing open component libraries and customizing them to fit the Expa platform. However, we soon realized that this approach was not sustainable in the long term. To address this issue, we established a set of principles that we wanted our system to fulfill.

Tools over rules

Design system should be a toolbox, not an instruction manual. Support the team, don’t govern.

Cohesion, not consistency

When the system is intuitive, consistency becomes an automatic by-product of adoption.

Think inclusively

Accessibility should be an integrated part of design system development, not a box to check at the end.

Lead by example

Show, don’t tell. Explain the best practices with real examples, not instructions on how to create them.

Be selective

Keep only what’s necessary and perfect what remains. Every addition becomes a new pattern to follow.


Building for flexibility, design tokens and new infrastructure that helps to iterate easily across different experiences.

After careful consideration, we decided to start from scratch and build a new component library and style guide that incorporated the best elements of the existing platform. We knew that this would be a challenging task, but we believed that it was necessary in order to build a more robust and scalable system.

One of the key challenges that we faced was balancing the need for flexibility and ease of use with the need to avoid introducing unnecessary complexity. We realized that it is easy to add new features and functionality to a system, but it can be much harder to remove them once they have become entrenched. Therefore, we made a conscious effort to keep things simple and avoid adding unnecessary features.

Nothing exists except atoms and empty space

Due to the constantly evolving nature of the platform, we decided to create a flexible architecture that could easily adapt to future changes. After conducting research and consulting with our developers, we implemented a modern version of the atomic design approach. This involves breaking down elements into their smallest, most basic form and building it up from there. Design tokens served as the foundation, which in turn were used to make components. These components later made up patterns and finally templates.

After careful consideration, we decided to keep all of our design components and style guide in Figma. Within Figma, we created a library file that served as the foundation of our design system. This library allowed us to define styles and components that could be shared across our team or organization and used in multiple designs.

For development, we used Storybook, which is an open-source frontend workshop that allows us to build UI components and pages in isolation. This approach allowed us to create a robust and scalable design system that could easily be maintained and updated over time.

An adaptive architecture

To begin building our design system, we focused on establishing the foundations of our visual language, which are the basic design tokens. These include colors, spacing, iconography, shadows, grids, borders, opacity and breakpoints.


Color is an important element of our brand, as it helps to distinguish the brand and reinforce a consistent experience across products. We used color design tokens to manage our color palette and are categorized into four main groups: brand, semantic, text, and palette.



font-family: 'Open Sans'

font-style: normal

font-weight: 600

font-size: 38px

line-height: 46px
















The typeface plays a crucial role in how our users perceive our brand and interact with our products. We chose Open Sans as our default typeface because of its clarity, legibility, and versatility.


Icons helps to represent common actions and convey information to users in a clear and concise manner. We have designed our icons aiming to balance our human side with function.

One of the key advantages of implementing a centralized design system is that it makes it easier for teams to communicate and collaborate. This proved to be particularly valuable as our design system evolved, as it allowed us to make changes quickly and efficiently without disrupting the work of other teams. Additionally, by ensuring that all teams had access to the latest versions of our design elements, we were able to maintain consistency and ensure that changes made to our design foundations were reflected across our product design.

Crafting the building blocks

Once we had established the foundations of our design system, we began to create our design components. These components served as the building blocks for more complex patterns and templates.

To illustrate this process, let's take the example of a button. We began by designing a simple button compoenent, which included the basic visual elements such as the button's shape, size, and color.


Buttons are an essential element of any user interface, as they allow users to trigger events and actions. In our design system, we have defined five different types of buttons.

Modal can include a description. Descriptions briefly communicate any additional information or context that a user needs to know in order to make one of the decisions offered by the buttons.


Primary action







Add item

Button anatomy

The button label is always in sentence case. When there is no icon, the padding on both sides are the same.

Button types

We have defined two different sizes for buttons: large and compact. The different types of buttons are CTA, subtle, outline, ghost and destructive. Buttons can also have different states, which reflect their current status or behavior and they are default, hover, disabled, focused, and loading.

Similarly, we moved on to design and implement other components, such as text fields, switches, checkboxes, cards and many more. Like our buttons, these components were designed with different states and behaviors, and their usage was carefully documented. This allowed us to create a library of components that could be easily reused during the design process, and that were easy for developers to understand and implement.

Seeing the bigger picture

Following the atomic design model, we grouped the components to create more complex components. These reusable combinations of components were then used to create patterns that solved common user problems. Together with templates, these components and patterns were used to create the final page design. By utilizing this approach, we were able to create a consistent and user-friendly experience for our users.
























import DropdownMenu, {



} from '@expa-design-system/dropdown-menu';

const DropdownOpenExample = () => {

const [isOpen, setIsOpen] = useState(false);

return (



onOpenChange={(attrs: OnOpenChangeArgs) => {



trigger="Page actions"


<DropdownItemRadioGroup id="actions">

<DropdownItemRadio id="option1">Option 1DropdownItemRadio>

<DropdownItemRadio id="option2">OPtion 2DropdownItemRadio>





The next step in the process was to hand over the design to the developers. Fortunately, the developers had been involved in the design phase from the beginning, which made the onboarding process smooth and seamless. Detailed documentation was a crucial part of the design process, which helped to eliminate any ambiguity and ensure that the developers had a clear understanding of what needed to be done.

To ensure that the development process was efficient and effective, the team developed and tested one component at a time using Storybook. We made regular updates based on the results of our testing, which helped to ensure that the final product met all of our requirements and exceeded our expectations.

Impact-driven approach

Developing a design system is a time-consuming and complex process, and it is important to measure its impact using meaningful metrics. After implementing our design system for 4 months, we were pleased to see that it had been successful, as evidenced by the positive results we were seeing.

98% component adoption

We estimated that more than 98% of the new designs are created using the EDS components.

2x design speed

Our designers were able two double their design output after the implementation of the design system.

46% faster development

Development time decreased drastically, thus we were rolling out new features into production faster than ever.

Consistency and efficiency

We were able to build efficiently and eliminate all inconsistencies in our new builds.

A great learning experience

I learned a lot of things while building this design system and the following are a few of them.

Design system is a journey

I initially thought that we could create a perfect and fully-fledged design system right out of the gate. However, through the process of building and implementing Expa Design System, I learned that it's important to view it as a living, evolving organism that will continue to adapt and grow as our product requirements change and expand. Instead of striving for perfection from the start, I now understand that it's better to focus on creating a solid foundation and continually improving and refining the design system over time.

Collaboration is key

As a design system designer, I have learned that it is crucial to engage in regular, open communication with everyone who will be using the design system. This means acting as a connecting point for the whole team, whether it is through meetings, online discussions, or concrete documentation. By fostering collaboration, we can surface and resolve any potential conflicts or challenges that may arise, leading to a stronger, more robust design system.

Learn more by teaching

I was responsible for introducing our designers and developers to the new design system we were implementing. Many of them were unfamiliar with both the design system and Figma, the tool we were using to manage it. To help them get up to speed, I held one-on-one sessions and created a comprehensive guide on how to use the component library.

I was fortunate to have the opportunity to work with an incredible team on this exciting project.

Arian Edward Project lead

Austine Joy Design

Manzur Khan, Vivek Srivastava, Michael Victor Development

Raghul Kuduva, Nikita Vergis, Soumya Nigam Design updates and maintenance