Banyan Infrastructure

Banyan Infrastructure is a B2B SaaS company that streamlines financing for renewable energy projects.

  • Design System

01. Testimonial

Our designer continues to think through ways to push our design system to such high quality, exceeding our hopes and teaching new possibilities. They are curious to learn, excited about ideas wherever they come from, collaborate well with each designer, and have a keen eye for detail and design sensibility.

The Challenge

Banyan Infrastructure is an end-to-end software platform, built to simplify, scale, and streamline sustainable infrastructure finance.

It empowers banks, lenders, and developers to accelerate deal transactions, optimize portfolio outcomes, and maximize liquidity, all while promoting sustainable climate solutions.

Banyan Infrastructure faced the challenge of needing a comprehensive design system for their rapidly expanding platform but lacked the capacity to tackle the project internally due to more urgent priorities. To address this, they decided to outsource the project to our design agency. We were given a tight deadline of three months to develop an entire design system that would ensure consistency, scalability, and alignment with Banyan's unique identity and goals.

LocationSan Francisco, California, United States
PlanPro
Funding$42M
Investors11

What is an
Atomic Design?

Tokens

Tokens are the most fundamental units in design, representing core values such as colors, fonts, spacing, and other properties. They serve as the building blocks that ensure consistency across a design system. These tokens are context-independent and named to convey a shared semantic meaning within a group of items.

Atoms

Atoms are the basic, indivisible units that maintain their integrity and meaning. They serve as the fundamental building blocks in the atomic design framework.

Molecules

Molecules are more complex structures made by combining atoms. They form interactive UI elements like form inputs, button sets, navigation bars, and dropdowns, enhancing functionality.

Organisms

Organisms are sophisticated UI components composed of various molecules and/or atoms, and sometimes other organisms. They represent distinct, functional sections within a user interface, playing a crucial role in the design system.

Templates

Templates act like wireframes in the atomic design process. They provide structural blueprints with placeholder elements, setting up the framework for page layouts before actual content is added.

Pages

Pages are the culmination of the atomic design process. Templates are populated with real content, resulting in fully realized web pages that users interact with. These pages represent the finished product, showcasing the design in its final form.

Our Process

We kicked off by breaking the UI down into smaller, reusable pieces using atomic design. The big task was making sure everything still felt consistent while allowing Banyan Infrastructure to maintain its unique identity. Atomic design made the development simpler and let us create unique styles. We made components that Banyan can easily adjust, combining simplicity with a personal touch to support sustainable infrastructure finance.

Typography

To create Banyan's design system, the Material Design method served as an inspiration, categorizing fonts into body, label, title, headline, and display. This structured approach ensured consistency and clarity across the platform. Approximately 5-6 sizes were added in each category, making the typography highly scalable to meet Banyan's diverse needs.

Colors

The existing color palette for Banyan Infrastructure was refined, organizing an excess of blue shades into a cohesive system. During this process, it was identified that a broader range of semantic colors was needed, and the design system was lacking two additional accent colors specifically for data visualization. Furthermore, all data colors were carefully tested to ensure they passed color blindness accessibility standards.

Colors Tokens

Color tokens were introduced into Twig, providing a standardized method for managing colors across the platform. This approach ensures consistency, simplifies the implementation process, and makes it easier to maintain and update the color scheme as needed.

Icons & Illustrations

“Font Awesome” was integrated into Twig design system to enhance visual appeal and functionality.

This comprehensive icon library ensured consistency and ease of use across applications, providing a familiar and visually cohesive experience for users.

Buttons

Custom buttons were created for Twig, Banyan's design system, and prototypes with hover effects were added to ensure interactive and responsive user experiences.

Inputs

Use the Input component to collect various data types like strings, numbers, dates, emails, and passwords. Multiple inputs can be combined for easy-to-use and aesthetically pleasing forms, maintaining visual consistency with the Twig design system.

Navigation

Seamless and streamlined navigation across Banyan's four applications is quite important to ensure an interconnected experience, so a 4-level tabbing system was essential. As designers, we created a solution that was both functional and visually appealing. This system clarified the hierarchy, making the overall user experience much smoother and more intuitive.

Tables

Tables are a huge part of Banyan's platform, so we developed a highly flexible and easy-to-use component to ensure seamless data management and presentation.

1 Component ⏐ 792 Variants

Products Page using table components

Charts

Charts play a vital role in Banyan's platform, so we designed a versatile, user-friendly component with hover states for all variants, ensuring smooth and interactive data visualization.

Other Components

Pagination

For Tables

Default

Steps

Horizontal Steps

Vertical Steps

Arrow Steps

Tooltip

Alerts

Thank you!

See more

Cheez
Cheez
Share and receive pictures Consumer App / Early Stage
Cheez
SpotLyfe
SpotLyfe
Work-Life Awareness App Wellness / Early Stage
SpotLyfe
Vouch
Vouch
Job posting & application management for creators Consumer App / Early Stage
Vouch
Full Harvest MKT
Full Harvest MKT
Marketplace for surplus produce to reduce food waste Climate Tech / Late Stage
Full Harvest MKT
Full Harvest DS
Full Harvest DS
Marketplace for surplus produce to reduce food waste Climate Tech / Late Stage
Full Harvest DS
Atropos Health
Atropos Health
Real-world evidence for clinical decisions Healthcare / AI / Early Stage
Atropos Health
Mesh ID
Mesh ID
Business entity identity verification Security / Early Stage
Mesh ID
Mesh Marketing
Business entity identity verification Security / Early Stage
Mesh Marketing
Eleanor Health
Eleanor Health
Digital therapeutics and mental health Healthcare / Early Stage
Eleanor Health
Volley Automation
Volley Automation
Artificial intelligence and robotics Mobile / Dashboard / White Label Products
Volley Automation
The Well
The Well
Modern membership-based wallness club Wellness / Early Stage
The Well
Avataar
AI-led story telling vision platform AI / Late Stage
Avataar
Navengage
Navengage
A modern mobile app focused on student engagement Education / Early Stage
Navengage
OXIO
OXIO
Telecom-as-a-service platform Consumer App / Early Stage
OXIO
Big Health
Big Health
Digital therapeutics and mental health Questionnaire / Dashboard / Personalization
Big Health
OSlash
OSlash
Intuitive search tool for the workplace UX / Dashboard / App Design
OSlash
Woven
Woven
Calendar and event scheduling UX / Dashboard / App Design
Woven
NextGem
NextGem
Card collecting app UX / Dashboard / App Design
NextGem
Altoida
Altoida
Augmented Reality (AR) Simplification / App Design
Altoida
JupiterOne
JupiterOne
Security reporting and analysis UX / Dashboard / App Design
JupiterOne
Sojourn
Sojourn
Grocery shopping experience with AR technology UX / Dashboard / App Design
Sojourn
SOUQ
SOUQ
Leverage blockchain benefits Launch Beta / UI / App Design
SOUQ
Socure
Socure
Digital identity verification Simplification / App Design
Socure
Streamzy
Streamzy
Intuitive movie-matching technology UX / Dashboard / App Design
Streamzy
Anno.ai
Anno.ai
Scheduling app for the US Air Force UX / Dashboard / App Design
Anno.ai
Purespectrum
Purespectrum
Card collecting app UX / Dashboard / App Design
Purespectrum