design @ PLUSproduct, systems, codebay area
All work

2024 to 2025Brand Design, Web Design & Development, 0 to 1 Design System

JAFFX

Brand, letterforms, and a design system for a guitar pedal you can reprogram from your browser.

JAFFX makes a guitar pedal you reprogram from a browser, with an open-source library where players share the effects they build. I was the first designer the company ever had, and the identity had to reach a beginner and a person who writes audio code in the same glance.

Role
Founding designer and frontend engineer
Context
JAFFX, an open-source guitar pedal startup
Team
Five people. One designer.
Scope
Eleven months: brand, letterforms, design system, product UI, pitch deck, print, and the site
Outcome
Second of 44 teams, UCSB New Venture Competition
01

No brand, no designer, and nobody to catch a wrong decision

I joined in October 2024. What existed was a values document, a name borrowed from the founder's own, a Daisy Seed dev board, and a plan.

The name was already there: Joel A. Jaffe, plus FX. Everything else about how the company looked and read was open. No designer had ever worked here, so there was no house style to inherit and nothing to argue with.

There was also nobody to check my work. The founders trusted my judgment completely and never pushed back on a single decision in eleven months. I expected that to feel like freedom. Mostly it felt like weight: every consequence of every choice was going to be mine, and if something was wrong, no one was going to catch it. That shaped how I worked, and it comes back at the end of this study.

02

Two customers who want opposite things from the same object

Thirty customer interviews and a survey of the category at NAMM came back with two segments, and they wanted opposite things.

  • Pedal Curious

    Little or no experience with effects. Interested, but analog pedals mean buying five units to get a usable range of tones, and digital multi-effects units bury everything in menus.

  • Tinkerers

    Care about customising their sound as much as playing it. Their problem is the opposite one: existing products are not extensible, and nothing talks to anything else.

Menu-diving with digital pedals can be overwhelming. There are too many options. Simpler is better.
A Pedal Curious interviewee, market validation

The complaint is not about capability. It is about the cost of reaching it. Anything I made had to be readable before it was understood, which ruled out density as a look.

The product answered this with one device that does both, analog-feeling to play and reprogrammable underneath. The brand had the same problem and no hardware to hide behind. Whatever I made had to be legible to both people at once, in a single glance, on a poster.

The JAFFX pedal enclosure drawn as a wedge, its top face and side each carrying a different pass of the brand gradient.
The object itself. One enclosure both segments are being sold, which is why the brand could not pick a side either.
  • Boutique analog

    Hand-painted enclosures, illustration, nostalgia. Wins the Pedal Curious and reads as a novelty object rather than a programmable platform.

  • Digital multi-FX

    Black plastic, grey LCD, dense and severe. Wins Tinkerers by looking like the menu-diving problem we existed to solve.

  • Open-source tools

    Monospace, terminal, flat and utilitarian. Credible to Tinkerers and invisible to a beginner. No warmth, and no music in it.

Each of the three adjacent worlds solves for exactly one of my two customers. Borrowing any one of their languages would have sold the product to half its market and quietly written off the other half. The brand had to sit in the gap none of them occupied, which is why sleek, fun and warm was not a mood board. It was the position, and it was the only one that reached both segments.

03

Three attributes, one mechanism each

Adjectives do not survive contact with a deadline. Each attribute became a set of decisions I could apply the same way every time.

  • Sleek

    Simple geometric shapes, gradients, and #1A0D1C as the standing ground. Monospace for everything you read. This is what buys credibility with people who write code.

  • Fun

    Variety of shape, bold colour, texture. The pedal should be as fun to explore as a toy and powerful enough to say something with. This is what lowers the cost of picking it up.

  • Warm

    One colour carries it. #F14E13 is the primary, and it is doing the work of making an open-source project feel like a place rather than a repo.

The JAFFX J drawn as a single slab, split by a horizontal cut near the top and a curved cut at the foot, filled with the orange to periwinkle gradient.
The J, the mark that had to work at avatar size. Sleek is the geometry, fun is the cut, warm is the orange end of the gradient. Three attributes in one glyph.

The monospace decision is the one I would defend hardest. Mono is the native typography of code and open source, so every line of text on the site quietly tells a Tinkerer that you can get inside this, while staying calm and readable for someone who cannot. Expression is concentrated in the display letterforms and the gradient, and the layer you actually read stays technical. One rule, and most of the tension resolves itself.

The second rule lives in the navigation. Nav items are pedal knobs and the active state is the status LED, so the playfulness sits in the interaction metaphor rather than in decoration. Fun that costs nothing in sleekness.

04

I drew the letterforms because we could not license any

The reason is unglamorous. A display face running across hardware, merch, print, slides and web costs more than a pre-seed company has.

