New Biome logo

[ematipico]

Hi, Biomers!

I want to open this discussion to talk about a possible new logo for Biome!

I have been reading about some discontent with the current logo and agree with a few of them. Some people already started to propose some alternatives, and I would like to open a discussion in case anyone would like to propose something different or better.

Here's some pointers:

• we have a repository that contains all our assets. That should give you an idea of the number/type of assets we would need;
• the slogan "Toolchain of the web" should stay in some version of the new logo;
• I like orange/yellow, but it's a personal preference, and feel free to be creative;
• We originally liked the letter as a logo, but I'm no designer, so I am sure there are better patterns out there that I am not aware of;

Please submit your proposal by creating a new comment so we can start the discussion by replying to that comment.

Once (if) we choose the new logo, the creator will have their social contacts highlighted in the resources repository and the credits section of the website with its own heading.

[arb85]

I don't know if I’ve missed it, but there is a document or a text explaining why you chose the name Biome?

Maybe it can help in designing the logo and the icon..

[stephwestgarth]

I hope to be corrected if I'm wrong, the blog post essentially said because it's a play on "bis" (meaning 2/again) and "rome", aka Biome is Rome 2. https://biomejs.dev/blog/annoucing-biome

[arb85]

Thank you @stephwestgarth !!

[natemoo-re]

I love that "Biome" is also the word for a self-contained ecosystem, which exactly is what the project aims to be!

[stephwestgarth]

I have no art skills but I wonder if there's something we could do around pruning shears etc, seeing as we're linting and formatting code like someone would prune and tidy a garden to help it thrive

[ematipico]

You might be onto something. Sometimes, I refer to Biome as a tool to maintain your projects "healthy".

[Conaclos]

Some basic guidelines I am thinking about:

• The logo should be compatible with dark and light themes (or provide a version for each one)
• Sources should be in SVG and, if possible, human-readable and modifiable

[natemoo-re]

I made this one as an exploration, but I got some feedback that it looked too much like a crypto project (which, tbh, is totally fair.)

I was hoping to evoke the idea of the JS logo inside of a "Biome" or ecosystem, but this approach was probably too minimalistic.

IMO the existing black + yellow (or red) branding would be good to keep for continuity's sake.

[arb85]

Really like the "ecosystem" idea and the orange/yellow gradient

[o-t-w]

Which typeface is that using? Looks really nice, but yes, reminds me of a bank or crypto for some reason.

[natemoo-re]

Typeface is MD Primer by Mass-Driver. Big fan!

[arb85]

My two cents..
(just kidding, only some reflections on the meaning)

I'm not convinced with the result, but maybe this experiment can help to define the field..

Meaning

Case

Components

"B" experiment

Payoff

Light / Dark

[ematipico]

Thank you for the submission!

Not a big fan of this one, it would be great if we could move over the Rome history, even though initially Biome comes from it.

[jamiebuilds]

First, get rid of the yellow. Yellow sucks to work into your brand because its hard to create enough contrast and it tends to fall into the background. Yellow is also too much of the same as Rome. And you should definitely try to be something new instead of forever holding onto Rome as a history. The only other reason for yellow is the JS logo and Biome is not just a JS tool so why would you link it that strongly.

Second, Biome is a rich word, and its link to what the tool is is obvious, I would embrace its more natural meaning to give the 'brand' some life (pun intended). I would look for inspiration in like space domes for sort of self-contained biomes. Imagine a little bubble dome with water and a tropical island, or a lush rainforest, or a tiny icy wonderland. What could that look like as a logo? Maybe could even have different variations on it based on the sub-tool.

[Conaclos]

Some tries:

[cdvillard]

I think this could have some legs. I see these as stylistic versions of a more generic version that highlights the reflection around the orb, some kind of base, and some kind of island feature.

[Conaclos]

I tried to create a custom logo inspired by the lighting thunder emoji. This could be improved (in particular the interior shape).

[ematipico]

It reminds me of the The Flash hero

[j4k0xb]

looks almost the same as the babel logo

[pijusz]

I'm always a big fan of using animals for any kind of new logo. Since initially projects don't stand on their own from beginning, unlike old brands/institutions.


