It may seems kinda silly worrying so much about colors in your web applications… but, actually, it is not.
Concept
The first things that came into my mind when I started thinking about how to create a new environment for developers to share their work was making it reflect all of the aspects of the app. And, as you may know, we first buy something by its visual, so I need to give this power to the developers.
If you are in touch with the posts I made previously on X (Twitter ???), you may have recognized that Sig’s icon change very often, and these changes suggest that we are always trying to reflect something with different brandings.
Icon color palette
I like very much to play with colors in order to make our branding always look sharp, and one of my favorite aspects of it is the color gradients.
As you can see in this image below, I used some green tones and pink colors in order to create this (very attractive) blur. The choose of the colors came from some random colors I chose on Figma and it came out pretty well by the way. This array of colors and the vibrancy of it all combined can make you see that Biome is open to help any colors of your projects or branding, your icon must be colorful if we want to play with colors.
Now messing with a different concept, in the icon below I used only monochrome tones in order to make Biome look gray and dark so you can make it colorful with your project’s theme, and this will be showed later on with some screens from Biome.
Let us do a deep dive and understand of Biome's colors
After knowing how I think about colors applied to branding, let me show you how my ideas are applied on screens and interfaces.
Starting with the deploy screen, I used this wave gradient background overlayed with a repository selector based on dark themes with a blurred backdrop so the colors of the background may invade the darkness of the outer component, resulting in this delightful composition.
The login page is also something me and my team are so proud of. We built this screen in public and we actually created a poll on Twitter so other developers could hell us decide (it was a really cool experience for us, and it certainly will become a regular practice). The horizontal composition and the color gradients make our Login page have really screaming colors but at the same time be really smooth (you can create some of these effects overlapping colors, creating gradients to release some of the color vibrancy with a darker one), and this is something I learned with some practice but mainly inspiring our screens on other startup’s ui and visual identity.
And now, the best part of all, our project page.
Our project page was something very iterated and planned in order to make our own branding versatile so you can make it yours.
Starting with the theming. You can choose a primary color, a secondary color and a helper color to apply in your project. Once you choose the three colors you will notice that the app is dynamically updated to your colors, from the background to the programming language images, so everything will be harmonious.
As you can see on this image above, these green-based colors are the Biome default theme, and you can change them accordingly to your application colors. But, I created something that can easily help your life being easier. At Biome, you can upload your application icon and I will gather the color palette from it.
Let me show it to you:
With Biome's color gathering you can easily be able to have the EXACT same colors you used while developing your application or branding, once you can manually pick the hex code of the colors.
Finally
That is it. Basically this is how I understand the science of the colors and themes used on Biome. You can reach me Twitter and also checkout out Sig's Twitter.
Subscribe and be a beta-tester of Biome
You can go to our landing page clicking here.
Top comments (0)