TypeStax: A type scale generator with vintage audio hardware interface

I'm a product designer and a design engineer and I love tactile interfaces and typography.

My goal was to challenge myself to build this purely by 'describing' the interface to an LLM, without giving it any image references. Being mosly working in Figma / Sketch for the past decade or so, the process was utterly painful and I craved to go back to Figma to polish and correct the interface, but I persevered and described the UI to the LLM and progressively built the UI.

The stack is Next.js / React / Zustand with zundo for undo/redo, Clerk for auth. I also made the LLM write 60-odd unit tests and playwright tests running against production. It was AI-assisted throughout.

chrismorgan's critique below is mostly correct. Thanks a ton! The eyebrow one is a straight bug. Base range 8 to 32 is indefensible. Word spacing shouldn't be a control at all. Those three are getting fixed today.

Various factors make me suppose this is low-effort vibe-coding, but I make this response anyway for the potential benefit of others.

• Modular type scales are harmful nonsense. I wrote about it in more detail a few years ago in https://news.ycombinator.com/item?id=36000879. They’re often presented as virtuous, but they actually produce arbitrary, bland, inferior results, mediocre at best.

• The range of base sizes is excessive. I think everyone should agree there’s no point in offering below 14px (8px!), and I wish everyone would agree beyond 24px is madness (32px!). Personally I recommend 16px on small screens, up to a maximum of 18–20px (or if you must, 22px) on large screens.

• Styling all heading levels the same is not a great idea. Yes, I know you have per-element overrides. Encouraging people to treat them the same is not wise. h1 especially is too often not treated differently enough from h2–h6. Sometimes I blame HTML for that, because despite its name, it’s not a heading, it’s the page title. Varying weight, and often varying size massively, between titles and headings and different-level headings, tends to be better than just using an anaemic modular scale with single steps. But there I go on that again…

• The auto-balancing button does some sensible things that show the nature of some of the other problems.

• Changing letter-spacing on headings (as is done by default) is a tad dubious.

• Changing letter-spacing on body text, and word-spacing on any text, should never be done; yet this option is offered.

• For “eyebrow” (interesting term, searching suggests it’s well-established yet somehow this is the first time I’ve come across it), 0.2em letter-spacing is definitely excessive. https://practicaltypography.com/letterspacing.html suggests 5–12% (0.05–0.12em). Incidentally, the per-element overrides doesn’t seem to know about that 0.2em, claims it’s at 0.

• I pressed random preset a few times, got some obviously bad results; e.g. Grand Hotel + Lato has a heading font with significantly smaller metrics than the body one, and where the negative letter-spacing is particularly bad, and where bold is not great. Significantly more than half the time, I strongly disliked the pairing. They felt completely random, even though it felt like half of the presets shown in the list were fine.