Some brainstorming about how to theme a marketplace
Tags: ui, react, tailwindcss
Published: 2023-10-03 14:11:25

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](https://twitter.com/sigcoding) 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.


![Sig colorful icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08atzu8fobm1gwjbrgyf.jpeg)

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.

![Sig monochrome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av3j3s3p5680ch626scz.jpeg)

## 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.

![Biome Deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc3ygv6so0i8nhcd97gh.jpeg)

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.

![Login page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jihlsb27k9o7q370myf1.png)

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. 


![Default color palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/coh00j3hayorvl9teyl1.png)

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:


![Batman Icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgsr3t9bbf4veqmdi3zc.png)


![Green Galaxy Icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5k6x9wpyvcjygffx24gi.png)

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.

![Hex picker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v68rt9h8n3a9k6p98qn3.png)

## 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](https://twitter.com/ducaswtf) and also checkout out [Sig's Twitter](https://twitter.com/sigcoding).

## Subscribe and be a beta-tester of Biome

You can go to our landing page clicking [here](https://biome.sigcoding.com).