Building an LCARS interface in CSS

I've already written about why this site looks like a computer from a 1980s starship. This is the how, for anyone tempted to try the same, and mostly it's an exercise in disappointment. There's no clever SVG wizardry hiding in here, no hand-drawn assets, no canvas. It's border-radius, a strict palette, and a font that shouts.

The famous LCARS elbow — that fat right angle where a coloured bar curves into a panel — is the bit everyone assumes is hard. It's a coloured div with one enormous corner radius, sitting next to a panel that rounds the matching corner by the same amount. No SVG, no clip-path, no images. The entire console is a handful of rectangles, each told to round exactly one of its corners in the right colour. Once you've seen it you can't unsee it, and forty years of Star Trek screens quietly turn into the same trick.

The only genuinely fiddly part is that an elbow needs room to read as an elbow. At phone width, a big curve on a narrow bar just looks like a lozenge that lost its nerve, so the elbows are desktop-only; on smaller screens the frame collapses to plain rounded panels and nobody's the wiser. That's the running theme of the whole build. LCARS was drawn for a fixed fictional screen that never had to reflow, and reflowing is the web's entire job — most of the work is teaching a rigid look to bend without breaking character.

The colours were where I had to make myself behave. On the show they're decoration; here each one means something — orange is the front door, gold is a log, violet is the person, blue is software — and I wired those roles into the type system, so that painting a projects page gold is now a compile error rather than a matter of taste. The one place the fantasy lost outright to reality was that same gold: a computer interface from the 24th century, and its dimmer gold failed a 21st-century accessibility contrast check, 3.6 to 1 where the guidelines want 4.5. I darkened it until it passed. Being told off by a web accessibility rule from the present is a very grounding thing to happen to a starship.

If you're going to build your own, the trap is treating LCARS as a skin you paint on. It isn't a skin, it's a grammar: a small set of colours that mean things, a two-tier radius scale and never a third, all-caps condensed type for the labels and something plain and readable for the actual words. Get those rules written down and enforce them like a tyrant, and the elbows more or less draw themselves. Get them wrong and you've built cosplay. I'm still not entirely sure which side of that line this site lands on, but the panels curve nicely, and some days that's enough.