Expand Afresh’s visual brand system to include additional usable, scalable elements, and solve a specific production problem: reliably generating the food-to-code imagery the company wanted without depending on a small handful of one-off assets.
Afresh brought me on to expand their visual brand so it could cover more elements and work at scale across their collateral and website. I focused on making their existing motifs more usable and reproducible, and on building a system that let them generate new branded imagery on demand.
Goal
Afresh wanted a way to turn any food PNG into a code image that looked like it came straight out of their product. As a grocery supply technology company, they leaned on technical imagery drawn from their own UI to signal the AI underneath the product, and they often ran it alongside photography of food. The problem was scale. They liked the look but it required hours of manual graphic design to type out the code, and general AI design tools kept missing the mark on the exact code and style they needed.
Approach
Start from what Afresh already had and make it repeatable rather than reinventing the aesthetic. I worked from their existing code imagery and their real product data, then built a system that could apply that same treatment to new food items on demand while keeping the code accurate and visually clean.
Process
I trained an AI system to take a food PNG and transform it into a code text image using the correct code, so the output stayed accurate to their product and still read as intentional design rather than noise.
Alongside that, I built out a set of design motifs the team could drop in to fill blank space across collateral and websites, giving them more flexible, on-brand pieces to work with.
The system
The homepage, where the food-to-code treatment and the dune shapes run together at full width.
A close crop of the wash, where the even rows resolve into the product’s real inventory data rather than decorative characters.
The full library: nine shapes, each in a dark and a light colorway, so the texture can sit on either ground without being redrawn.
A quieter background texture that renders the same data at a faint, uniform opacity, meant to sit behind a block of content without competing with it. It gave the team an on-brand way to fill empty space on pages and collateral while keeping the technical, AI-forward feel Afresh cared about.
The dune shape anchored to the left of a page block, filling the space beside the copy without crowding it.
A spec card for the dune shapes, documenting the curve set so the team could rebuild and place it consistently.
The wash applied to a second block, showing how the texture carries across a page without repeating itself.
A lower, wider variation of the shape for blocks that needed a quieter horizon line.
Process image — early food-to-code tests on an avocado and a pepper, when the treatment still dissolved into generic characters rather than Afresh’s real product data.
Process image — a pepper resolving into code across an alignment grid. This one utilized code that was inaccurate and undesirable.
