Design system · AI agents · Prototyper · SukuPay · 2026
from zero
to prototype
super fast.
Company
🇬🇹 SukuPay
Role
Sr Product Designer · Design System Lead
Scope
Tokens · Architecture · Components · Pipeline
Team · Genesis was built by
Alejandro AlvarezEngineering Manager
Joaquin BeceiroFrontend
Illan CohnBackend
Method
Audit → Tokenize → Automate → Scale
Goal
One system. From design to code, no translation.
Genesis · SukuPay's AI prototyper
Engineering built it.
I design with it every day.

Genesis is SukuPay's AI prototyper. The idea and the build belong to our engineering team. My side is how I work with it: it is part of my daily process, where I use it to move fast, explore ideas and write the ACRs for the devs through Ideate, which takes some of the manual work off my plate. Creating the design system is what let us link the whole process, so it runs well and stays faithful to my designs.

Thought up and built by
Alejandro AlvarezEngineering Manager
Joaquin BeceiroFrontend
Illan CohnBackend
How I use it, day to day
01 · Explore
An idea, in plain words
I describe an idea or a problem and get something to react to in minutes, before I commit time in Figma.
→
02 · Ideate
Idea → ACRs
Through Ideate I write the ACRs for the devs, so the idea reaches engineering already shaped.
→
03 · Prototype
ACRs → Clickable Screen
A prototype with the product's colors, type and components, taken straight from the design system and shared as one link.
Genesis · watch it turn a prompt into a screen
Describe an idea or a problem…
Explore Ideate Prototype
Reading the design system: colors, type, components…
Transfer
Send money
You send
$200.00
Arrives in seconds
To
Ana M.
Change
Delivery
To their phone number
Edit
Note
Optional
Add
Review transfer
Published in ~90 seconds
Same colors. Same type. Same components.

A clickable screen at product fidelity. It matches my designs because Genesis assembles it from the design system's tokens and components.

🔗 One shareable link
Situation & task
A design system
with no single source of truth.

SukuPay's product was growing fast: new partners, new surfaces, new features. But underneath, the design infrastructure hadn't kept up.

The brand green #00C603 (generic, not tech, and failing accessibility) was just the symptom. Below it: hardcoded states, two conflicting semantic systems, variables misaligned between Figma and Tokens Studio, typography never tokenized, and no single source of truth.

The color was the most visible problem. But the real one was structural debt across the entire system.

2.31:1
Old green contrast ratio on text
0
Tokens reaching code
2
Conflicting semantic systems
3
Brands to skin on one skeleton
The opportunity
Build a token architecture that goes from Figma to code in a single chain, and scales to every partner without redesigning from zero.
One source of truth · Accessible by system · Multi-partner theming · Pipeline that notifies on every change.
Action · 01 The diagnostic
The color was the symptom
Underneath, structural debt in every layer
Not fully tokenized
Loose, hardcoded states scattered across the entire app.
Two semantic systems
Brand + shadcn coexisting, with two neutral scales fighting each other.
Misaligned variables
Cruft and mismatches between Figma and Tokens Studio.
No source of truth
No versioning, no pipeline, no single place where the system lived.
Typography by hand
Only Figma styles: never tokenized, never in the chain.
Before
Send money
2.31:1
WCAG contrast ratio
→
After
Send money
AAA
WCAG contrast ratio
Action · 02 The color decision
Two greens instead of one
Lime for expression, teal for function
The new green is a pair: lime + teal.

We didn't choose between brand and accessibility. We separated the two jobs. Lime is the expressive accent: vibrant, for the logo, success and rewards. Teal is the functional color: the one that holds every button, accessible across all styles and partners.

Brand · Lime
#61FF61
Expressive accent. Logo, success, celebration. Doesn't carry the burden of being legible everywhere: its contrast is just 1.31:1 on text, and that's fine.
Primary · Teal
#005043
Functional color. Accessible in fill, soft, outline and text. The one a user with low vision can also use without friction. Passes AAA.
The system, in one board.

Type, color, icons and the components of the send flow. These are the pieces I design with, and the same ones Genesis assembles when it prototypes.

