Unifying the Atlantis dApp Suite through a comprehensive design system.

Skills: Figma Variables; Figma Components; UI Design

The problem Atlantis faced

Atlantis is a decentralised peer to peer impact network building coordination tech for social and climate action. It faced growing design fragmentation across its products. My task was to build their first comprehensive design system from the ground up using Figma. I focused on creating a scalable framework to improve design consistency across all platforms. This system now serves as the single source of truth, unifying the user experience and brand identity. It also streamlines the development pipeline, allowing for faster and more cohesive product updates.

How I designed for scalability and ease

I approached the project with the Atomic Design method.

To create a universal design language, I established foundational tokens for color and typography. I used a code-friendly naming convention to ensure a seamless handoff from Figma to production.

For icons, I built a scalable, future-proof system:

Audit & Consolidate: First, I identified every inconsistent icon across all three platforms.
Map All Use Cases: I then defined all current and anticipated future states (e.g., active, disabled, notification) for each icon.
Build Master Components: Finally, I created a single, variant-based component for each icon. This made the entire library easy to update and scale.

The long text input component and its variants. — Long text input component

I used the Atomic Design methodology to build a scalable and flexible component library.

Atoms: The system starts with our foundational tokens—colors, fonts, and spacing. These are the smallest building blocks.
Molecules: I then combined these atoms to create simple, functional components like labels, input fields, and buttons.
Organisms: These molecules were assembled into more complex organisms, such as the complete sign-up form.

Beyond the Pixels

Here's what my supervisor had to say about my time at Atlantis!