A free face with unclear terms was a risk I did not want to hand the founders. Drawing our own removed the problem and gave the company something it owned outright. The first directions were wrong in an instructive way.

  • A rounded, bulbous rock wordmark. Warm and immediate, and completely wrong: it reads as a band's logo, sells nostalgia to the Pedal Curious, and says nothing at all to a Tinkerer.
  • Literal music iconography, a treble clef and staff notation. Wrong instrument for a guitar product, and notation signals learn to read music first, which is the exact intimidation the product exists to remove.
  • JFX, as a shorter mark. Cleaner, but it threw away the founder's name, which is where the whole thing came from.

What survived was built from the sleek rule and the fun rule at the same time: letters cut from solid geometric slabs, each broken by a diagonal negative-space gap. The geometry is the sleek half. The cuts are the fun half.

The complete JAFFX alphabet, A to Z, set in three rows of solid orange slab letters on the dark ground. Every letter is broken by at least one diagonal or curved cut.
All twenty-six. The cut is never filled in with a second colour, so the gap is always the ground showing through and the whole alphabet stays one flat shape.

Wide, uppercase and stencil-like, it borrows from amp faceplates and roadcase stencils rather than from posters. Two honest notes about how it was made. I drew the letterforms as vectors in Figma, in the same file as the rest of the system, rather than cutting a font file. That kept the whole brand in one place while it was changing weekly, and it is why the hardest part of the work was spacing: with no kerning table, certain pairs had to be corrected by eye on every application, and a few never fully settled. Cutting a real font with proper kerning pairs is the first thing I would do next.

05

Colour that carries information, not a swatch list

The palette has a spine. #1A0D1C is the ground and the default state, so dark is not a theme here, it is where the brand lives.

#F14E13 is the primary and the carrier of the warmth. Between them runs the gradient into periwinkle that appears in the wordmark and across every surface. Everything else is an accent, held to a supporting role. Accents earn their place when they carry information rather than decoration.

The JAFFX palette laid out by role: a large #F14E13 primary block, two smaller accent chips in #FFC028 and #707FE8, a full-width gradient bar from #F14E13 to #707FE8, and a single #1A0D1C ground swatch outlined against the page.
Laid out by role rather than as a grid of equal squares. How much room a colour gets on this sheet is how much room it gets everywhere else.
  • In the pitch deck

    Each part of the value proposition takes its own accent: mint for user-friendly, gold for infinitely extensible, periwinkle for open-source. The palette is encoding the three things the company claims.

  • In JAFFX Studio

    Every effect block is a distinct gradient tile, so a saved signal chain is readable at a glance without reading a single label. Colour is doing product work.

06

Fifteen surfaces, one designer, and the site underneath

Over eleven months the system had to cover the website, the mobile site, the product UI, a sixty-slide deck, print, merch, and a fifteen-piece icon set.

No budget, no other designer, no existing assets. The slide I would point at first is the market-size chart. TAM, SAM and SOM is the most standardised and least interesting diagram in venture pitching, and I drew it as nested organic waves in the brand palette with a plectrum-shaped marker for the beachhead. It is the fun rule surviving contact with the least fun content in the company, which is the only way to find out whether a principle is real or decorative.

The system's real test came later and without me. Our CEO used it to assemble grant applications. Marketing used it to make videos, flyers and posters.

I was the frontend lead as well as the designer, and shipped jaffx.audio: home, demo, team, studio and contact, with the waitlist and the icon set I had drawn. The team's own market validation had concluded that the website was a component of the product rather than marketing around it, which is why it mattered that one person did both. Nothing was lost in handoff because there was no handoff. The tokens in the design file and the custom properties in the stylesheet were the same decisions, written twice.

07

Second of forty-four, and what total ownership cost

JAFFX went through UCSB's New Venture Competition, an eight-month programme that runs on elimination.

44
Teams at the start, October 2024
6 of 20
Through the New Venture Fair, judged in trade-show format on booth, demo and poster
2nd
At the finals, in front of independent judges. $7,500, on a $250,000 prototype-phase ask

The middle round is the one that mattered for this work. The Fair is judged on a booth, a demo and a poster, so at that stage the visible product was largely the brand. Twenty teams went in and six came out. I will not claim the identity caused that. I will say that the round where my work was the thing being looked at is the round we survived.

Nobody pushed back on anything, so nothing caught what drifted, and three things did. The palette grew past what one person could reasonably govern, and ten swatches with no stated hierarchy is a system that will be misread the moment someone else opens it. The principles lived in my head rather than in a document, which is why the brandbook records a type stack and a colour grid instead of the attribute-to-mechanism map I was actually working from. And the letterforms stayed Figma vectors, so spacing needed correcting by hand on every application. All three are the same failure in different clothes.

I would write the principles in week two, when they are cheap, instead of reconstructing them afterwards. The one move JAFFX never got to is the one I would want most: it is a music company with no sound and no motion in its identity, a brand for people who make noise, that has never made any.