A new look for Fusion

[dphfox]

For a library that presents a futuristic development workflow, Fusion's brand identity has historically been... well, rather same-y? It's not that it was a bad design or not recognisable; it didn't seem to offend, but it didn't seem to resonate either.

Since introducing the Studio Elttob branding elsewhere, I've broadly been reviewing my branding for different products, Fusion among them. I identified there was more that could be done here, and so I started work. After some back-and-forth iteration alongside the Roblox OSS Discord, I'm proud to introduce this new design and direction for Fusion's branding that adds a bit more personality without eliminating everything good about the existing design.

Some design notes

There's a tendency in design circles to get a bit overindulgent and talk about all sorts of associations, inspirations and details that - honestly - don't matter to the viewer. I'll try and do better than that.

The icon was touched up to look a little less similar to some other logos. I decided to take it in more of a rounded outline direction, and played with the layering to give it a bit of a 'vortex' motion. It still reproduces well at small sizes, but it looks more interesting and I think it also somewhat evokes atom orbitals or the confined plasma in a fusion reactor - but you be the judge of that.

The wordmark isn't set in a generic font anymore. Instead, I hand-crafted the wordmark from scratch, using circular arcs and uniform thickness as themes. The stroke width matches the icon, so everything should look like it's cut from the same cloth. I think it sets Fusion apart from the corporate Helvetica-fest quite nicely.

As far as colours go, I decided to keep the existing magenta-orange gradient. I think it provides a great energy to the design already, and didn't need changing. However, I spruced up the previously unremarkable neutral colours with a hint of purple, to play off that gradient a bit. There's also now a natural monochrome variant thanks to the extra cut-outs in the design.

Brand assets

If you use the Fusion icon in your own work, you'll be pleased to hear that I will be making far more assets available now. Colour and monochrome variants of the icon, wordmark and combined logo will all be provided. There are some optimised versions for small sizes, and they will provided in both SVG and PNG formats (including higher-res assets for retina display).

Stay tuned for updates to the Fusion brand guidelines which will include these assets for you to use.

Accessibility

Throughout the process, I've tried my best to keep accessibility concerns in mind. The contrast ratio and colour saturation should be balanced enough to be easily readable without eye strain, the stroke width should be substantial enough such that it doesn't disappear easily, and the logo is designed to read perfectly even without colour reproduction.

---

I won't be transitioning everything over immediately - I'm travelling a lot for the next month - but you'll see it popping up as time goes on. You can see it in my latest Fusion talk - The Atoms of Fusion!

I hope you enjoy this new look, and that it lives up to your expectations!
-Dan

[jmkd3v]

The new outlined logo is very pretty, but I feel like the filled look is nicer for instances where the icon is more important/larger. I can see the outline one being great as "an icon", like if it's in a list of links with icons. But where it's "the icon" in a design, like the docs icon/favicon, a plugin icon, or a wordmark, I think the fill one might look nicer.

[dphfox]

This is one of the things I was considering. I ensured the icon would reproduce at 24x with an exactly 2px stroke for this reason;

I also have dedicated 'small' variants for 16x and 32x which adjust for legibility at small sizes with the same 2px guaranteed thickness and pixel clarity.

Ultimately I decided against maintaining two separate designs at small/large sizes because it'd feel too inconsistent, and I decided that reproduction at 24x was the most important small size to hit since this is most common where Fusion's logo shows up today. There are instances of 16x around but they're few and far between, mostly favicons or dropdowns.