Codemod

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.

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.

For a consistent social presence, we created a custom social kit for the Codemod team, to simplify asset generation.

Dynamic social image (OG) templates were also tailored for blog articles, codemods, job posts - all fueled by Vercel's OG package. We also included a fallback GIF.

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.

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.

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.