Action · 03 Architecture
One chain, three layers
A token never points to a loose value
Primitives
core.json
The raw value. lime · teal · neutral · amber · red · blue + size · space · radius.
↓
Semantic
semantic.json · typography.json
Decisions, not values. Example: Primary → {teal.700}.
↓
Themes
themes/*.json
Each partner, its own skin: sukupay · zigi · zigi-dark · partner. Same skeleton.
A token never points to a loose value. It always flows down the chain, from primitive to semantic to theme.
Action · 04 The pipeline
From Figma to GitHub to Slack
Live today
Token changes now reach the repo and the team.
Live todayTokens flow on their own.
01
Figma
The variable changes here.
→
02
Tokens Studio
Pushes JSON to the repo.
→
03
GitHub · commit
The moment of truth.
→
04
GitHub Action
Runs inside the repo.
→
05
Slack
Notifies the team.
The "I updated the design system" moment is no longer a Figma publish. It's a commit on GitHub. And the notification is handled by a GitHub Action living in the repo. Fewer pieces, easier to maintain.
Next linkStorybook is the design system, not a mirror of it.

The chain doesn't stop at Slack. Once tokens flow on their own, the next link is the components themselves. A component changes in Figma, a token export triggers a PR. Engineering writes the story, designers review it visually in Chromatic. The pipeline builds and deploys: no manual step, no DevOps knowledge required.

01
Figma
Components · Variables
token export
→
02
Design Tokens
Style Dictionary · JSON → CSS/JS
git push
→
03
Storybook
Stories + MDX · Docs
CI/CD deploy
→
04
Production
Chromatic · Published URL
Designers
Write MDX docs + export tokens.
Engineers
Write stories + review PRs.
CI/CD
Automates the build + visual diff.
Results so far
What's done, what's left
Measured on what is already migrated
2.31:1 → AAA
contrast of the main button
the old green with white text, against lime on the new teal
11
composite type tokens
fed by 30 primitives. Before, type lived only as Figma styles
Live
token pipeline
Figma → Tokens Studio → GitHub → Slack

✓ Already migrated

  • ✓Color: teal functional, lime expressive, WCAG verified
  • ✓Typography: primitives + 11 composites
  • ✓First partner theme: 14 variables, tokenized end to end
  • ✓Repo + live pipeline (Figma → GitHub → Slack)

→ Left for the north

  • →Semantic dimensions: radius.button · space.card · size.control
  • →One single neutral: resolve brand vs Tailwind
  • →Tokens Studio Pro: automatic multi-file sync
  • →Dev consumption: Style Dictionary → CSS / code
Foundations migrated · closing dimensions, automatic sync and code consumption.
The North Star
One system.
From design to code,
no translation.

Completing the migration isn't tokenizing one more color. It's making the entire brand (color, type and dimensions) live in a single chain, and that chain reaching production on its own.

Where the system meets Genesis
From design system
to the Prototyper.

Genesis is engineering's work: Alejandro Alvarez, Joaquin Beceiro and Illan Cohn thought it up and built it. What the design system adds is the link. With foundations tokenized, Genesis builds on top of the system, with the same colors, type and components I design with: an idea goes in, an on-brand prototype comes out.

Input
Idea / ACRs
A problem, a hypothesis.
→
Built by engineering
Genesis
Reads the design system, converges into a prototype.
→
Output
Prototype
Clickable, on-brand, built on the system.
Engineering
Thought up and built Genesis.
Design system
The tokens and components Genesis builds from.
My day to day
Explore ideas, write ACRs through Ideate, prototype.
Projected · not measured yet
What this should unlock
Targets for when the loop closes

These are targets, not results. None of this is measured yet: it depends on Storybook and code consumption, which are still to come.

−80%
Handoff friction
Designers and engineers reference the same component documentation. No more "what did you mean by this" Slack threads.
1×
Source of truth
One canonical URL for every component, token and pattern. Storybook is the design system, not a mirror of it.
0
Manual deploys
The pipeline handles everything. Designers contribute, merge, and the system publishes automatically, with no DevOps knowledge needed.
∞
Design autonomy
Designers can update documentation, add usage examples, and refine guidelines without engineering bandwidth.
Real-time
Design-dev alignment
When a component changes in Figma, a token export triggers a PR. When engineering updates a story, designers review visually in Chromatic. The feedback loop that takes days today should complete in hours, with both teams working in the same system, at the same time.
Reflections
Reflection 01
The color was the symptom, not the problem
Fixing a hex value would have been fast. Building the infrastructure that makes every future change automatic is what actually scales.
Reflection 02
Fix the chain before the color
Tokens, chains, pipelines, repos: the invisible work that makes the next initiative trivial to start, not just prettier.
Reflection 03
AI only works on top of a real system
Engineering built Genesis. It can only produce on-brand, accessible screens because the token architecture gives it rules, not suggestions.
The core principle
The system already scales. Now we need to consume it.
Every token, every layer, every pipeline step exists to collapse the distance between an idea and a testable prototype, so SukuPay can move at the speed of its ambition.
AAA
Accessibility
1
Source of truth
3
Brands on one system
11
Type tokens
Live
Token pipeline
SukuPay · Prototyper · From zero to prototype · 2026
Sr Product Designer · Paula Elffman