Hire UsEigenLayer is a platform for developers using Ethereum. It helps make software safe, supports Ethereum's growth, and makes it easier to facilitate the testing and implementation of new ideas.
The Forge team created a powerful toolkit for creating beautiful and user-friendly applications on the EigenLayer platform. With the increasing popularity of EigenLayer and its role in revolutionizing Ethereum, there was need for cohesive and intuitive user experiences across the ecosystem.This design system provides a comprehensive set of design guidelines, components, and resources that empower developers and designers to build consistent interfaces that align with EigenLayer’s brand standards.
Design Systems, Design Tokens, Product Design, UX, Product Strategy
Design System, Token Library, Component Library, Design Guidelines and Documentation, Product Design
We needed to create a design system that aligned with the existing brand. The visual direction of the brand utilized elements of Brutalism with high contrasting colors, typography and scale. We wanted to translate this into the product, but maintaining usability and responsiveness, keeping UX at the forefront of decision making.
We had the added challenge of managing both light and dark backgrounds within the same system. Typically you’ll find that systems are either in a light and dark mode, but this brands allows for a variety of background colors.
We needed to incorporate high contrast in terms of scale for both typography and color to align with the existing brand guidelines. The team achieved this by doing the following:
The team meticulously documents all foundational styles and their design token names and values for both global values and semantic values. Foundation styles include color primitives, color semantic usage, type, sizing, grids, border radius, border width, spacing, shadows, and effects.
Components are aligned with code. We want to avoid users breaking these components so that product features can get build accurately and quickly so it’s a must that they are easy-to-use and flexible enough to account for future use cases. We solve for this by designing components atomically and are built together to create more complex components, much like LEGO blocks. We also consider the UX of the design panel within Figma’s UI.
We created a data visual component that allows designers to adjust information on each axis, how many data points are being shows, and what type of data visual they might need. They can even adjust the hover data point height to hit exactly where it needs to without breaking the component. Of course, each breakpoint is also included.
When using large typography it was important to showcase how it would translate from desktop down to mobile. Documenting a decrease in size at each breakpoint where needed. The team also needed to illustrated how other various components would collapse such as tabs turning into dropdown selections.
Our comprehensive documentation and guidelines foster collaboration between teams, facilitating a shared understanding of how components should be utilized. Beyond individual components, we also provide well-defined UX patterns and templates, empowering you to create cohesive and efficient user experiences.
A variety of views were designed to stress test the design system and to make sure we were accounting for all custom components.
Webprints is a startup that aims to build a vibrant 3D printing community through their social platform, allowing users to easily discover, download, and upload 3D projects for seamless sharing and printing. The Forge team set out to create a design system that enables rapid development of new features, themes, and even new products or brands, without compromising consistency.
Learn how we built the design system