Macrometa’s New UI And Design Process - Unravelling An Aesthetic Pleasure

We’re excited to share some big changes happening here at Macrometa. Over the past 6 months, the Macrometa design team has been hard at work crafting a new visual aesthetic, brand, and design system that touches every aspect of the company, as well as completely rebuilt web application. This has been a labor of love, and is still very much ongoing. But today, I would like to share a look at what’s new, along with a peek behind the curtain at some of our tools and methods.

Logo that defines Macrometa

First and foremost, I’m delighted to introduce our new logo, one of a kind that defines us.

The octopus has long been a cherished creature by all of us at Macrometa. I mean, who doesn’t love the noble octopus? They’re such marvelous beings; incredibly intelligent, adaptive, and elegant.. an evolutionary masterpiece by all accounts. We also love the octopus because it’s a perfect metaphor for the Global Data Network.

For example, the brain of an octopus is fully distributed across their entire body, with each limb containing its own independent “mini-brain”, much like how the GDN is a fully-distributed active-active architecture with no single point of failure.

But I digress, we’re here to talk about logos and pixels! Read more about our love for the octopus here: The Octopus and Macrometa.

Logomark

With our new logomark, the beloved octopus finally has a home front and center in everything we do. This mark brings clarity, symmetry, and confidence into balance with the playful, fluid nature of the octopus. It’s unique and yet quite familiar, offering a bit of personality and energy wherever it goes.

The octopus can be a rather challenging creature to incorporate into a logo, simply because they’re so amorphous and pliable. It becomes an exercise in balancing several contrasting attributes: how detailed vs. abstract, how cartoonish vs. realistic, and how cute vs. serious? Too much or too little in any direction and the concept misses the mark entirely.

Typography

Our new brand typography is centered around the Averta typeface, a geometric san-serif family by type designer and typographer Kostas Bartokas. I love this typeface. Averta combines the stab reliability of rounded geometric glyphs with an open, refreshing playfulness. It also looks great for large headlines while maintaining sharpness and legibility at smaller sizes.

Early days of the Macrometa Design System (and a new Web App too!)

Over the past several months, our engineering and design teams have been hard at work building a new and greatly improved web console. This app serves as a primary touchpoint for all users of our platform. Our web console is by every measure a mission-critical application and was previously written in BackboneJS.

If you’re familiar with BackboneJS, you will have some sense of what we were up against. If not, BackboneJS was an early JavaScript application framework based on the MVC architectural paradigm. When BackboneJS first launched in 2010, it brought a huge leap forward for authoring interactive web apps. But alas, the time has marched on. We considered a handful of ways to port our app away from BackboneJS incrementally, but in the end realized we needed to bite the bullet and rebuild the entire thing from the ground up. And so, that’s exactly what we did.

Our new web console is built with React, Vite, Axios, Formik with Yup, and all the wonderful open-source conveniences one might expect under the hood of a modern frontend stack. This new app architecture has already vastly improved our development velocity, which will soon become evident with more frequent and featureful releases. Having worked on a lot of React apps in my time, I can’t tell you how unnerving it is to suddenly be sent back in time 10 years, losing access to all of the amazing tools and design patterns that have happened since. Let’s just say, it’s good to be back!

Of all the enhancements under the hood, I’m most excited about the addition of Chakra UI as the foundation of our UI component library, and how this has allowed us to move fast while unifying the presentational layer of our built applications with our design tooling and resources. I’ve used Chakra UI on several occasions prior to joining Macrometa, I really can’t sing its praises loudly enough. I highly recommend taking it for a test drive, if you haven’t already.

Like many design teams, we work almost exclusively in Figma, and have produced a comprehensive collection of foundations, components, patterns, and guidelines to support and streamline our work. The mocks we produce in Figma use components, styles, and spacing rules that correspond precisely to our Chakra UI component library and theme configuration, leaving zero room for divergent or ambiguous details. The official Chakra UI Figma Kit was a huge help in bootstrapping our initial component library and allows for easy customization as well.

This setup helps our relatively small design team move much faster and more effectively while helping our frontend engineer teams implement our work faster and more accurately.

Wrapping up

We’re still very much in the early days of building the Macrometa design team and are always looking for help. If that sounds like fun to you, feel free to reach out and say hi!