Building a design system from the ground up at Edda

Moneybox app screens showing stock selection interface

Why we needed a design system

When I joined Edda as a designer, I quickly noticed we had a very loose system that was leading to a lot of inconsistencies in our design. Designers were creating similar components from scratch for every project, engineers were writing duplicate CSS, and our product was starting to feel disjointed across different features. I saw the opportunity to build something better. We needed a design system that would:

Reduce inconsistency across our web apps

Speed up design and development by reusing components

Improve collaboration between designers and engineers

Create a better experience for our users through consistency

I pitched the idea to leadership, got buy-in, and started working on it.

The process

Step 1: Audit

I started by doing a full audit of our web apps to understand what we had. I went through every screen, cataloging components, patterns, and styles. I captured atoms and molecules—buttons, inputs, typography, spacing, colors—and identified which components were actually being used and which ones could be deprecated.

The audit revealed we had 7 different button styles (when we only needed 3), nconsistent spacing (some designers used 12px, others 16px, others random values), 15+ shades of gray that looked nearly identical and way more inconsistencies in our system!

Step 2: Tokenization

Once I knew what we had, I created a tokenization system for our components, colors, fonts, spacing and more. Instead of hard-coded values, everything was now referenced through design tokens.For example:

Colors: primary-500, neutral-200, error-600
Spacing: space-xs, space-md, space-xl
Typography: heading-lg, body-md, label-sm

This meant that if we ever needed to change our primary color, we could update one token instead of hunting through dozens of files.

Step 3: Rebuilding components in Figma

I re-created Figma components using tokens and common patterns. Every component was built with variants, proper auto-layout, and clear naming conventions. I made sure components were flexible enough to handle different use cases but opinionated enough to maintain consistency.

I also documented when and how to use each component, including dos and don'ts.

Step 4: Training and governance

I pushed the system live, trained the designers on how to use it, and created a governance process for it. We established:

Design system sessions where designers could ask questions or propose changes to our components
A contribution process for proposing new components

The goal was to make sure everyone knew how to use the system and felt ownership over it.

Step 5: Implementation with engineering

I worked closely with the dev team to implement the tokenization system. We aligned on CSS classes and design system tokens, making sure that what designers saw in Figma matched what engineers built in code.

I also supervised the creation of new components, reviewing both design and code to make sure everything met our standards.

Step 6: Optimized handoff

Finally, I optimized our design handoff processes. Before, designers were creating long Loom videos explaining their designs to engineers. Now, with the design system in place, handoff became much simpler:

Designers link to components in the design system
Engineers know exactly which React component to use
Fewer questions, fewer meetings, faster shipping

This meant that if we ever needed to change our primary color, we could update one token instead of hunting through dozens of files.

Results

The design system has been a huge success:

Design time reduced, since Designers can now build screens in hours instead of days
Development time reduced - Engineers spend less time styling and more time on logic
Consistency across the product - Our web apps now feel cohesive and professional

Thanks for reading!