Solar design system

Making sure all our products work in a similar way, whether it's the Bulb app and website, or internal tools.

Good design matters

At Bulb, we want anyone using our products to find what they're looking for and get things done as simply and quickly as possible. So we've put together all our best practices, tools and guidelines into one handy design system.

We've tried to make it useful for designers, developers and product managers alike. If you've got any suggestions for how we could make it better, let us know in #design-system on Slack. Or if you need help implementing designs, try #dev-frontend.

Finding your way around

Our design principles

These inform everything we do, and can be boiled down to three words: simple, robust and personal. It's also vital that our designs are accessible to all.

Styles

These determine how our designs look, such as the colour, typography and icons they use.

Components

A bit like LEGO, these are the tangible, reusable building blocks of our designs, such as buttons, page headers, form elements or tabs.

Patterns

These combine a few components to create sections you can reuse, like confirmation screens or promos.

Who we're designing for

We use styles differently depending on who we're designing for.

Non-members

A non-member is just a member we haven't met yet, to quote the poet Yeats (sort of). The Bulb website is full of information about our energy and products, so we want to entice anyone using it to join Bulb. We do that by using more white space, photography and illustration.

Members

Once they've joined Bulb, our members sometimes need to carry out specific tasks, like checking how much energy they've used or managing their payments. To make this as quick and easy as possible, the user interface (UI) for the Bulb account and app is more compact, with content displayed on cards on a blue background.

Bulberinos

People who work at Bulb are experts and often need quick access to a broad variety of information. So we design internal products and tools to be much tighter, smaller, and less descriptive.

We've tried to make it useful for designers, developers and product managers alike. If you've got any suggestions for how we could make it better, let us know in #design-system on Slack. Or if you need help implementing designs, try #dev-frontend.

Continue reading

Read our product design principles ⭢

Start developing ⭢

Learn about brand identity ⭢