Based on the Star Trek: The Next Generation LCARS (Library Catalog and Retrieval System) computer interface created by Michael Okuda. I also got the specifications from LCARS47.com for the shape specifications and color palettes, modifying the dimensions to be a bit more rounded.

This design makes use of CSS Grid and SVG to recreate the designs in an HMTL document. The odd shapes (endcaps, elbows, etc.) are created as SVGs using Adobe Illustrator. The responsive layout and design is possible through the flexibility of CSS Grid. Resizing the window will show that the horizontal and vertical block elements resize to fit the space.

There is still some work to be done on device sizing, and eventually I hope to make a WordPress template out of it, But for now, this will do.

Licensing:

You are free to use this repository as you desire. No attribution is necessary. Star Trek, LCARS and other associated trademarks are the property of CBS/Paramount.

Illustrator source material

If you want the Adobe Illustrator template I created (which has a lot more elements of the LCARS interface, you can go to my repository at https://github.com/hmt3design/Illustrator-templates