Alpha Design System
Building the Alpha Design System: a foundation for scalability and consistency
CHALLENGES
PROCESS
Foundations
From the start, we focused on creating a strong foundation for the design system: typography, color, spacing, and core design tokens. This was a collaborative effort, with some designers specifically assigned to token creation.
Unlike traditional workflows, we developed design and code simultaneously. Figma branches were only merged into the Figma UI kit once the same component was implemented in Storybook. This ensured that design and development stayed in sync from the beginning.
Components
We started with basic components before building more complex UI elements on top of them. My focus was on key components needed for my project, which was a canvas-based application. This meant working intensively on:
Elevation systems
Floating elements (cards, buttons, inputs)
Group buttons
Omnisearch & autocomplete
Multiselects
Drawers
Compass navigation
Each component was first documented in Figma, then shared with the broader design team. We held alignment meetings with the Design System team and developers, ensuring a smooth transition from design to code. Only once a component was fully implemented did we finalize its documentation, covering:
Anatomy: Structure and elements
Usage: Design best practices and correct usage scenarios
Guidelines for implementation: Do-s and Don't-s addressing the development, testing and design communities.
Patterns and layouts
Beyond individual components, I developed patterns to handle more complex interactions across applications. These included:
Navigation structures
Form behavior and validation
Loading patterns
Notification systems
I've also created a gallery of templates and layout guidelines after performing a benchmarking of the existing application. This allowed us to classify applications into categories for which we had well defined rules. I identified 4 main layouts used across the Alpha platform:
Grid based layouts (template for applications that heavily rely on tabular formats where users mainly interact with grids)
Canvas based layouts such as Azimuth (template for applications where the users engage with diagrams, maps for example)
Dashboard based apps such as Quant for Cash
Form based applications
To ensure easy adoption, we used Zeroheight as our centralized documentation hub, making it a go-to resource for developers and designers. We also introduced a playroom environment, where components and patterns could be tested in both light and dark mode, saving significant design time.
Documentation
Our documentation served two key purposes:
Guiding designers and developers: providing clear, structured references.
Driving adoption across Cargill business groups: making the case for the design system’s value.
When Cargill introduced new branding guidelines, our flexible design system became a major advantage, allowing us to seamlessly integrate new themes and support a variety of applications.
DS showreel
Achievements
The results
30% faster design and development: Teams reused components instead of reinventing them.
Stronger UI consistency: A shared language led to a more unified experience.
Improved accessibility: All components were built with WCAG standards in mind.
Better collaboration: Shared design tokens and guidelines for a unified source of truth.
Increased visibility to the team! We inspired other broader Cargill to invest in Design Systems. Too bad that they decided to build new ones rather than relying on the Alpha design system - politics 😭.
AI tools enabled 🔥
I'm currently engaging in pilots leveraging AI tools such as v0 and Replit. I'm estimating that connecting the design library to an AI tool such as v0 will increase time to market by 90% - especially when it comes to creating quick prototypes and PoC. Moreover, similar tools will be enabling design teams dramatically when it comes to shipping end to end products.
Challenges
Inconsistent design decisions
While benchmarking different Alpha apps, we realised that sometimes components weren't used as per guidelines. That's where we decided to create a Zeroheight documentation system even for the icons. I personally audited hundreds of icons and then I compiled a much shorter list of the icons that are to be used at Cargill.
Slow design-to-development handoff
Designers and developers weren’t speaking the same language. We introduced design tokens, making things like colors, spacing, and typography reusable in both Figma and code.
Getting teams to adopt the system
We treated the design system as a product, not a project—offering clear documentation, training sessions, and continuous iteration based on real-world use.
Stuff that didn't make me sleep at night
The design system thrives when development and design teams collaborate seamlessly. It’s a high-performance tool, but only when teamwork is the foundation. Each designer drove the creation of specific foundations, components, and patterns tailored to their application (but aligning with others). I focused heavily on elevation, group buttons, chips, tags, and pills. For major components, I defined design patterns for drawers, modals, omnisearch, and multiselect. My role was temporary, but the impact was significant.
What’s the issue?
The design system somehow ended up being owned by developers 😵💫 (some sort of Gollum style 💍 ), with designers brought in only when new features or components are needed or problems to be fixed. The result? Designers don’t own the product. Instead, the design system is treated like a product to “sell” internally, which creates a flawed model. Designers lose control: over the components, the collaboration process, and the roadmap.
This led to growing tensions within the team. 😤
It’s no surprise designers feel the urge to move away from the current system and perhaps experiment with tools such as v0 or Replit to re-gain the once owned control and ownership. We just weren't able to innovate without ownership and our users weren't happy with the lack of flexibility coming from the Design System.
Since the Design System was treated like a product, after some time we ended up just using it as a tool, channeling our feedback via the official channels. When we saw that our feedback wasn't welcomed nor taken into account, we just embraced different tools (and we are lucky at Cargill we have many).
We are currently partnering with another DS team to create a Cargill branded global design system - not only for trading and analytics applications but serving all the 170.000 employees worldwide.