Silly Capitoline Wolf it is.

Sidenote: this was sketched in under an hour, if there is any interest in the design idea itself. We can start improving it. This is pretty much 'Spaghetti Design'. If Monochrome will look good, there won't be any issues adding colors. Also Vector itself needs lots of improvement, also maybe we need a serious wolf? Although love direction that Deno has.

[natemoo-re]

Another attempt

[lilnasy]

Quick exploration branch, I'm gonna try to make vector logos based on this vibe later.

pretend it isnt a heavily used chopping board in my backyard

[doodlemarks]

Hopefully not too late for this!

I incorporated the suggested colors but used them more sparingly only within the icon itself. You can see how this works both on dark and light backgrounds. The type is strong enough to use isolated as well but I would suggest keeping them together for most applications.

[ugudango]

This looks really appealing, but it might not convey the idea of a "biome" that well. I like the sparkle, it adds to the "tech magic" feeling while also being geometrically fitting, but the "island in a globe" idea might be worth exploring more literally. 🤔

[doodlemarks]

For branding the metaphor doesn't necessarily need to hit you over the head to emphasize an idea.

But I would say the shape of the icon does clearly represent a space within an orb which to me is right on for a biome.

[lilnasy]

kinda reminds me of starlight

[doodlemarks]

@lilnasy surprised this came to mind! must be the inner shape, or you have been staring at Starlight too long ;)

[lilnasy]

Both! Although I couldn't put my finger on the inner shape until I put them side by side.

[lilnasy]

Going off of HTML, CSS, and JS logo colors.

[travislwatson]

The combo here between the leaves/petals and HTML/CSS/JS is fantastic. I'd love to see this same idea but with solid petals/leaves, using negative space for the boundary between leaves. I think solid leaves would scale down much better. The pathing on this one is very thin.

I am not a designer, but I did navigate to photopea.com last night:

[lilnasy]

Good idea!

Here's rendered.

[solisjoaquin]

This is a summary of my proposal

If you didn't notice :) I used circles and those colors to represent life and the ecosystem, but it is also the shape of a gladiator's head for Rome's past.

This is my proposal using the current color palette of Biome

These are discarded ideas but useful for finding the final result:

[solisjoaquin]

This is a version with the slogan.

(All my drafts are made with Figma and are not pixel-perfect)

[ugudango]

When scaling this down the orange dot looks awkward, since it's too small and doesn't necessarily add to the design, otherwise the direction seems interesting!

[cdvillard]

I think there's a question of whether this should continue to associate with Rome. Not to dismiss its history, but to solidify a new, separate identity for Biome as a whole.

[nhedger]

I'll give it a try.

[amorriscode]

Well, I'm definitely not a designer but this was too much fun to pass up. It's not pixel perfect but good enough to get the idea across. 😅

[angelnext]

Wanted to give it a little try, FAR from perfect, but it was fun to make.

[ugudango]

I'm just adding what I sent on discord.

This is not what I would ship necessarily - it's just the main idea (there's still some spacings to get right).

I think I simplified it nicely, if this direction gains some traction I'll add the .svg files so we can tweak it together.

[ematipico]

I like this proposal. I wonder, could you make one with the slogan, please?

[ugudango]

Sure thing. If we were to go with this, I'd make a complete media kit (profile picture, banners, logo variants, with/without slogan, etc.)

When I get time this evening I'll make one with the slogan as well.

[doodlemarks]

I get iceberg or environmental cleanup company vibes from this.

[doodlemarks]

Modified this mark a bit, chose a softer typeface for the logo type, and updated the palette:

[ugudango]

Nice! After having a try myself, I realised that the "biome" concept is so incredibly broad that it's hard to capture it in any meaningful way without adding too much detail.

Was there any particular reason for abandoning the sparkle? I think it would've looked nice too, if filled.

[lilnasy]

Love it!

[denbezrukov]

Firstly, I must say that I really like the idea behind the new logo! I was wondering if we could perhaps consider trying a version without the gradient color? Also, incorporating the yellow from our original logo might be a great way to maintain a connection to our brand's roots. Just a thought! Thank you for the wonderful design effort.

