Codemod

In just 3 months, we helped the Codemod brand undergo a visual transformation - from a new logo to a refreshed web app, we covered it all.

Visit website

“
The amount of work, obsession, and love that Tinloof put it to Codemod is just wow.”
Alex Bit
CEO @ Codemod

What we did

New logo

Fresh brand book

Social asset guidelines

Revamped website

Enhanced registry

Upgraded web app

Logo

Using the idea of the CLI as the starting point, we decided to steer the new logo towards Codemod’s vision of making seamless code upgrades a reality for all developers in the world, where the slash symbolises the start and the dot represents the end of code transformation.

Visual language

Codemod is on a mission to bring life to the lifeless code, and we wanted to use the visual language to reintroduce dynamism and life to the brand.

A zesty prout (green yellow) accent draws inspiration from two key elements - the ecosystem, evoking a natural green, and lightning speed, represented by a vibrant yellow.

Typography is a crucial aspect of Codemod's identity. By using the Satoshi font, a modernist sans serif typeface with grotesk-style letterforms and geometrically-designed characters, our aim was to combine practicality with a modern aesthetic.

A kit of animated illustrations that work in both light and dark modes were also created on Figma to elevate the site's appearance and convey codemods' capabilities.

Brand guidelines can be found here.

Custom social kit on Figma

Registry

Users who land on the site can immediately search, filter, and get a taste of codemods. Our aim is to make them experience the product firsthand. No fuss.

Discover, share, and run codemod automations effortlessly with the Codemod registry. Our refresh brings a user-friendly filterable list-view to explore hundreds of codemods.

Web app

Codemod Studio, a helper and debugger web app, has received a serious upgrade. Amongst the enhancements:

◆ Input and output combined into one sleek panel.

◆ AST moved to its own tab.

◆ Streamlined test case editing.

◆ And revamped signup popup.

As the web is evolving towards unified frontend experiences, our aim is to make transitioning from a marketing page to a web app feel like a natural continuation, not a departure.

Below a Figma prototype exploration of how we eventually plan to make that happen.

Behind the scenes

For the curious ones, here are the behind-the-scenes highlights:

1 — The site is available in both light and dark modes. Designing it with Figma variables made it a breeze.

2 — Animated illustrations? Created directly on Figma. No Adobe After Effects required.

3 — Custom hover effects like the Docs flip and theme switcher were created using Aninix. It provides convenient access from Figma and autogenerates CSS.