← Back to Notebook
Labs · Draft standard

Elbow: making the Star Trek interface do something

LCARS looks like the future and means nothing. Here's a draft spec that gives every shape a job, plus a wall panel you can poke at, one idea at a time.

LCARS is the Star Trek computer: black screen, big candy-colored bars, a fat orange elbow swooping from the left side across the top. It has looked like the future for almost forty years. It was also built on a TV budget to look clever from across a soundstage, and on the show the numbers on the buttons are random.

So I asked a question I should have asked as a kid: could you actually use it?

What the internet already knows

Less than you'd think. There are plenty of LCARS skins: CSS kits, Home Assistant themes, a Pi-hole display on a Raspberry Pi. They copy the shapes and skip the rules, because there aren't any. One designer who tried to build a usable one put it plainly: it's "quite hard to build an LCARS interface that is both pretty and somewhat usable." The only written rule I found is a fan's: the frame always goes thick to thin at each turn.

The Home Assistant crowd lives with the results. Grid lines vanish against black. Cards break after updates. People switch back to the boring theme to edit, then switch to the starship one to show off.

There's no usability research on it at all. And Paramount owns the look and has pulled apps over it before. So this is inspired by, under its own name.

What the show actually does

Opinions are cheap, so we went to the tape. We pulled 35 stills from TNG, DS9, Voyager and Lower Decks (all via Memory Alpha, which has catalogued every screen like a museum) and looked for the moves the designers repeated without being told to. Here's what held up:

  • Going deeper keeps the frame. When a screen drills from overview to detail, the elbow, sidebar and bottom bar stay put and only the middle changes. On Data's schematic, the body overview shrinks to a thumbnail inside the detail panel, the original breadcrumb. (overview, detail)
  • Real nesting is a smaller frame inside the content, with its own elbow. One Voyager engineering monitor runs three levels deep. (Voyager scan analysis)
  • PADDs are sidebar-and-title. Lower Decks draws the most readable portrait screens: a narrow numbered sidebar, the title flush right, and a thin inner frame. A list row can open a small box joined by a line. (Boimler's itinerary)
  • Bottoms are for status, never tabs. Bottom bars show up only as the lower edge of a C-shaped frame, carrying IDs and readouts. (exam list PADD)
  • Selection is a fill. A deck plan in thin outline, the room you want filled orange. (Voyager deck plan)
  • The only pop-up is live video, framed in corner brackets over the ship cutaway. (TNG MSD video)
  • Zooming is brackets, not new screens. Concentric brackets close in on the target. (Voyager nav scan)
  • Long lists page inside a frame that never moves. (six pages of holodeck programs)
  • Data screens share one layout: big title flush right, a band of numbers, KEY = VALUE lines, a picture, and one status line in the corner.

Caveats, because the tape is the tape: these are stills, so we can't see how screens move (on TV they mostly just cut). And a lot of the numbers really were decoration. That's the part we're fixing.

The idea: keep the shapes, give them jobs

Look at LCARS long enough and a working interface is already hiding in it. The side rail could be navigation. The top bar could say where you are. The elbow, where the two meet, could be home. Red Alert, where the whole screen turns red, is the best status signal in science fiction: you can read it from the next room. The show just never committed to any of it.

Elbow commits. It's a draft spec (version 0.4, seventeen rules) and a working wall panel for an imaginary house. The panel is below in pieces, one idea at a time. Click into any of them and poke. It's meant for wall tablets, home dashboards and status screens: things you glance at, tap once, or watch numbers move on. It's not for your taxes.

1. You can see how deep you are

Every menu in Elbow is a frame inside a frame, and each level down is drawn thinner. The root rail is 150 pixels wide with a 30-pixel bar. One level in, 16. Then 10. Then 6, a pinstripe. Each step also moves one shade down the frame colors. You never need breadcrumbs, because the ancestors stay on screen as fat, then thinner, then thin brackets around where you are.

The numbers on the segments finally mean something. They're addresses, and they add up: 5.2.1 is Systems, then Climate, then Upstairs. Type 5, 2, 1 and you're there. Esc climbs back out, one thicker frame at a time. Four levels is the limit. If you need a fifth, your house is too complicated.

On a phone there's no room for frames side by side, so you go inside instead, the way the show does it: the frame stays put and only what's in it changes. The levels you came through shrink to thin bars at the top, thinner the deeper you go. Tap one to climb out. I checked: the show never once puts tabs along the bottom, so neither does Elbow.

Open this full screen

2. Big buttons, with the price on the ring

The transporter room had the right idea: a few huge buttons for the few things that matter. Elbow keeps them, and adds the circled numbers the show loved, except now they're true. The number in each chip is live: how many things that button will change right now, and the line under the name says what they are ("Turns off 2 lights, locks 1 door"). When there's nothing left to do, the chip turns into a check. A number without its noun is just noise.

The ring around the number is the price. White: it happens now, and you can undo it. Gold: hard to undo, so press and hold while a sweep crosses the button (lock the house, open the garage). Red: it reaches a human being, so hold even longer. Energize responsibly.

Open this full screen

3. Data, stolen from the science station

I was rewatching TNG and paused on a science screen: Planetary scan = Theta Eight. I took pictures of my TV like a lunatic. The frame splits in two, with a pair of thin bars running across. Above the bars, the facts, KEY = VALUE in tall blue capitals. Below, a picture of the planet inside square brackets, with a scale and tick marks down one side, a catalog number in the corner and a sample count in the other. It's the most usable screen in the series, and it's on for four seconds.

So that's the data layout. The top segments pick what you're scanning (power, outside temperature, battery, the live sensor log). The bottom segments pick the range. The spec sheet up top is the tooltip: drag across the chart, or arrow through it, and the Reading = line follows. And that striped block on the divider bars, pure decoration in the show, is the cursor here. It slides along the bars to mark the hour you're reading.

Since the first version I've added the rest of the show's data layout: a band of the actual hourly numbers under the title (the famous LCARS number cascade, except true), a one-line status in the corner ("Heating engaged · 2° to set point"), and a wind scan drawn the way the show draws everything round: rings, spokes, and a trail.

The chart rules are boring on purpose. One series per chart. Bars start at zero. Gridlines are grey, never a frame color. Numbers you'd read out loud are white or Data blue. The sensor log is the famous LCARS waterfall of numbers, except every row starts with an address you can go visit.

Open this full screen

4. More colors that still mean something

The first draft had five colors, one per job, and it looked like a road sign. The show has dozens. The fix is families: five jobs, several tints each. Frame is amber, apricot, sand and clay. Action is lavender, lilac and violet. Data is ice, frost and steel. The family carries the meaning. The tint only tells neighbors apart, so you get the show's candy-store rhythm without any color lying to you.

That also makes themes safe. The data scan above is in Science, the pink-and-blue lab look. Every tint changed, and no job moved. Red alert still repaints everything at once. Try it on the Weather page: one tap, the whole frame turns red, and the header says why in words.

Open this full screen

5. A map you can walk into

Every Starfleet ship has a cutaway on the wall. Every house could. The Map is a floor plan in thin outline: tap a room and it fills orange, the detail takes over, and the whole floor shrinks to a thumbnail you tap to go back. That's the move from Data's schematic, turned sideways.

Doors show their state (blue is locked, gold is open). The purple rings are cameras. Tap one and you get the only pop-up Elbow allows: live video in corner brackets, floating over the plan, exactly like the engineering monitor. Everything else stays in the frame.

Open this full screen

6. Rows that open in place

Not everything deserves a new screen. Lights are one level deep, so a light's controls open right there in the list, hanging off its row by a line, like Boimler's itinerary. The rule we landed on: one level down opens in place; two or more goes inside.

Open this full screen

Working theories

These are the ideas underneath the rules. They're theories because the only way to prove them is to put a panel on a wall and live with it.

  1. LCARS has a grammar; nobody wrote it down. The designers repeated the same moves for twenty years without a spec. Elbow is the spec they'd have written if anyone had to use it.
  2. The frame is the place; the content is the thing. Going deeper changes the content, never the frame. If the frame changes, you've gone somewhere else.
  3. You should feel depth before you read it. Thinner frames, thinner bars and quieter colors as you go down.
  4. A number without a noun is noise. Every number is an address, a live value or an ID, and it says which.
  5. Sides navigate, bottoms report. Sidebars and top bars move you around. A bottom bar only tells you how things are.
  6. Color is a family, not a swatch. The family says what a thing is for. The tint just keeps neighbors apart.
  7. Only live things get to float. Video can pop up over the frame. Menus and dialogs can't.
  8. Decoration can earn its keep. The show's best ornaments (the striped junction, the corner numbers, the brackets) turn out to be cursors, addresses and zoom controls waiting for a job.

The whole panel

All eight sections in one place. Click in, then press 1 to 8. Weather has the hail button. (Colorado. Hail. This one's personal.)

Open this full screen

The rules, short version

  1. The frame is navigation. Rail segments are sections, the bar says where you are, and the elbow is home.
  2. The frame never holds content. The black field does.
  3. Thickness is depth. Each level is a thinner frame inside its parent. Four levels, tops.
  4. Shape is what you can do. Segments navigate, pills act, big buttons do the main jobs, and square blocks only report.
  5. Five color families, many tints. The family is the meaning. Color always comes with a shape or a word.
  6. Every number is real: an address, a live value or an ID.
  7. Condition is the whole frame, and the header says why.
  8. Condensed capitals for labels, a readable face for sentences.
  9. Black gaps are the grid.
  10. Animate only when something changes.
  11. Type an address to go there. Esc goes up a level.
  12. On a phone, it's a PADD. The sidebar stays, the frame closes into a C with status along the bottom, and menus go inside one level at a time.
  13. The split frame: summary above the double bar, detail below, and the junction is the cursor.
  14. Charts: one series, zero-based bars, grey grids, a bracket with an ID and a count.
  15. Themes change tints, never jobs.
  16. Maps: thin outlines, selection is an orange fill, and the plan shrinks to a thumbnail when you go into a room.
  17. One level opens in place, two goes inside. Only live video floats.

The full text, with numbers and a checklist, is in the spec. What changed and why, including every time I said "that feels weird," is in the update log.

What's still open

  • Big tables. LCARS has never met a spreadsheet it liked. The eight-row log is as far as it goes so far.
  • The name. "Elbow" is a placeholder that's growing on me.
  • A real install. The next step is a Home Assistant version on an actual wall, wired to hailAlert, my hail early-warning script, so red alert means real hail.

Sources