Gitcoin Design System // Composable components for web3.
Context
Throughout the years, Gitcoin grew rapidly through the products that supported its flywheel, from our flagship Grants, web3 Hackathons and Bounties, to our educational arm Kernel.
Different engineering team were working on each product, and combined with our rapid feature-building cadence at the time, each product feels less and less coherent from each other.
Research
Through several rounds of discussions with our engineering, product, and design team, we found several issues:
Without a shared component library, each team tended to build their own implementations (e.g. buttons, forms). This means the same components might look slightly different across products.
Designers needed to repeatedly define the same specifications in each Figma project file.
Engineering, design, and product teams wanted a shared way to talk about components. Instead of “make this button’s padding 24px”, it would be easier to just say “use button-lg.”
Problem
How might we scale design implementations across different Gitcoin products?
Solution
Over several weeks, we dedicated time to start building our Gitcoin Design System. With our new design system, we slowly introduce the new components to our products, from atom level all the way up, ensuring consistency across products.
An improved Builder homepage, that shows users what they need to do to get started on their journey.
A colour palette with varying shades and examples of its usage.
Examples of form inputs with different states.
Examples of a card component with different sizes.
Some elements included in Gitcoin Design System: typography, colours, icons, buttons, form inputs.
