Hey, I'm John, a designer who likes building tools, systems, and products from the ground up

Rechroma is a project that started as a way to easily generate color palettes and color scales for my studio’s design/dev work. It quickly grew into a full-featured color system product built around the perceptually uniform Oklab colorspace, and had a launch that was featured on Product Hunt.

Rechroma currently features two main workflows: color palette creation and design system construction. The latter, which I named Rechroma Sequencer, builds upon the former since color is a foundational part of any design system.

The color palette tooling includes recommended color palettes (informed by analysis and clustering of real world palette shapes), automatic lightness scale generation, and the ability to export named color tokens/variables to CSS or to Figma via plugin.

Sequencer is currently in active development, and provides a schema and interface to specify/assign tokens for typography, spacing, shape, and more. These are then consumed by a base set of components. The resulting design systems can be output to React/CSS, DESIGN.md, and DTCG formats for use in a project codebase or with AI coding agents.

I also built an mcp server for Sequencer that can generate design systems via agents prompted with reference websites, images, or just a description of the style or vibe you are looking for.

Before Pinecone was Pinecone, it was Hangry Bakery, a beloved LA pop-up crafting seasonal fruit tarts and baked goods. As they prepared to open their first brick-and-mortar bakeshop/cafe, I helped them develop a brand that was ready for their next stage of growth.

I created Pinecone’s wordmark, logos, refined their color palette, and compiled it into a brand system that they could use on their website, in restaurant, on signage, merch, and more.

I built Pinecone’s website with Astro, and filled it with plenty of non-orthogonal touches and joyful animations powered by GSAP. The site stays true to Pinecone’s playful and funky vibe, but also presents a polish that reflects the serious culinary and business cred of the team behind the bakeshop.

I created Mousterian’s brand from scratch as they were exiting stealth and preparing for the public announcement of key partnerships. I prepared Mousterian’s complete brand guidelines, including custom wordmark logo, color system, font selection, type scale, and usage do’s and don’ts.

I designed and built Mousterian’s website on Astro with interactive WebGL/Three.js elements and fluid GSAP-driven animations throughout. I also developed a custom image transformation pipeline to apply a consistent technical/dithered effect to Mousterian’s assets.

KA KA Studio’s founders Irene and James had an established brand direction and following when they came to my partner and I at Elio (studioelio.com). We designed and built the new digital home for their creative food agency, which needed a way to showcase their amazing work: partnerships with national brands, a James Beard Award-winning cookbook, viral content creation, and more.

We helped translate their brand and color scheme into a design system that was ready for the web, and built their site on Webflow. Dynamic and extremely playful were the core themes - expressed by bouncy animations and bubbly fonts and UI elements. We also ensured that all content was properly structed and CMS-driven to make it easy to add future work to the site.

I partnered with Hygge Apps as they brought their environmental sensor hardware to market. The work was multi-faceted, including brand refinement, custom Shopify build, positioning, messaging, and copy, plus product photography and technical diagrams.

Thanks to my architecture background and experience in digital fabrication, I was also able to help with industrial design improvements to the hardware itself. I redesigned the device enclosure to support the evolving electronics and prepared the models for higher volume manufacturing.

I partnered with Hayden Capital to redesign their website from the ground up. I refined their brand into a more flexible color system, and rebuilt their site on Astro (previously on Wordpress).

I also migrated their existing content library of investor letters and research materials to Sanity and Cloudflare R2, and built a custom UI for browsing, filtering, and downloading these materials. The move from Wordpress to Astro resulted in site load times over 3x faster than before, even with the immersive WebGL scene and elegant animations that fill the page.

Elio is a design and development studio co-founded with my partner Sonia with the goal of building ambitious projects. Before Elio, I worked in product in NYC for about a decade. In these roles at small, fast-paced tech startups, I wore a lot of hats: designing product UI in Figma, writing design system css, speaking with customers, conducting user interviews, and of course, launching products.

With this experience and context we started Elio. Elio’s core values are a passion for craft, a love for playful and tactile design, a systems-oriented mindset, and a rigor that says “good enough” is not good enough.

We’ve been lucky enough to work with many awesome and creative clients, and some of the work is featured above on this page.