Berachain

Building and scaling Berachain’s design system for mainnet launch

Web3

Design

Our Impact

We partnered with Berachain to define and implement a design system for their featured dapps ahead of their highly anticipated launch.

Like what you see? Let’s chat about your next project.

Let's Talk

Helped define Berachain’s core design system and approach to building products
Transformed their designs into powerful components to unify branding and accelerate engineering
Polished and updated designs across foundational dapps (decentralized apps) including BeraHub

Berachain on mainnet was one of the year’s biggest and most-anticipated crypto launches.

Berachain is an EVM-identical L1 blockchain powered by Proof of Liquidity (PoL), aligning security and liquidity at the protocol level. Its PoL consensus mechanism overcomes the asset lockup issue associated with Proof of Stake (PoS) blockchains like Ethereum and Solana.

THE VISION

Berachain had raised $100M in their latest funding round and built a loyal community throughout its testnet. They had grown fast and scrappily; now it was time to take a step back and ensure that their ecosystem of dapps was ready to scale to mainnet. They wanted to establish a core design system before launch.

WHY LAZER?

We had collaborated with the Berachain team before, creating a component library for third-party developers to build on Berachain. We’ve also supercharged web3 projects like Credit Coop and Scarab Tools with our design and branding expertise. We were the ideal partner to turn their existing brand into a system that their designers and engineers could easily apply and maintain throughout their product roadmap.

Visit Website

platform

Web
Figma

Expertise

UI/UX Design

Stage

Series B

Investors

Brevan Howard Digital
Framework Ventures
Polychain Capital
Samsung Next
Hack VC
Tribe Capital

Approach

Establishing a scalable design system

We helped the Berachain team distill their design philosophy and style into a core design system.

To start, we audited their dapp design and engineering processes to identify opportunities to unify and systematize their design style.

We condensed all of their visual assets, including logos, icons, colours, typography, and more, into a library of scalable components and defined how to use them in Berachain’s vibrant style.

Approach

Leveraging the power of variables

We harnessed Figma's latest variables system to simplify themes on all the Berachain dapps.

This makes it easier for designers and engineers to modify and update existing dapps, as well as quickly produce future Berachain products. Every part of their dapps are organized and refer back to the design system as the single source of truth.

APPROACH

Centralizing dapps and features in Berahub

BeraHub is the central platform for managing BGT (Berachain Governance Token) and accessing Berachain liquidity through BEX, their native decentralized exchange.

We componentized the entire BeraHub platform so that every single design element connects to the core design system and can be easily reused and modified.

The individual pages for Swap, Pools, and Vaults were originally their own dapps; the designs were merged and updated by the Berachain design team to create BeraHub.

We helped polish the designs and implemented the new design system across these pages for upcoming platform updates.

Approach

Balancing efficient builds and intuitive UX

On the Vaults page, we did a lot of iteration with Berachain’s UX designers, who were looking to make the flow simpler for users, and their engineers, who had the opportunity to utilize existing infrastructure.

Given our web3 experience, we managed to easily navigate towards a solution and were able to design it to be the best of both worlds: fast for the engineers to build and easy for users to navigate.

APPROACH

Crafting a new look for Boyco

While we focused on developing and scaling Berachain’s design system, we also extended our support to other Berachain priorities as needed.

When Boyco needed design help, we dove into the wireframes and made sure we fully understood the intended functionalities. We quickly created a brand new design with improved UX flow. This new direction got immediate buy-in from the Berachain team and their stakeholders, allowing them to double-down on the project.

We delivered a sophisticated design system that unifies Berachain’s diverse ecosystem and empowers them to keep scaling.

Collaborating closely with their teams, especially in the final sprint of the project, was an exciting opportunity to help elevate and polish such a distinct and influential web3 brand. We ensured it remained true to Berachain’s unique culture — fun, playful, and memorable.

Now this advanced system is a solid foundation for their continued growth, ensuring a consistent and high-quality user experience across their products.

Ready to make an impact?

Let's Talk