[cdvillard]

I'm not much of designer or illustrator, but I had an idea that I wanted to throw out there. I know you're looking for full proposals, but I hope you'll accept this as a free idea that an illustrator can maybe run with. Also, I work best in pencil and paper, so here we go.

The TL;DR on this is borrowing from the idea of tiles from real-time strategy games like Civilization or Settlers of Catan, where you work to develop cities or resources in turn-based, tile-focused gameplay. A blank version of this is presented below, containing a bare "tile" save for a simple building or structure, altogether representing a singular "biome." This could act as a more corporate version of the logo for more serious matters.

That said, this design is flexible enough that be elevated for marketing purposes to represent all kinds of different "biomes," communicating the various ways we build out development environments. For example, if Biome meetups or conferences become a thing, the base logo can be modified similar to what Smashing Magazine does with their mascot for various events.

The logo can be as subtle or as zany as the designer can imagine, as long as it's within the tile. Even then, it can be further extended, same as capital-B Biome.

Why not a sphere, or terrarium, or atom, or nature theme?

You might not have asked, but I think we need to change it up a little, and this is a start. React's logo is very much atom-inspired, as was Github's former IDE project. Terrariums were an idea I'm actually fond of, but I recall Basecamp's former logo had a very similar feel, and it makes it harder to come up with a simple corporate mark to use when Biome must represent itself as an organization. And I don't feel that nature in itself is representative of a "biome." Technically, a city can considered a self-sustained ecosystem, and if we're being honest, our offices as well.

Ultimately, this is just an idea for anyone who wants to pick it up and run with it. Like I said, I'm not a designer.

[ugudango]

I have attempted some stacked-type designs, but to no avail. I came up with the idea of two-level environment, basically symbolizing variety and, well... two biomes. If I make it obvious enough that they're biomes, they're too detailed. If I make them recognizable and simple, you can't really tell what you're looking at anymore.

Magazine mascots work well with this type of thing. I think this is just an element of tech-stuff design - aiming for a simple stamp - in your face, simple kind of thing.

Maybe someone can do something with this tiled idea, but my attempts hasn't yielded anything cool.

[cdvillard]

I would encourage you to try again and not treat the sketches above as a template, but more of a mode. The base is supposed to be a surface upon which a biome sits, instead of multiple biomes in a single illustration. So for example, you can think of it as a cross-section of soil or flooring, upon which you'd put a house or apartment.

The base can also be expanded some. So instead of a rough 36 square units, it can be 42 or 81 if that'll give it more space. But ultimately, the abstract version of that would be the logo; everything else is literally creative fodder.

[ugudango]

To add to the discussion, rather than just submit my latest additions, I think we need to focus on the following things.

Making a logo that:

1. Looks good big & small
2. Fits the current trends
3. Is a good icon
4. Has a solid (and free for commercial use) logotype

We will probably not be the next revolutionary logo designers for this, but we don't need to be. As long as we make something that respects the fundamentals and is commonly agreed-upon as pretty, I'd say we're good.

With that in mind, I made a helper sheet that you can find here:

DOWNLOAD HELPER SHEET (SVG)

Here's a **preview** of what the sheet looks like:

---

With that out of the way, here's my updated submission:

[Conaclos]

Could you try a pink touch for the island?

[ematipico]

Lovely! I like it 🤩

[doodlemarks]

One last idea I just had for a different mark:

Similarish more abstract take as posts before for a "biome". Included examples of this scaled at different resolutions to show how it works even at a small size.

[solisjoaquin]

It looks like the Instagram logo 🤔

[Conaclos]

Based on the ideas of @natemoo-re and @ugudango, I made some variations:

[ematipico]

We're happy to announce that the team @biomejs/core-contributors has decided, and chose @ugudango 's logo!

We will contact @ugudango privately to get them involved in the project, and we will slowly start working towards rebranding the website/organisation.

Congrats @ugudango and thank you to everyone who spent time proposing new logos! ❤️

[ematipico]

@ugudango feel free to reach out to me on Discord or Twitter :)

[Conaclos]

We now have a new logo ❤️ Thanks to everyone to provide feedbacks and proposals :)