Kaybl: One Cable Guide, Three Screens

Streaming gave us every show ever made and took away the one thing cable did well: you turned it on and something was already playing. No scrolling through tiles for twenty minutes. No decision. Just a channel, a time slot, and whatever happened to be on.

Kaybl is my attempt to get that back for a media library you already own. It's a cable-TV simulator for Plex and Jellyfin, and it starts life as a fork of Tunarr, the open-source project that builds scheduled live channels out of your own media. Tunarr handles the plumbing of turning a library into channels. Kaybl is where I get to rethink what it feels like to sit in front of those channels.

It's in progress. The UI, the UX and the architecture are all being worked on right now, so treat everything below as a design notebook, not a spec.

The look: cassette futurism

Cassette futurism is the future as people imagined it around the late '70s and '80s. Chunky beige and black hardware. CRT screens glowing amber or green. Big physical buttons that click. Tape decks, VU meters, the computer terminals in the background of every sci-fi movie from that stretch. It's retro, but it's retro that thought it was the future, and that's a different mood than plain nostalgia.

It fits a cable simulator almost too well. The thing Kaybl imitates is a piece of that era: a cable box sitting under a tube TV, with a scrolling guide channel you'd park on while you decided. I want Kaybl to borrow that texture (the warmth, the hardware feel, the sense that a machine is doing something) without turning into a pile of fake wood grain.

The structure: a Vignelli grid

Texture alone gets messy fast. That's where Massimo Vignelli comes in. His work, from the 1972 New York subway diagram to decades of corporate identities, runs on grids, a small set of typefaces, and hierarchy through size and weight instead of decoration. I've written more about designing with Vignelli's rules separately.

Here's why that suits a TV guide in particular: a TV guide already is a grid. Time runs across the top in half-hour columns. Channels run down the side. Every program is a cell whose width is its length. Someone designed that layout for newsprint decades ago, and it holds up because the structure carries the information.

A Vignelli-style grid just takes that seriously:

• Columns that mean something (a time slot is always the same width)
• One or two typefaces, with size and weight doing the ranking
• Generous, consistent margins so the eye knows where to land
• Color used for state (now playing, up next, selected), not for decoration

Put the cassette-futurism surface on top of that skeleton and you get something that feels warm but still reads instantly. That's the bet, anyway.

The real problem: three form factors

The part that makes this hard is that Kaybl isn't one screen. The plan is three:

Form factor	Where it lives	What it has to do well
TV guide	A television, across the room	Read from the couch, move with a remote, show a lot of channels at once
Phone tile	A phone, in one hand	Answer "what's on right now?" at a glance
Desktop app	A computer, up close	Give you the full grid with a mouse and room to breathe

Each one pulls the design in a different direction.

The TV guide is a ten-foot interface. Text has to be large, focus has to be obvious from across the room, and every action has to work with arrow keys and a select button. There's no hover. There's barely any precision.

The phone tile is the opposite. It's tiny, it's held close, and nobody wants to pan around a giant grid on a phone. It probably wants to show one thing well rather than everything poorly.

The desktop app is the easy one in some ways, since it has space and a precise pointer. It's also where it's most tempting to cram in too much.

The grid is supposed to be the thing that holds them together. If the columns, the type scale and the state colors are the same system everywhere, the three versions can look different and still feel like the same product. That's the theory I'm designing against right now.

Note

None of these three are finished, and I'm not going to pretend otherwise. What's settled is the direction: the look, the grid, and the three places it needs to live.

A bug I met along the way

Building the guide layout is where I ran into the flexbox min-height bug, the one where a panel that's supposed to scroll just grows instead. A channel guide is the perfect trap for it: a full-window app layout with a big scrolling middle and a header that has to stay put. If you're building anything guide-shaped, that post will save you an evening.

What's next

More of the same, honestly. Settling the grid so it scales from a phone to a TV, deciding what the phone tile actually shows, and working through the architecture underneath the fork. I'll write it up as pieces land.