Zero to Rayo
Zero to Rayo
Zero to Rayo
Zero to Rayo
Making Design System for Developers
Making Design System for Developers
Making Design System for Developers
Making Design System for Developers
Project overview
When I joined Rayo (previously known as The Dapp List), the team had no design system in place. Every time a new feature was designed, the process started completely from scratch, leading to inconsistency and extra effort. There was no awareness about design systems or component libraries, which made collaboration even harder. My challenge was to build a system that was simple, easy to understand, and developer-friendly so engineers could quickly adopt it and build with confidence.
When I joined Rayo (previously known as The Dapp List), the team had no design system in place. Every time a new feature was designed, the process started completely from scratch, leading to inconsistency and extra effort. There was no awareness about design systems or component libraries, which made collaboration even harder. My challenge was to build a system that was simple, easy to understand, and developer-friendly so engineers could quickly adopt it and build with confidence.
About Rayo Platform
About Rayo Platform
About Rayo Platform
Rayo is a web3 projects discovery platform driven by community curation. With over 99K users and 5 million+ votes, it’s where early attention takes shape. Users submit projects, vote, build profiles, and engage with new and emerging projects in the space.
Rayo is a web3 projects discovery platform driven by community curation. With over 99K users and 5 million+ votes, it’s where early attention takes shape. Users submit projects, vote, build profiles, and engage with new and emerging projects in the space.
Rayo is a web3 projects discovery platform driven by community curation. With over 99K users and 5 million+ votes, it’s where early attention takes shape. Users submit projects, vote, build profiles, and engage with new and emerging projects in the space.
Rayo is a web3 projects discovery platform driven by community curation. With over 99K users and 5 million+ votes, it’s where early attention takes shape. Users submit projects, vote, build profiles, and engage with new and emerging projects in the space.
Here’s what Rayo looked like back then
without design system
Here’s what Rayo looked like back then without design system
Here’s what Rayo looked like back then without design system
The old platform did its job, but it never really felt complete. Most of the interface was built directly by developers who were focused on getting features out the door as quickly as possible. While that helped the product move fast in the early days, it also meant design was never treated as a structured system. The result was an experience that felt inconsistent and sometimes clunky to use. Buttons looked different across pages, forms were rebuilt over and over, and small design variations started piling up with every new feature. Without a single source of truth, the product slowly became harder to maintain.
The old platform did its job, but it never really felt complete. Most of the interface was built directly by developers who were focused on getting features out the door as quickly as possible. While that helped the product move fast in the early days, it also meant design was never treated as a structured system. The result was an experience that felt inconsistent and sometimes clunky to use. Buttons looked different across pages, forms were rebuilt over and over, and small design variations started piling up with every new feature. Without a single source of truth, the product slowly became harder to maintain.
Research & Competitive Analysis
Research & Competitive Analysis
Research & Competitive Analysis
Sometimes, all it takes is a small spark to drive a big change. When I shared the recurring design challenges with the team, the founders quickly recognized the long-term impact and agreed to invest in building a complete design system for Rayo. This set the stage for my research into how the best systems in the industry are structured and adopted.
Sometimes, all it takes is a small spark to drive a big change. When I shared the recurring design challenges with the team, the founders quickly recognized the long-term impact and agreed to invest in building a complete design system for Rayo. This set the stage for my research into how the best systems in the industry are structured and adopted.
Sometimes, all it takes is a small spark to drive a big change. When I shared the recurring design challenges with the team, the founders quickly recognized the long-term impact and agreed to invest in building a complete design system for Rayo. This set the stage for my research into how the best systems in the industry are structured and adopted.
To ground our approach, I conducted a competitive analysis of established design systems that are widely used and trusted by developers including Align UI, Tailwind UI, and Vercel Design System. Each of these systems demonstrated how consistency, clarity, and scalability could empower both designers and engineers to work faster and more efficiently.
To ground our approach, I conducted a competitive analysis of established design systems that are widely used and trusted by developers including Align UI, Tailwind UI, and Vercel Design System. Each of these systems demonstrated how consistency, clarity, and scalability could empower both designers and engineers to work faster and more efficiently.
To ground our approach, I conducted a competitive analysis of established design systems that are widely used and trusted by developers including Align UI, Tailwind UI, and Vercel Design System. Each of these systems demonstrated how consistency, clarity, and scalability could empower both designers and engineers to work faster and more efficiently.
Consistent User Experiences
Consistent User Experiences
Consistent User Experiences
Effortless Collaboration
Effortless Collaboration
Effortless Collaboration
Robust Components
Robust Components
Robust Components
Scalable Framework
Scalable Framework
Scalable Framework
Define Pillars of
Design System
Define Pillars of Design System
Define Pillars of Design System
Define Pillars of Design System
Execution Phase
As a senior product designer, my responsibility went beyond just making things look good,I had to ensure the design system could actually work across different use-cases, and future needs. That’s where the execution phase began: translating vision into a scalable system.
As a senior product designer, my responsibility went beyond just making things look good,I had to ensure the design system could actually work across different use-cases, and future needs. That’s where the execution phase began: translating vision into a scalable system.
To bring structure, I leaned on the Atomic Design methodology by Brad Frost, which breaks interfaces into small, reusable parts that gradually build up into full-fledged experiences. Instead of designing isolated screens, we were now building blocks that could be combined in countless ways.
To bring structure, I leaned on the Atomic Design methodology by Brad Frost, which breaks interfaces into small, reusable parts that gradually build up into full-fledged experiences. Instead of designing isolated screens, we were now building blocks that could be combined in countless ways.
Building the Foundations
I started with the smallest building blocks the “atoms” which in our case were design tokens like colors, typography, spacing etc. These became the DNA of our system, ensuring every button, card, or screen felt consistent and connected.
I started with the smallest building blocks the “atoms” which in our case were design tokens like colors, typography, spacing etc. These became the DNA of our system, ensuring every button, card, or screen felt consistent and connected.
Colours
Colours
Colours
Colour is more than just decoration it’s personality, hierarchy, mood, and meaning all rolled together. At Rayo, we already had our core brand colours, but UI work required more depth: subtle tints & shades.
Colour is more than just decoration it’s personality, hierarchy, mood, and meaning all rolled together. At Rayo, we already had our core brand colours, but UI work required more depth: subtle tints & shades.
Colour is more than just decoration it’s personality, hierarchy, mood, and meaning all rolled together. At Rayo, we already had our core brand colours, but UI work required more depth: subtle tints & shades.
So, I started by grouping our palette into buckets, each with 9 graduated shades via HSL adjustments. Softest light through to deeper tones. But what really made it usable was combining primitive tokens (raw colour values) with semantic tokens (meaningful names like content-link, background-primary, disabled-text). That way, anyone like designer or dev could understand why a colour is used, not just which one.
So, I started by grouping our palette into buckets, each with 9 graduated shades via HSL adjustments. Softest light through to deeper tones. But what really made it usable was combining primitive tokens (raw colour values) with semantic tokens (meaningful names like content-link, background-primary, disabled-text). That way, anyone like designer or dev could understand why a colour is used, not just which one.
So, I started by grouping our palette into buckets, each with 9 graduated shades via HSL adjustments. Softest light through to deeper tones. But what really made it usable was combining primitive tokens (raw colour values) with semantic tokens (meaningful names like content-link, background-primary, disabled-text). That way, anyone like designer or dev could understand why a colour is used, not just which one.
Typography & Rhythm
After colours, typography was my next obsession. Good type does invisible work guiding your eye, setting tone, making everything feel ordered. For Rayo, I wanted something modern, clean, and with personality, but also something fast on the web. I chose Jakarta & Inter, because it balances neutrality with readability, and feels right in UI-heavy products.
After colours, typography was my next obsession. Good type does invisible work guiding your eye, setting tone, making everything feel ordered. For Rayo, I wanted something modern, clean, and with personality, but also something fast on the web. I chose Jakarta & Inter, because it balances neutrality with readability, and feels right in UI-heavy products.
I standardized the typography into clear categories: display, headings, body, and label sizes, ensuring a consistent visual rhythm across the platform. Each size is tokenized with specific values for font size, line height, and letter spacing, making it simple for both designers and developers to apply consistently.
I standardized the typography into clear categories: display, headings, body, and label sizes, ensuring a consistent visual rhythm across the platform. Each size is tokenized with specific values for font size, line height, and letter spacing, making it simple for both designers and developers to apply consistently.
Spacing
If colours and type bring personality, spacing is what gives a design breathing room. Without it, even the best UI can feel cramped or chaotic. With it, everything suddenly feels calm, clear, and effortless to scan. To bring that consistency, I introduced the 4-point spacing system. It’s simple: start with a base unit of 4px and scale it up (8, 12, 16, 20…). Whether it’s padding inside a button, gaps between cards, or margins around sections, the same logic applies everywhere.
The real magic? Developers love it too. They can almost “predict” what the spacing will be without checking Figma every time which made collaboration smooth and fast.
If colours and type bring personality, spacing is what gives a design breathing room. Without it, even the best UI can feel cramped or chaotic. With it, everything suddenly feels calm, clear, and effortless to scan. To bring that consistency, I introduced the 4-point spacing system. It’s simple: start with a base unit of 4px and scale it up (8, 12, 16, 20…). Whether it’s padding inside a button, gaps between cards, or margins around sections, the same logic applies everywhere.
The real magic? Developers love it too. They can almost “predict” what the spacing will be without checking Figma every time which made collaboration smooth and fast.
Component Library
Once the foundations were solid, I moved on to building the pieces that would actually shape the product: components. Components enable designers to work consistently and used repeatedly throughout product development. While they can be categorized as either Molecules or Organisms, the difference between the two is often subtle.
I made sure every component met a clear checklist while building it.
Once the foundations were solid, I moved on to building the pieces that would actually shape the product: components. Components enable designers to work consistently and used repeatedly throughout product development. While they can be categorized as either Molecules or Organisms, the difference between the two is often subtle.
I made sure every component met a clear checklist while building it.
Ease of use: Simple to drop in, simple to adapt.
Consistency: Behaves the same way across the product.
Customization & flexibility: Can handle edge cases without breaking.
Ease of use: Simple to drop in, simple to adapt.
Consistency: Behaves the same way across the product.
Customization & flexibility: Can handle edge cases without breaking.
My background in development turned out to be a huge advantage here. I worked closely with the engineering team to make sure every component translated into pixel-perfect UI code. Because the system was so well-structured, developers didn’t face blockers or inconsistencies everything fit together seamlessly.
My background in development turned out to be a huge advantage here. I worked closely with the engineering team to make sure every component translated into pixel-perfect UI code. Because the system was so well-structured, developers didn’t face blockers or inconsistencies everything fit together seamlessly.
Pages & Features
Where It All Comes Together
Foundations and components are great, but the real magic happens when they come together to build actual features. Once we had the building blocks in place, we started assembling them into complete pages like voting flows, project submissions, profiles. What used to take weeks of one-off design decisions now became faster, cleaner, and far more consistent.
Foundations and components are great, but the real magic happens when they come together to build actual features. Once we had the building blocks in place, we started assembling them into complete pages like voting flows, project submissions, profiles. What used to take weeks of one-off design decisions now became faster, cleaner, and far more consistent.
But the truth is, a design system is never “finished.” It’s a living product that evolves alongside the platform. With every new feature we shipped, we refined, optimized, and expanded the system version after version.
That’s how we built what we proudly call a Design System for Engineers. From scratch to scale, we went from Zero to Rayo.
But the truth is, a design system is never “finished.” It’s a living product that evolves alongside the platform. With every new feature we shipped, we refined, optimized, and expanded the system version after version.
That’s how we built what we proudly call a Design System for Engineers. From scratch to scale, we went from Zero to Rayo.
But the truth is, a design system is never “finished.” It’s a living product that evolves alongside the platform. With every new feature we shipped, we refined, optimized, and expanded the system version after version.
That’s how we built what we proudly call a Design System for Engineers. From scratch to scale, we went from Zero to Rayo.
Want to get in touch? I'd love to connect with you!
Want to get in touch? I'd love to connect with you!